swarm-ui: delete StatusChip, migrate its 3 callers to shared Badge

mara: non-interactive Badge and StatusChip render identically (same
padding/radius/font, same tone-to-color mapping) and StatusChip's
4-tone/single-label shape is a strict subset of Badge's — no real
reason to keep both. Deletes StatusChip.tsx/.css, migrates AgentsPage's
config-PR chip, HivesPage's freshness chip, and ComponentsPage's own
table-status sample to Badge (tone/value, no onClick). Also drops the
now-redundant standalone StatusChip demo section on /components (the
Badge section already covers all 4 former chip tones plus accent).

Updated the two stale StatusChip references outside swarm-ui too:
design-guide.md's component-list example and colors.css's WCAG-
contrast-rationale comment.
This commit is contained in:
iris 2026-08-28 10:46:04 +02:00 committed by mara
commit 638e1ac2c6
8 changed files with 19 additions and 76 deletions

View file

@ -10,13 +10,15 @@
// "alive"). Same component either way so a page reads as one consistent
// row of badges regardless of which ones happen to be interactive.
//
// Distinct from swarm-ui's own `StatusChip` (`swarm-ui/src/ui/status-chip/`):
// that one is presentational-only and swarm-ui-local. This one lives here
// in `shared` because both swarm-ui *and* the per-agent page need the
// interactive shape, and `shared` is the one package both already depend
// on (see `docs/web-ui/design-guide.md`'s component-first + junk-drawer
// rules — this is the same visual language, applied where it's actually
// consumed).
// Formerly two components: swarm-ui had its own presentational-only
// `StatusChip`, a strict subset of this shape (no interactivity, no
// label/value split, no icon). Deleted in favour of this one — a
// non-interactive `Badge` renders identically, and having two components
// for the same visual pill just meant a page had to pick between them
// with no real distinction to justify it. Lives in `shared` because both
// swarm-ui *and* the per-agent page need the interactive shape, and
// `shared` is the one package both already depend on (see
// `docs/web-ui/design-guide.md`'s component-first + junk-drawer rules).
import type { ComponentChildren } from 'preact';
import './Badge.css';

View file

@ -49,7 +49,7 @@
(same hue/saturation, lower HSL lightness), not a literal upstream
port like base00-07 above. A review round computed real WCAG
contrast ratios and found the literal Latte accents fail badly as
`StatusChip` fill-text (green/amber/red/yellow on
`Badge`/chip fill-text (green/amber/red/yellow on
`--purple-dim`/base03: 1.4:1-3:1, need 4.5:1) and even as plain
text on `--bg`/base00 in the agent/dashboard packages that also
consume this same file (2.3:1-4.8:1). Root cause: Latte's own