swarm-ui: page shell + layout primitives

Structural foundation split out of hyperhive#3118 per mara's steer:
structure first so the real overview page (hive roster) and later
routes (swarm-wide agent roster) land as content changes rather than
each reinventing chrome + nav + a table/panel/chip shape.

- <Shell>: header bar (branding) + nav row, wraps every route. Route
  list lives in Shell itself (one small SPA, one place to know its
  own nav).
- ui/Panel, ui/StatusChip, ui/Table: the three primitives the
  overview page's actual scope (hive roster: name/domain/status,
  linking out to each hive's own dashboard) calls for, nothing
  speculative beyond that.

Preact-native styling (plain CSS files imported via swarm-ui.css, no
shadow DOM — this package renders into light DOM) — not
@hive/shared's chrome.css, which is the old MPA dashboard's visual
language. Same base16/Catppuccin color tokens via theme.css/colors.css
so it still reads as hyperhive.

npm run build (whole frontend workspace) + npm run typecheck both
clean. Verified with a real headless-chromium screenshot against the
built dist, not just source-reading.

Fixes hyperhive#3211

frontend/packages/swarm-ui/src/shell/Shell.css

@@ -0,0 +1,40 @@
+/* <Shell> — header bar + nav row + the content column every route
+   renders into. Colour vars come from ../theme.css (same base16 slots
+   the per-hive dashboard uses, so this reads as recognizably
+   hyperhive) — the layout itself is this package's own, not
+   @hive/shared's chrome.css. */
+.shell-header {
+  display: flex;
+  align-items: center;
+  gap: 1.5em;
+  padding: 0.75em 1.25em;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-elev);
+}
+.shell-brand {
+  font-weight: 600;
+  color: var(--purple);
+  letter-spacing: 0.02em;
+}
+.shell-nav {
+  display: flex;
+  gap: 1em;
+}
+.shell-nav-link {
+  color: var(--muted);
+  text-decoration: none;
+  padding: 0.25em 0;
+  border-bottom: 2px solid transparent;
+}
+.shell-nav-link:hover {
+  color: var(--fg);
+}
+.shell-nav-link-active {
+  color: var(--fg);
+  border-bottom-color: var(--purple);
+}
+.shell-body {
+  max-width: 60em;
+  margin: 0 auto;
+  padding: 1.5em 1.25em;
+}

frontend/packages/swarm-ui/src/shell/Shell.tsx

@@ -0,0 +1,41 @@
+// <Shell> — page chrome every swarm-ui route mounts inside: a header
+// bar (swarm branding) plus a nav row linking the app's real routes.
+// Preact-native styling (shell/Shell.css, imported globally via
+// ../swarm-ui.css) — deliberately not @hive/shared's chrome.css
+// page-header pattern, which is the per-hive MPA dashboard's visual
+// language. This package is a clean field, not an inheritor of that
+// look.
+//
+// Route list lives here, not prop-drilled from App — one small SPA
+// has exactly one place that needs to know its own nav, and this is
+// it. Grows additively as real routes land (a swarm-wide agent roster
+// is next); no speculative entries.
+import type { ComponentChildren } from 'preact';
+import { Link, useRoute } from 'wouter-preact';
+
+const NAV_ITEMS: { href: string; label: string }[] = [{ href: '/', label: 'overview' }];
+
+function NavLink({ href, label }: { href: string; label: string }) {
+  const [active] = useRoute(href);
+  return (
+    <Link href={href} className={'shell-nav-link' + (active ? ' shell-nav-link-active' : '')}>
+      {label}
+    </Link>
+  );
+}
+
+export function Shell({ children }: { children: ComponentChildren }) {
+  return (
+    <div class="shell">
+      <header class="shell-header">
+        <span class="shell-brand">hyperhive swarm</span>
+        <nav class="shell-nav">
+          {NAV_ITEMS.map((item) => (
+            <NavLink key={item.href} href={item.href} label={item.label} />
+          ))}
+        </nav>
+      </header>
+      <div class="shell-body">{children}</div>
+    </div>
+  );
+}