From 92b9e6732785758e2900f7124494fe9edfeb821d Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Wed, 12 Aug 2026 17:25:38 +0200
Subject: [PATCH 1/2] 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 ... make it common css
instead of component, thats fine. but make them look unified"):
shared CSS, not a JS component.

New @hive/shared/pill.css defines the shape (border/border-radius/
padding/font-size/letter-spacing — color stays per-site, that's the
meaningful semantic part) in two tiers matching what was already
organically in use: `.hive-pill` (primary state chips) and
`.hive-pill-sm` (secondary meta chips). Every pre-existing classname
that drew its own copy of this shape (dashboard's `.badge` family,
agent's `.status-badge`/`.state-badge`/`.header-pill`/`.ctx-badge`/
`.model-chip`/`.effort-chip`) is folded straight into the same
selector groups, so no markup or JS changes were needed anywhere —
every render call site keeps constructing the exact same classnames
it always did.

Most visible consequence: dashboard's `.badge` family moves from its
own shape (2px square corners, uppercase, tighter padding) onto the
shared rounded-pill shape + agent's "sm" tier sizing, matching the
"look unified" ask directly. `npm run build` clean across all three
packages.
---
 frontend/packages/agent/src/agent.css      | 37 +++++----------
 frontend/packages/dashboard/src/common.css | 14 +++---
 frontend/packages/shared/package.json      |  1 +
 frontend/packages/shared/src/pill.css      | 53 ++++++++++++++++++++++
 4 files changed, 73 insertions(+), 32 deletions(-)
 create mode 100644 frontend/packages/shared/src/pill.css

diff --git a/frontend/packages/agent/src/agent.css b/frontend/packages/agent/src/agent.css
index 411ed31a..c9770ec5 100644
--- a/frontend/packages/agent/src/agent.css
+++ b/frontend/packages/agent/src/agent.css
@@ -6,6 +6,10 @@
    agent SUB-pages (stats, screen) the same back-link nav the dashboard's
    standalone pages use. The live terminal page keeps its own header. */
 @import "@hive/shared/chrome.css";
+/* Shared pill/chip/badge shape (the "extract pill component" issue,
+   resolved as shared CSS rather than a JS component) — see pill.css
+   itself for the classnames it covers. */
+@import "@hive/shared/pill.css";
 /* Themed dialog/toast component CSS (modal.js) now lives in each
    component's own shadow root (adoptedStyleSheets), not a global
    stylesheet — nothing to @import here any more. */
@@ -302,14 +306,11 @@ h2, h3 {
 
 /* Header pill — inbox / loose-ends triggers. Compact, count-prominent. */
 .header-pill {
+  /* border/radius/padding/font-size/letter-spacing: shared pill.css */
   background: transparent;
-  border: 1px solid var(--purple-dim);
+  border-color: var(--purple-dim);
   color: var(--fg);
   font-family: inherit;
-  font-size: 0.85em;
-  letter-spacing: 0.04em;
-  border-radius: 999px;
-  padding: 0.25em 0.7em;
   display: inline-flex;
   align-items: center;
   gap: 0.4em;
@@ -604,12 +605,9 @@ pre.diff {
 }
 .model-chip,
 .effort-chip {
+  /* border/radius/padding/font-size/letter-spacing: shared pill.css */
   display: inline-block;
-  padding: 0.1em 0.6em;
-  border: 1px solid var(--purple-dim);
-  border-radius: 999px;
-  font-size: 0.78em;
-  letter-spacing: 0.04em;
+  border-color: var(--purple-dim);
 }
 .model-chip { color: var(--cyan); }
 .effort-chip { color: var(--amber); }
@@ -618,13 +616,10 @@ 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;
-  padding: 0.1em 0.6em;
-  border: 1px solid var(--purple-dim);
-  border-radius: 999px;
+  border-color: var(--purple-dim);
   color: var(--green);
-  font-size: 0.78em;
-  letter-spacing: 0.04em;
   cursor: default;
   white-space: pre-line;
 }
@@ -633,12 +628,8 @@ pre.diff {
    `.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;
-  padding: 0.25em 0.8em;
-  border: 1px solid;
-  border-radius: 999px;
-  font-size: 0.85em;
-  letter-spacing: 0.05em;
 }
 .status-badge.status-loading      { color: var(--muted);  border-color: var(--purple-dim); }
 .status-badge.status-online       { color: var(--green);  border-color: var(--green);
@@ -672,12 +663,8 @@ pre.diff {
    `:disabled` opacity treatment lives on the shared
    `.overflow-item:disabled` rule). */
 .state-badge {
+  /* border/radius/padding/font-size/letter-spacing: shared pill.css */
   display: inline-block;
-  padding: 0.25em 0.8em;
-  border: 1px solid;
-  border-radius: 999px;
-  font-size: 0.85em;
-  letter-spacing: 0.05em;
   transition: color 280ms ease, border-color 280ms ease,
               box-shadow 280ms ease, background 280ms ease;
 }
diff --git a/frontend/packages/dashboard/src/common.css b/frontend/packages/dashboard/src/common.css
index d8746d73..4d026641 100644
--- a/frontend/packages/dashboard/src/common.css
+++ b/frontend/packages/dashboard/src/common.css
@@ -4,6 +4,10 @@
 @import "@hive/shared/terminal.css";
 @import "@hive/shared/tabs.css";
 @import "@hive/shared/chrome.css";
+/* Shared pill/chip/badge shape (the "extract pill component" issue,
+   resolved as shared CSS rather than a JS component) — see pill.css
+   itself for the classnames it covers. */
+@import "@hive/shared/pill.css";
 
 /* ─── global typography ─────────────────────────────────────────────
    Element-level rules shared across all three pages (index, flow,
@@ -54,15 +58,11 @@ code {
 
 /* ─── status badges ─────────────────────────────────────────────────
    .badge base + semantic colour variants. Used on container rows
-   (tabs.js) and build-log rows (logs.js). */
+   (tabs.js) and build-log rows (logs.js). Shape (border/radius/padding/
+   font-size/letter-spacing) is shared with the agent UI's pill/chip
+   family — see @hive/shared/pill.css. */
 .badge {
   display: inline-block;
-  padding: 0.05em 0.5em;
-  border: 1px solid;
-  border-radius: 2px;
-  font-size: 0.75em;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
 }
 .badge-warn {
   color: var(--amber); border-color: var(--amber);
diff --git a/frontend/packages/shared/package.json b/frontend/packages/shared/package.json
index 478a1cf2..5dc89c8d 100644
--- a/frontend/packages/shared/package.json
+++ b/frontend/packages/shared/package.json
@@ -16,6 +16,7 @@
     "./base.css": "./src/base.css",
     "./terminal.css": "./src/terminal/terminal.css",
     "./chrome.css": "./src/chrome.css",
+    "./pill.css": "./src/pill.css",
     "./forms.js": "./src/forms.js",
     "./prefs.js": "./src/prefs.js",
     "./dom.js": "./src/dom.js",
diff --git a/frontend/packages/shared/src/pill.css b/frontend/packages/shared/src/pill.css
new file mode 100644
index 00000000..de1254d7
--- /dev/null
+++ b/frontend/packages/shared/src/pill.css
@@ -0,0 +1,53 @@
+/* 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.
+
+   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)
+     .hive-pill-sm — secondary meta chips (agent model/effort/ctx chips,
+                     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. */
+
+.hive-pill,
+.hive-pill-sm,
+.status-badge,
+.state-badge,
+.header-pill,
+.ctx-badge,
+.model-chip,
+.effort-chip,
+.badge {
+  border: 1px solid;
+  border-radius: 999px;
+}
+
+.hive-pill,
+.status-badge,
+.state-badge,
+.header-pill {
+  padding: 0.25em 0.8em;
+  font-size: 0.85em;
+  letter-spacing: 0.05em;
+}
+
+.hive-pill-sm,
+.ctx-badge,
+.model-chip,
+.effort-chip,
+.badge {
+  padding: 0.1em 0.6em;
+  font-size: 0.78em;
+  letter-spacing: 0.04em;
+}

From 8dd6d05d6cc09aa47d6a83684a8aa8c999423f96 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Wed, 12 Aug 2026 17:38:07 +0200
Subject: [PATCH 2/2] 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 @@
       </div>
 
       <div id="state-row" class="agent-state-row agent-header-row">
-        <span id="alive-badge" class="status-badge status-loading" title="harness reachability">…</span>
-        <span id="state-badge" class="state-badge state-loading">… booting</span>
-        <span id="model-chip" class="model-chip" hidden></span>
-        <span id="effort-chip" class="effort-chip" hidden></span>
-        <span id="ctx-badge" class="ctx-badge" hidden title="tokens used in the current context window"></span>
-        <span id="cost-badge" class="ctx-badge" hidden title="cumulative tokens billed across the last turn (sum across every inference; tool-heavy turns rebill the cached prompt per call)"></span>
+        <span id="alive-badge" class="hive-pill status-badge status-loading" title="harness reachability">…</span>
+        <span id="state-badge" class="hive-pill state-badge state-loading">… booting</span>
+        <span id="model-chip" class="hive-pill-sm model-chip" hidden></span>
+        <span id="effort-chip" class="hive-pill-sm effort-chip" hidden></span>
+        <span id="ctx-badge" class="hive-pill-sm ctx-badge" hidden title="tokens used in the current context window"></span>
+        <span id="cost-badge" class="hive-pill-sm ctx-badge" hidden title="cumulative tokens billed across the last turn (sum across every inference; tool-heavy turns rebill the cached prompt per call)"></span>
         <span id="last-turn" class="last-turn" hidden></span>
         <button type="button" id="cancel-btn" class="btn-cancel-turn" hidden>■ cancel turn</button>
       </div>
@@ -52,13 +52,13 @@
          it — see docs/web-ui.md::Per-agent page (Overflow button)
          for the rare-destructive-extra-click rationale. -->
     <div class="agent-header-pills">
-      <button type="button" id="inbox-pill" class="header-pill header-pill-inbox" hidden
+      <button type="button" id="inbox-pill" class="hive-pill header-pill header-pill-inbox" hidden
               title="open inbox flyout">
         <span class="header-pill-icon" aria-hidden="true">📬</span>
         <span class="header-pill-label">inbox</span>
         <span class="header-pill-count" id="inbox-count">0</span>
       </button>
-      <button type="button" id="todos-pill" class="header-pill header-pill-todos" hidden
+      <button type="button" id="todos-pill" class="hive-pill header-pill header-pill-todos" hidden
               title="open todos flyout">
         <span class="header-pill-icon" aria-hidden="true">📋</span>
         <span class="header-pill-label">todos</span>
diff --git a/frontend/packages/dashboard/src/builds.js b/frontend/packages/dashboard/src/builds.js
index 138dd8e7..815d9b73 100644
--- a/frontend/packages/dashboard/src/builds.js
+++ b/frontend/packages/dashboard/src/builds.js
@@ -344,7 +344,7 @@ async function fetchBuild() {
       const li = el('li', { class: 'build-logs-item', 'data-log-id': String(h.id) });
       const live = !h.status;
       const ok = h.status === 'ok';
-      const statusClass = live ? 'badge badge-running' : ok ? 'badge badge-ok' : 'badge badge-fail';
+      const statusClass = live ? 'hive-pill-sm badge-running' : ok ? 'hive-pill-sm badge-ok' : 'hive-pill-sm badge-fail';
       const statusLabel = live ? 'live' : ok ? 'ok' : 'fail';
       const age = h.finished_at ? fmtTs(h.finished_at) : (live ? '' : fmtTs(h.started_at));
       const runtime = h.runtime_secs != null
@@ -398,7 +398,7 @@ async function fetchBuild() {
         );
         if (live) {
           const pre = el('pre', { class: 'build-logs-output build-logs-live' }, '');
-          const badge = el('span', { class: 'build-logs-live-badge badge badge-running' }, 'live');
+          const badge = el('span', { class: 'build-logs-live-badge hive-pill-sm badge-running' }, 'live');
           detail.append(badge, pre);
 
           streamEs = openBuildLogStream(h.id, pre, {
@@ -408,7 +408,7 @@ async function fetchBuild() {
                 const elapsed = Math.floor(Date.now() / 1000) - h.started_at;
                 runtime.textContent = fmtDuration(Math.max(0, elapsed));
               }
-              badge.className = status === 'ok' ? 'badge badge-ok' : 'badge badge-fail';
+              badge.className = status === 'ok' ? 'hive-pill-sm badge-ok' : 'hive-pill-sm badge-fail';
               badge.textContent = status;
               streamEs = null;
               detail.dataset.loaded = '1';
@@ -416,7 +416,7 @@ async function fetchBuild() {
             onError: () => {
               if (durTimer) { clearInterval(durTimer); durTimer = null; }
               badge.textContent = 'stream error';
-              badge.className = 'badge badge-fail';
+              badge.className = 'hive-pill-sm badge-fail';
               streamEs = null;
             },
           });
diff --git a/frontend/packages/dashboard/src/common.css b/frontend/packages/dashboard/src/common.css
index 4d026641..dffb99d1 100644
--- a/frontend/packages/dashboard/src/common.css
+++ b/frontend/packages/dashboard/src/common.css
@@ -57,13 +57,11 @@ code {
 .empty { color: var(--muted); font-style: italic; }
 
 /* ─── status badges ─────────────────────────────────────────────────
-   .badge base + semantic colour variants. Used on container rows
-   (tabs.js) and build-log rows (logs.js). Shape (border/radius/padding/
-   font-size/letter-spacing) is shared with the agent UI's pill/chip
-   family — see @hive/shared/pill.css. */
-.badge {
-  display: inline-block;
-}
+   Semantic colour variants only — shape comes from `hive-pill-sm`
+   (shared with the agent UI's pill/chip family, @hive/shared/pill.css),
+   carried directly in the markup alongside each of these classnames
+   (swarm.js/core.js/builds.js). Used on container rows and build-log
+   rows. */
 .badge-warn {
   color: var(--amber); border-color: var(--amber);
   text-shadow: 0 0 6px color-mix(in srgb, var(--amber) 50%, transparent);
diff --git a/frontend/packages/dashboard/src/core.js b/frontend/packages/dashboard/src/core.js
index 457f2236..2fd5489a 100644
--- a/frontend/packages/dashboard/src/core.js
+++ b/frontend/packages/dashboard/src/core.js
@@ -66,9 +66,9 @@ function renderTombstones(s) {
       el('span', { class: 'name' }, t.name),
       // Was `destroyed`, which the backend cannot actually know — see the
       // caveat above. `offline` is what the absence of a container proves.
-      el('span', { class: 'badge badge-muted' }, 'offline'),
+      el('span', { class: 'hive-pill-sm badge-muted' }, 'offline'),
     );
-    if (t.has_creds) head.append(el('span', { class: 'badge badge-muted' }, 'creds kept'));
+    if (t.has_creds) head.append(el('span', { class: 'hive-pill-sm badge-muted' }, 'creds kept'));
     head.append(el('span', { class: 'meta' },
       `${fmtBytes(t.state_bytes)} · ${fmtAgeDays(t.last_seen)}`));
     li.append(head);
@@ -117,7 +117,7 @@ function renderStalePerms(root, ghosts) {
   for (const name of ghosts) {
     const li = el('li', { class: 'tombstones-stale-row' });
     li.append(el('span', { class: 'tombstones-stale-name' }, name));
-    li.append(el('span', { class: 'badge badge-muted' }, 'stale perms'));
+    li.append(el('span', { class: 'hive-pill-sm badge-muted' }, 'stale perms'));
     const btn = el('button', {
       type: 'button',
       class: 'btn btn-destroy',
@@ -398,7 +398,7 @@ function renderInfraContainers(rows) {
     const head = el('div', { class: 'head' });
     head.append(
       el('span', { class: 'name' }, c.name),
-      el('span', { class: 'badge ' + (c.running ? 'badge-ok' : 'badge-fail') },
+      el('span', { class: 'hive-pill-sm ' + (c.running ? 'badge-ok' : 'badge-fail') },
         c.running ? 'running' : 'stopped'),
     );
     li.append(head);
diff --git a/frontend/packages/dashboard/src/swarm.js b/frontend/packages/dashboard/src/swarm.js
index 8fad62d8..6fca671e 100644
--- a/frontend/packages/dashboard/src/swarm.js
+++ b/frontend/packages/dashboard/src/swarm.js
@@ -448,7 +448,7 @@ function buildContainerLi(c, node, opts) {
         // already shown (pending / not-running already handled sync).
         if (ds.rate_limited) {
           head.append(el('span',
-            { class: 'badge badge-rate-limited', title: 'API rate-limited — harness is parked, will retry automatically' },
+            { class: 'hive-pill-sm badge-rate-limited', title: 'API rate-limited — harness is parked, will retry automatically' },
             '⊘ rate limited'));
         }
         // ctx-window badge
@@ -464,7 +464,7 @@ function buildContainerLi(c, node, opts) {
             ? `last turn context: ${ds.ctx_tokens.toLocaleString()} / ${win.toLocaleString()} `
               + `tokens (${Math.round((ds.ctx_tokens / win) * 100)}% of the window)`
             : `last turn context size: ${ds.ctx_tokens.toLocaleString()} tokens`;
-          head.append(el('span', { class: `badge ${ctxClass}`, title }, `ctx·${k}k`));
+          head.append(el('span', { class: `hive-pill-sm ${ctxClass}`, title }, `ctx·${k}k`));
         }
         // -- agent status text (self-reported via set_status) ---------
         if (ds.status_text) {
@@ -516,32 +516,32 @@ function buildContainerLi(c, node, opts) {
   } else if (!c.running && c.failed) {
     head.append(el('span',
       {
-        class: 'badge badge-fail',
+        class: 'hive-pill-sm badge-fail',
         title: 'container gave up — its unit hit systemd\'s bounded restart limit and stopped '
           + 'on its own, not on operator request; start it to bring the harness back up',
       },
       '✖ gave up'));
   } else if (!c.running) {
     head.append(el('span',
-      { class: 'badge badge-muted', title: 'container is shut down — start it to bring the harness back up' },
+      { class: 'hive-pill-sm badge-muted', title: 'container is shut down — start it to bring the harness back up' },
       '■ not running'));
   } else if (c.needs_login) {
     head.append(el('a',
-      { class: 'badge badge-warn', href: url, target: '_blank', rel: 'noopener' },
+      { class: 'hive-pill-sm badge-warn', href: url, target: '_blank', rel: 'noopener' },
       'needs login →'));
   }
   if (c.paused) {
     // Paused badge is also a resume button: clicking POSTs /api/resume/{name}
     // which removes the marker and flips the badge off via the SSE rescan.
     head.append(form(
-      '/api/resume/' + c.name, 'badge badge-paused btn-inline', '⏸ paused',
+      '/api/resume/' + c.name, 'hive-pill-sm badge-paused btn-inline', '⏸ paused',
       `resume ${c.name}? the turn loop restarts and drains queued messages.`,
       {}, { noRefresh: true },
     ));
   }
   if (c.needs_update) {
     head.append(form(
-      '/api/rebuild/' + c.name, 'badge badge-warn btn-inline', 'needs update ↻',
+      '/api/rebuild/' + c.name, 'hive-pill-sm badge-warn btn-inline', 'needs update ↻',
       'rebuild ' + c.name + '? hot-reloads the container.',
       {}, { noRefresh: true },
     ));
@@ -549,7 +549,7 @@ function buildContainerLi(c, node, opts) {
 
   if (c.active_model) {
     head.append(el('span',
-      { class: 'badge badge-model', title: `active claude model: ${c.active_model}` },
+      { class: 'hive-pill-sm badge-model', title: `active claude model: ${c.active_model}` },
       c.active_model));
   }
 
@@ -563,7 +563,7 @@ function buildContainerLi(c, node, opts) {
     if (targetCount > 0) parts.push(`${targetCount} to answer`);
     head.append(el('span',
       {
-        class: 'badge badge-loose-ends',
+        class: 'hive-pill-sm badge-loose-ends',
         title: `pending questions: ${parts.join(', ')} — see the Q33R1ES tab`,
       },
       `❓ ${agentQCount}`));
diff --git a/frontend/packages/shared/src/pill.css b/frontend/packages/shared/src/pill.css
index de1254d7..319b4bd8 100644
--- a/frontend/packages/shared/src/pill.css
+++ b/frontend/packages/shared/src/pill.css
@@ -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;