docs/web-ui/design-guide.md

@@ -147,7 +147,7 @@ that needs it, not after it's been styled inline and left for later —
 a page reaching for a component that's already there has ready-made
 blocks to build with, instead of the next contributor duplicating
 ad-hoc styling that someone then has to hunt down and consolidate.
-`Panel`/`Badge`/`Table`/`TextField`/`SelectField`/`Button` are the
+`Panel`/`StatusChip`/`Table`/`TextField`/`SelectField`/`Button` are the
 primitives that exist; `/components` always has the current, complete
 list — this doc won't try to keep a duplicate inventory in sync.
 

frontend/packages/shared/package.json

@@ -36,11 +36,7 @@
     "./api-error-panel.js": "./src/api-error-panel/ApiErrorPanel.tsx",
     "./api-error-panel.css": "./src/api-error-panel/api-error-panel.css",
     "./warn-banner.js": "./src/warn-banner/WarnBanner.tsx",
-    "./warn-banner.css": "./src/warn-banner/WarnBanner.css",
+    "./warn-banner.css": "./src/warn-banner/WarnBanner.css"
-    "./badge.js": "./src/badge/Badge.tsx",
-    "./badge.css": "./src/badge/Badge.css",
-    "./dropdown.js": "./src/dropdown/Dropdown.tsx",
-    "./dropdown.css": "./src/dropdown/Dropdown.css"
   },
   "files": [
     "src/"

frontend/packages/shared/src/badge/Badge.css

@@ -1,58 +0,0 @@
-/* <Badge> — pill-shaped status/control chip. Same touch-target floor as
-   the rest of the shared control set (2.75em ≈ 44px, WCAG 2.5.5) when
-   interactive; a plain display badge (no `onClick`) stays compact since
-   it's not a tap target at all. Colours are the shared base16-derived
-   vars (../theme.css) — `--bg-elev` is the same slot dropdowns/popovers
-   use, so an open Badge and the Dropdown it triggers read as one surface. */
-.ui-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35em;
-  padding: 0.15em 0.6em;
-  border-radius: 1em;
-  font: inherit;
-  font-size: 0.85em;
-  line-height: 1.4;
-  background: var(--purple-dim);
-  color: var(--fg);
-  border: none;
-  white-space: nowrap;
-}
-.ui-badge-interactive {
-  cursor: pointer;
-  min-height: 2.75em;
-  padding-inline: 0.8em;
-}
-.ui-badge-interactive:hover {
-  background: var(--border);
-}
-.ui-badge-interactive:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-.ui-badge-interactive[aria-expanded='true'] {
-  background: var(--bg-elev);
-  outline: 1px solid var(--purple);
-}
-.ui-badge-label {
-  color: var(--muted);
-}
-.ui-badge-value {
-  color: var(--fg);
-}
-.ui-badge-caret {
-  font-size: 0.75em;
-  color: var(--muted);
-}
-.ui-badge-positive .ui-badge-value {
-  color: var(--green);
-}
-.ui-badge-warning .ui-badge-value {
-  color: var(--amber);
-}
-.ui-badge-negative .ui-badge-value {
-  color: var(--red);
-}
-.ui-badge-accent .ui-badge-value {
-  color: var(--purple);
-}

frontend/packages/shared/src/badge/Badge.tsx

@@ -1,97 +0,0 @@
-// <Badge> — a labelled status pill, the "next to the thing it affects"
-// building block for the per-agent terminal redesign.
-// Design-guide anti-example this exists to fix: the agent page's model/
-// effort *pickers* used to live in a `⋯` overflow menu while the current
-// model/effort only showed as a separate, non-interactive chip — control
-// disconnected from display. `Badge` is that chip PLUS, optionally, the
-// control: pass `onClick` and it renders as a real `<button>` (so it can
-// open a `Dropdown` right underneath itself, or toggle in place — e.g.
-// pause/resume), pass nothing and it stays a plain status `<span>` (e.g.
-// "alive"). Same component either way so a page reads as one consistent
-// row of badges regardless of which ones happen to be interactive.
-//
-// 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';
-
-export type BadgeTone = 'neutral' | 'positive' | 'warning' | 'negative' | 'accent';
-
-export interface BadgeProps {
-  /** Dim prefix text, e.g. "model". Omit for a single-value badge like "alive". */
-  label?: ComponentChildren;
-  /** The value itself, e.g. "sonnet". Required — a badge always shows something. */
-  value: ComponentChildren;
-  tone?: BadgeTone;
-  /** Decorative glyph before the label; `aria-hidden`, the text is still the real label. */
-  icon?: ComponentChildren;
-  /**
-   * Present → renders a `<button>` (real control, min touch target) and
-   * shows a disclosure caret. Absent → renders a plain `<span>` (status
-   * display only, e.g. "alive"/"idle 6m").
-   */
-  onClick?: (e: MouseEvent) => void;
-  /** Only meaningful with `onClick` — drives the caret direction + `aria-expanded`. */
-  expanded?: boolean;
-  disabled?: boolean;
-  class?: string;
-  title?: string;
-}
-
-export function Badge({
-  label,
-  value,
-  tone = 'neutral',
-  icon,
-  onClick,
-  expanded,
-  disabled,
-  class: extraClass,
-  title,
-}: BadgeProps) {
-  const classes = ['ui-badge', `ui-badge-${tone}`, onClick && 'ui-badge-interactive', extraClass]
-    .filter(Boolean)
-    .join(' ');
-  const content = (
-    <>
-      {icon ? (
-        <span class="ui-badge-icon" aria-hidden="true">
-          {icon}
-        </span>
-      ) : null}
-      {label ? <span class="ui-badge-label">{label}</span> : null}
-      <span class="ui-badge-value">{value}</span>
-      {onClick ? (
-        <span class="ui-badge-caret" aria-hidden="true">
-          {expanded ? '▴' : '▾'}
-        </span>
-      ) : null}
-    </>
-  );
-  if (onClick) {
-    return (
-      <button
-        type="button"
-        class={classes}
-        onClick={onClick}
-        disabled={disabled}
-        aria-expanded={expanded}
-        title={title}
-      >
-        {content}
-      </button>
-    );
-  }
-  return (
-    <span class={classes} title={title}>
-      {content}
-    </span>
-  );
-}

frontend/packages/shared/src/colors.css

@@ -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
-     `Badge`/chip fill-text (green/amber/red/yellow on
+     `StatusChip` 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

frontend/packages/shared/src/dropdown/Dropdown.css

@@ -1,48 +0,0 @@
-/* <Dropdown> — anchored option list. `position: absolute` against the
-   caller's `position: relative` wrapper (see Dropdown.tsx's file-top
-   comment) so it hangs directly under the badge that opened it.
-   `--bg-elev` is the same elevated-surface slot the badge uses when
-   open (../badge/Badge.css), so the pair reads as one continuous panel. */
-.ui-dropdown {
-  position: absolute;
-  top: calc(100% + 0.25em);
-  left: 0;
-  z-index: 20;
-  display: flex;
-  flex-direction: column;
-  min-width: 12em;
-  padding: 0.25em;
-  background: var(--bg-elev);
-  border: 1px solid var(--border);
-  border-radius: 0.5em;
-  box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.35);
-}
-.ui-dropdown-item {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.1em;
-  min-height: 2.75em;
-  padding: 0.4em 0.7em;
-  border: none;
-  border-radius: 0.35em;
-  background: transparent;
-  color: var(--fg);
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-.ui-dropdown-item:hover {
-  background: var(--border);
-}
-.ui-dropdown-item-active {
-  background: var(--purple-dim);
-}
-.ui-dropdown-item-active .ui-dropdown-item-label::before {
-  content: '✓ ';
-  color: var(--purple);
-}
-.ui-dropdown-item-desc {
-  font-size: 0.8em;
-  color: var(--muted);
-}

frontend/packages/shared/src/dropdown/Dropdown.tsx

@@ -1,79 +0,0 @@
-// <Dropdown> — a small anchored option list, meant to sit directly under
-// the `Badge` that opened it (../badge/Badge.tsx) so the control is
-// visually attached to the thing it affects, instead of living three
-// clicks away in a catch-all menu (the junk-drawer pattern
-// `docs/web-ui/design-guide.md` calls out by name against the old
-// per-agent terminal's model picker). Not a native `<dialog>` — a
-// `showModal()` dialog's backdrop would visually detach it from its
-// anchor badge, and a non-modal `show()` gets no click-outside-to-close
-// for free, so this hand-rolls the same "outside click or Escape
-// closes" contract `Dialog` gets from the platform.
-//
-// Positioning is the caller's job: render `<Dropdown>` as a child of a
-// `position: relative` wrapper (the badge + dropdown pair) and it anchors
-// to that box's bottom-left via CSS. No portal — a badge in a normal
-// document-flow header never needs one, and skipping it keeps focus
-// management simple (no re-parenting to `<body>` to reason about).
-import { useEffect, useRef } from 'preact/hooks';
-import type { ComponentChildren } from 'preact';
-import './Dropdown.css';
-
-export interface DropdownOption {
-  value: string;
-  label: ComponentChildren;
-  /** Optional dim secondary text, e.g. "sonnet (balanced)". */
-  description?: ComponentChildren;
-}
-
-export interface DropdownProps {
-  open: boolean;
-  options: DropdownOption[];
-  activeValue?: string;
-  onSelect: (value: string) => void;
-  onClose: () => void;
-  /** `aria-label` for the option list (e.g. "select model"). */
-  label: string;
-}
-
-export function Dropdown({ open, options, activeValue, onSelect, onClose, label }: DropdownProps) {
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!open) return;
-    function handlePointerDown(e: PointerEvent) {
-      if (ref.current && e.target instanceof Node && !ref.current.contains(e.target)) onClose();
-    }
-    function handleKeyDown(e: KeyboardEvent) {
-      if (e.key === 'Escape') onClose();
-    }
-    // `pointerdown` (not `click`) so a drag-to-select that ends outside
-    // still closes; capture phase so this sees the event before a
-    // stopPropagation() elsewhere in the tree could swallow it.
-    document.addEventListener('pointerdown', handlePointerDown, true);
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('pointerdown', handlePointerDown, true);
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [open, onClose]);
-
-  if (!open) return null;
-
-  return (
-    <div class="ui-dropdown" role="menu" aria-label={label} ref={ref}>
-      {options.map((opt) => (
-        <button
-          type="button"
-          key={opt.value}
-          role="menuitemradio"
-          aria-checked={opt.value === activeValue}
-          class={'ui-dropdown-item' + (opt.value === activeValue ? ' ui-dropdown-item-active' : '')}
-          onClick={() => onSelect(opt.value)}
-        >
-          <span class="ui-dropdown-item-label">{opt.label}</span>
-          {opt.description ? <span class="ui-dropdown-item-desc">{opt.description}</span> : null}
-        </button>
-      ))}
-    </div>
-  );
-}

frontend/packages/swarm-ui/src/pages/AgentsPage.tsx

@@ -21,7 +21,6 @@
 import { useState } from 'preact/hooks';
 import { ApiErrorPanel } from '@hive/shared/api-error-panel.js';
 import { readApiError, type ProblemDetails } from '@hive/shared/api-error.js';
-import { Badge } from '@hive/shared/badge.js';
 import { Button } from '../ui/button/Button.js';
 import { Dialog } from '../ui/dialog/Dialog.js';
 import { Panel } from '../ui/panel/Panel.js';
@@ -30,6 +29,7 @@ import {
   useRefreshInterval,
   type RefreshIntervalMs,
 } from '../ui/refresh-interval/RefreshInterval.js';
+import { StatusChip } from '../ui/status-chip/StatusChip.js';
 import { Table, type TableColumn } from '../ui/table/Table.js';
 import { CreateAgentForm } from './CreateAgentForm.js';
 
@@ -50,9 +50,9 @@ const COLUMNS: TableColumn<AgentRow>[] = [
     header: 'config PR',
     render: (a) =>
       a.configPr ? (
-        <Badge
+        <StatusChip
           tone="warning"
-          value={
+          label={
             a.configPr.html_url ? (
               <a href={a.configPr.html_url} target="_blank" rel="noreferrer">
                 #{a.configPr.pr_number}

frontend/packages/swarm-ui/src/pages/ComponentsPage.css

@@ -42,10 +42,3 @@
   font-size: 0.8em;
   color: var(--muted);
 }
-/* Anchor for a Badge + the Dropdown it opens (@hive/shared) — Dropdown
-   positions `absolute` against this box, see Dropdown.css's file-top
-   comment. */
-.components-badge-anchor {
-  position: relative;
-  display: inline-block;
-}

frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx

@@ -10,12 +10,11 @@ import type { ComponentChildren } from 'preact';
 import { Panel } from '../ui/panel/Panel.js';
 import { RelativeTime } from '../ui/relative-time/RelativeTime.js';
 import { RefreshIntervalPicker, type RefreshIntervalMs } from '../ui/refresh-interval/RefreshInterval.js';
+import { StatusChip, type ChipTone } from '../ui/status-chip/StatusChip.js';
 import { Table, type TableColumn } from '../ui/table/Table.js';
 import { TextField } from '../ui/text-field/TextField.js';
 import { SelectField, type SelectOption } from '../ui/select-field/SelectField.js';
 import { Button, type ButtonVariant } from '../ui/button/Button.js';
-import { Badge, type BadgeTone } from '@hive/shared/badge.js';
-import { Dropdown, type DropdownOption } from '@hive/shared/dropdown.js';
 import './ComponentsPage.css';
 
 function Section({ title, children }: { title: string; children: ComponentChildren }) {
@@ -36,6 +35,8 @@ function Sample({ label, children }: { label: string; children: ComponentChildre
   );
 }
 
+const CHIP_TONES: ChipTone[] = ['neutral', 'positive', 'warning', 'negative'];
+
 interface Row {
   name: string;
   detail: string;
@@ -44,7 +45,7 @@ interface Row {
 const TABLE_COLUMNS: TableColumn<Row>[] = [
   { key: 'name', header: 'name', render: (r) => r.name },
   { key: 'detail', header: 'detail', render: (r) => r.detail },
-  { key: 'status', header: 'status', render: () => <Badge tone="positive" value="ok" /> },
+  { key: 'status', header: 'status', render: () => <StatusChip tone="positive" label="ok" /> },
 ];
 
 const TABLE_ROWS: Row[] = [
@@ -58,13 +59,6 @@ const SELECT_OPTIONS: SelectOption[] = [
 ];
 
 const BUTTON_VARIANTS: ButtonVariant[] = ['primary', 'default'];
-const BADGE_TONES: BadgeTone[] = ['neutral', 'positive', 'warning', 'negative', 'accent'];
-
-const MODEL_OPTIONS: DropdownOption[] = [
-  { value: 'haiku', label: 'haiku', description: 'fast' },
-  { value: 'sonnet', label: 'sonnet', description: 'balanced' },
-  { value: 'opus', label: 'opus', description: 'powerful' },
-];
 
 // Controlled samples need their own state to actually type/select into —
 // module-level consts can't do that, hence these two small wrappers
@@ -92,51 +86,6 @@ function RefreshIntervalPickerSample() {
   return <RefreshIntervalPicker id="sample-refresh-interval" value={value} onChange={setValue} />;
 }
 
-// The badge-triggers-a-dropdown-right-underneath-itself pattern this is
-// meant to land — the model/effort picker shape from the per-agent
-// terminal, demoed here with sample data. The wrapper
-// needs `position: relative` (`.components-badge-anchor`) so `Dropdown`
-// anchors under this badge specifically, not the page.
-function BadgePickerSample() {
-  const [value, setValue] = useState('sonnet');
-  const [open, setOpen] = useState(false);
-  return (
-    <div class="components-badge-anchor">
-      <Badge
-        label="model"
-        value={value}
-        onClick={() => setOpen((o) => !o)}
-        expanded={open}
-      />
-      <Dropdown
-        open={open}
-        options={MODEL_OPTIONS}
-        activeValue={value}
-        label="select model"
-        onSelect={(v) => {
-          setValue(v);
-          setOpen(false);
-        }}
-        onClose={() => setOpen(false)}
-      />
-    </div>
-  );
-}
-
-// The other interactive shape: a badge that's itself the control (no
-// dropdown) — e.g. the agent page's pause/resume action folded into the
-// status row instead of living in the `⋯` overflow menu.
-function BadgeToggleSample() {
-  const [paused, setPaused] = useState(false);
-  return (
-    <Badge
-      value={paused ? '▶ resume' : '⏸ pause'}
-      tone={paused ? 'warning' : 'neutral'}
-      onClick={() => setPaused((p) => !p)}
-    />
-  );
-}
-
 export function ComponentsPage() {
   return (
     <Panel title="components" icon="🧰">
@@ -167,6 +116,16 @@ export function ComponentsPage() {
         </Sample>
       </Section>
 
+      <Section title="StatusChip">
+        <div class="components-chip-row">
+          {CHIP_TONES.map((tone) => (
+            <Sample key={tone} label={tone}>
+              <StatusChip tone={tone} label={tone} />
+            </Sample>
+          ))}
+        </div>
+      </Section>
+
       <Section title="Table">
         <Sample label="populated">
           <Table columns={TABLE_COLUMNS} rows={TABLE_ROWS} rowKey={(r) => r.name} />
@@ -217,25 +176,6 @@ export function ComponentsPage() {
           </Sample>
         </div>
       </Section>
-
-      <Section title="Badge (@hive/shared — used by swarm-ui and the per-agent page)">
-        <div class="components-chip-row">
-          {BADGE_TONES.map((tone) => (
-            <Sample key={tone} label={`display, ${tone}`}>
-              <Badge value={tone} tone={tone} />
-            </Sample>
-          ))}
-          <Sample label="with a label prefix">
-            <Badge label="ctx" value="534k" />
-          </Sample>
-          <Sample label="interactive, opens a Dropdown (model/effort picker shape)">
-            <BadgePickerSample />
-          </Sample>
-          <Sample label="interactive, toggles itself (pause/resume shape)">
-            <BadgeToggleSample />
-          </Sample>
-        </div>
-      </Section>
     </Panel>
   );
 }

frontend/packages/swarm-ui/src/pages/HivesPage.tsx

@@ -15,7 +15,6 @@
 import { useState } from 'preact/hooks';
 import { ApiErrorPanel } from '@hive/shared/api-error-panel.js';
 import { readApiError, type ProblemDetails } from '@hive/shared/api-error.js';
-import { Badge, type BadgeTone } from '@hive/shared/badge.js';
 import { Panel } from '../ui/panel/Panel.js';
 import { RelativeTime } from '../ui/relative-time/RelativeTime.js';
 import {
@@ -23,6 +22,7 @@ import {
   useRefreshInterval,
   type RefreshIntervalMs,
 } from '../ui/refresh-interval/RefreshInterval.js';
+import { StatusChip, type ChipTone } from '../ui/status-chip/StatusChip.js';
 import { Table, type TableColumn } from '../ui/table/Table.js';
 
 type Freshness = 'fresh' | 'stale' | 'never_reported' | 'unknown';
@@ -41,7 +41,7 @@ interface HiveStatus {
 // One tone + label per freshness value. `unknown` (reporting but absent
 // from the roster) reads `negative` — it's the one case this endpoint
 // cannot vouch for at all, per `status.rs`'s doc comment.
-const FRESHNESS: Record<Freshness, { tone: BadgeTone; label: string }> = {
+const FRESHNESS: Record<Freshness, { tone: ChipTone; label: string }> = {
   fresh: { tone: 'positive', label: 'fresh' },
   stale: { tone: 'warning', label: 'stale' },
   never_reported: { tone: 'neutral', label: 'never reported' },
@@ -68,9 +68,9 @@ const COLUMNS: TableColumn<HiveStatus>[] = [
     render: (h) => {
       const { tone, label } = FRESHNESS[h.freshness];
       return (
-        <Badge
+        <StatusChip
           tone={tone}
-          value={
+          label={
             h.last_seen_unix !== null ? (
               <>
                 {label} (<RelativeTime epochMs={h.last_seen_unix * 1000} />)

frontend/packages/swarm-ui/src/ui/status-chip/StatusChip.css

@@ -0,0 +1,21 @@
+.ui-chip {
+  display: inline-block;
+  padding: 0.15em 0.6em;
+  border-radius: 1em;
+  font-size: 0.85em;
+  line-height: 1.4;
+  background: var(--purple-dim);
+  color: var(--fg);
+}
+.ui-chip-neutral {
+  color: var(--muted);
+}
+.ui-chip-positive {
+  color: var(--green);
+}
+.ui-chip-warning {
+  color: var(--amber);
+}
+.ui-chip-negative {
+  color: var(--red);
+}

frontend/packages/swarm-ui/src/ui/status-chip/StatusChip.tsx

@@ -0,0 +1,25 @@
+// <StatusChip> — a small labelled state indicator. Generic over
+// `tone` rather than a fixed status vocabulary (`online`/`offline`/…)
+// because the first real caller (the hive roster) starts with a
+// single static "configured" tone and grows real online/stale/offline
+// states once a status rollup lands server-side — same component,
+// richer data later, no rebuild.
+import type { ComponentChildren } from 'preact';
+import './StatusChip.css';
+
+export type ChipTone = 'neutral' | 'positive' | 'warning' | 'negative';
+
+// `label` takes renderable children, not just a string — a freshness
+// chip embeds a live `<RelativeTime>` alongside its static text (e.g.
+// "fresh (5s ago)" where the age keeps ticking), and a plain string
+// couldn't carry that without the chip reaching back into a caller's
+// formatting choices.
+export function StatusChip({
+  tone = 'neutral',
+  label,
+}: {
+  tone?: ChipTone;
+  label: ComponentChildren;
+}) {
+  return <span class={'ui-chip ui-chip-' + tone}>{label}</span>;
+}