agent: scaffold Preact rewrite, Header + StatusChips first slice

Adds a new Preact/TSX build alongside the existing app.js (esbuild
entry `main.tsx` → dist/static/main.{js,css}, same jsx/tsconfig shape
swarm-ui already uses) and the first real page slice: Header +
StatusChips, composing the Badge/Dropdown components from the prior
commit's PR. Not wired into index.html yet — app.js keeps rendering
the live page untouched while this fills in component by component
(state polling, the live SSE stream, login flow, inbox/todos, term
input) in follow-up commits on this branch.

StatusChips folds the model/effort pickers and pause into the badge
row itself (each badge IS its own control), replacing the old
overflow-menu-only pickers — the concrete fix the design guide already
names this page as needing. Presentational only for now (props, not
live data) so it's reviewable against sample data before being wired
to /api/state.

Screenshot-verified against the real agent.css/theme.css/colors.css
(headless chromium, sample data) — renders correctly.

Builds + tsc --noEmit clean.

frontend/packages/agent/src/components/Header.tsx

@@ -0,0 +1,32 @@
+// <Header> — the agent page's identity strip: icon, glyphic title, the
+// "swarm / hive" label row, and a slot for the status row
+// (`<StatusChips>` — ../status-chips/, kept separate so this component
+// has no opinion on what badges exist). Structurally the same
+// three-row shape as the old `#agent-header` markup in index.html
+// (icon · main · pills) — see `docs/web-ui.md::Per-agent page` — this
+// is a like-for-like layout port, the redesign work is in the children.
+// Reuses `agent.css`'s existing `.agent-header*`/`.agent-icon` rules
+// (loaded globally by index.html) rather than a component-scoped
+// stylesheet — no new visual language needed for the chrome itself.
+import type { ComponentChildren } from 'preact';
+
+export interface HeaderProps {
+  label: string;
+  hiveLabel?: string | null;
+  children?: ComponentChildren;
+}
+
+export function Header({ label, hiveLabel, children }: HeaderProps) {
+  return (
+    <header class="agent-header">
+      <img class="agent-icon" src="icon" alt="" />
+      <div class="agent-header-main">
+        <div class="agent-header-row agent-header-title-row">
+          <h2 class="agent-header-title">◆ {label} ◆</h2>
+        </div>
+        {hiveLabel ? <div class="agent-header-row agent-hive-row">{hiveLabel}</div> : null}
+        <div class="agent-header-row">{children}</div>
+      </div>
+    </header>
+  );
+}

frontend/packages/agent/src/components/StatusChips.css

@@ -0,0 +1,16 @@
+/* <StatusChips> layout. Colours all come from Badge/Dropdown's own CSS
+   (@hive/shared) — nothing here overrides a base16 slot. */
+.status-chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5em;
+}
+.status-chip-anchor {
+  position: relative;
+  display: inline-block;
+}
+.status-chips-last-turn {
+  font-size: 0.8em;
+  color: var(--muted);
+}

frontend/packages/agent/src/components/StatusChips.tsx

@@ -0,0 +1,146 @@
+// <StatusChips> — the agent page's status row: alive/turn-state, the
+// model + effort pickers, context/cost usage, and pause/resume. This is
+// the concrete fix for the design guide's own named anti-example (the
+// old page's model/effort *pickers* lived in the `⋯` overflow menu while
+// the current model/effort only showed as a disconnected chip) — every
+// badge here IS the control for what it displays, composed from
+// `@hive/shared`'s `Badge`/`Dropdown` (../../shared/src/badge,
+// ../../shared/src/dropdown). Presentational only: formatting +
+// selection state live in the caller (a `useAgentState` hook lands in a
+// later commit), so this component can be demoed and reviewed against
+// plain sample data before it's wired to `/api/state` polling.
+import { useState } from 'preact/hooks';
+import { Badge, type BadgeTone } from '@hive/shared/badge.js';
+import { Dropdown, type DropdownOption } from '@hive/shared/dropdown.js';
+import './StatusChips.css';
+
+export interface StatusChipsProps {
+  aliveLabel: string;
+  aliveTone: BadgeTone;
+  stateLabel: string;
+  stateTone: BadgeTone;
+  stateTooltip?: string;
+  model: string;
+  availableModels: string[];
+  onSelectModel: (name: string) => void;
+  effort: string;
+  availableEfforts: string[];
+  onSelectEffort: (level: string) => void;
+  ctxLabel?: string;
+  costLabel?: string;
+  paused: boolean;
+  onTogglePause: () => void;
+  lastTurnLabel?: string;
+}
+
+const MODEL_DESCRIPTIONS: Record<string, string> = {
+  haiku: 'fast',
+  sonnet: 'balanced',
+  opus: 'powerful',
+};
+const EFFORT_DESCRIPTIONS: Record<string, string> = {
+  low: '',
+  medium: 'default',
+  high: '',
+  xhigh: '',
+  max: '',
+};
+
+function Picker({
+  label,
+  value,
+  options,
+  descriptions,
+  onSelect,
+}: {
+  label: string;
+  value: string;
+  options: string[];
+  descriptions: Record<string, string>;
+  onSelect: (v: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const dropdownOptions: DropdownOption[] = options.map((name) => ({
+    value: name,
+    label: name,
+    description: descriptions[name] || undefined,
+  }));
+  return (
+    <div class="status-chip-anchor">
+      <Badge label={label} value={value} onClick={() => setOpen((o) => !o)} expanded={open} />
+      <Dropdown
+        open={open}
+        options={dropdownOptions}
+        activeValue={value}
+        label={`select ${label}`}
+        onSelect={(v) => {
+          onSelect(v);
+          setOpen(false);
+        }}
+        onClose={() => setOpen(false)}
+      />
+    </div>
+  );
+}
+
+export function StatusChips({
+  aliveLabel,
+  aliveTone,
+  stateLabel,
+  stateTone,
+  stateTooltip,
+  model,
+  availableModels,
+  onSelectModel,
+  effort,
+  availableEfforts,
+  onSelectEffort,
+  ctxLabel,
+  costLabel,
+  paused,
+  onTogglePause,
+  lastTurnLabel,
+}: StatusChipsProps) {
+  return (
+    <div class="status-chips">
+      <Badge value={aliveLabel} tone={aliveTone} />
+      <Badge value={stateLabel} tone={stateTone} title={stateTooltip} />
+      <Picker
+        label="model"
+        value={model}
+        options={availableModels}
+        descriptions={MODEL_DESCRIPTIONS}
+        onSelect={onSelectModel}
+      />
+      {availableEfforts.length ? (
+        <Picker
+          label="effort"
+          value={effort}
+          options={availableEfforts}
+          descriptions={EFFORT_DESCRIPTIONS}
+          onSelect={onSelectEffort}
+        />
+      ) : null}
+      {ctxLabel ? (
+        <Badge
+          label="ctx"
+          value={ctxLabel}
+          title="tokens used in the current context window"
+        />
+      ) : null}
+      {costLabel ? (
+        <Badge
+          label="cost"
+          value={costLabel}
+          title="cumulative tokens billed across the last turn (sum across every inference; tool-heavy turns rebill the cached prompt per call)"
+        />
+      ) : null}
+      <Badge
+        value={paused ? '▶ resume' : '⏸ pause'}
+        tone={paused ? 'warning' : 'neutral'}
+        onClick={onTogglePause}
+      />
+      {lastTurnLabel ? <span class="status-chips-last-turn">{lastTurnLabel}</span> : null}
+    </div>
+  );
+}