Add Badge + Dropdown Preact components, demo on swarm-ui /components

New shared Preact primitives for the per-agent terminal redesign:

- Badge (@hive/shared/badge.js): a labelled status pill. Plain <span>
  when static (e.g. "alive"), a real <button> with a disclosure caret
  when given onClick (e.g. opens a Dropdown, or toggles itself in
  place). Same component either way so a status row reads as one
  consistent set of badges regardless of which are interactive.
- Dropdown (@hive/shared/dropdown.js): a small option list anchored
  directly under whatever opened it (no portal, no native <dialog> —
  see the file comment for why). Closes on outside click or Escape.

This is the fix for the design guide's own named anti-example: the
agent page's model/effort pickers live in the overflow menu while the
current model/effort only show as a disconnected chip. Badge+Dropdown
composed together is that control moved inline, next to what it shows.

Demoed on swarm-ui's /components page: all Badge tones, a label-prefixed
badge, an interactive badge that opens a Dropdown (model-picker shape),
and an interactive badge that toggles itself (pause/resume shape).

Both packages build + tsc --noEmit clean.

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

@@ -0,0 +1,58 @@
+/* <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);
+}