swarm-ui: bootstrap new swarm-level frontend (Preact + wouter + TS + JSX)

Project-bootstrap scope per the issue: static build as a nix pkg,
empty start page for now, functionality deferred until auth against
authelia is figured out. Stack (Preact + wouter + TypeScript + JSX)
matches the shell decision from the earlier framework-paths thread —
a real SPA shell with a router and deep links, distinct from the
per-hive dashboard's vanilla-JS + custom-element MPA.

- New npm workspace frontend/packages/swarm-ui: one route (/), a
  wouter Switch/Route shell, a 404 fallback. Reuses @hive/shared's
  colors.css/theme.css/base.css for visual consistency; no other
  shared JS (the vanilla-JS el()/dom.js helpers are superseded by
  Preact in this shell).
- nix/packages/swarm-ui.nix: its own buildNpmPackage derivation
  (scoped to just this workspace via an explicit buildPhase), not
  folded into nix/packages/frontend.nix's packages.default closure —
  same reasoning swarm-controller/swarmctl already use for staying out
  of daemonBins: a hive that doesn't run the swarm controller
  shouldn't carry swarm-ui bytes.
- npmDepsHash recomputed in both frontend.nix and swarm-ui.nix (same
  shared lockfile, new deps: preact, wouter-preact, typescript).
- Added swarm-ui to nix/checks.nix alongside frontend, for the same
  FOD-staleness reason plus being the only thing that actually builds
  it in CI (not in packages.default's closure like frontend is, so
  nix flake check wouldn't otherwise touch it).
- npm run typecheck (tsc --noEmit) is available locally; not yet wired
  into CI — esbuild transpiles TS without type-checking, so that's a
  real gap, left as a follow-up rather than growing this bootstrap PR
  with a new CI workflow step.

Verified: nix build .#swarm-ui and .#frontend both succeed; npm run
build (root, all workspaces) succeeds; tsc --noEmit clean;
scripts/check-issue-refs.sh clean.

frontend/packages/swarm-ui/build.mjs

@@ -0,0 +1,59 @@
+// esbuild build for @hive/swarm-ui (project-bootstrap scope). Output
+// layout (`dist/`):
+//
+//   dist/index.html              served at GET /
+//   dist/static/main.js          served at /static/main.js (ESM bundle,
+//                                 Preact + wouter-preact)
+//   dist/static/main.js.map      source map sibling
+//   dist/static/colors.css       served at /static/colors.css
+//   dist/static/theme.css        served at /static/theme.css
+//   dist/static/swarm-ui.css     served at /static/swarm-ui.css (@import
+//                                 resolved from @hive/shared)
+//
+// Not yet wired into any Rust binary's `ServeDir` — swarm-controller
+// only serves `/health` today (see swarm-controller/README.md); this
+// just makes `dist/` buildable so nix/packages/swarm-ui.nix has
+// something to package. `.tsx` → JS: esbuild transpiles TypeScript
+// natively (types stripped, not checked) — run `npm run typecheck`
+// (plain `tsc --noEmit`) separately for real type errors; not yet
+// wired into CI.
+
+import { build } from 'esbuild';
+import { mkdirSync, copyFileSync, rmSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const src = (p) => resolve(here, 'src', p);
+const dist = (p) => resolve(here, 'dist', p);
+const staticDir = (p) => resolve(here, 'dist', 'static', p);
+
+rmSync(dist(''), { recursive: true, force: true });
+mkdirSync(staticDir(''), { recursive: true });
+
+await build({
+  entryPoints: [src('main.tsx')],
+  outfile: staticDir('main.js'),
+  bundle: true,
+  format: 'esm',
+  platform: 'browser',
+  target: ['es2022'],
+  sourcemap: true,
+  logLevel: 'info',
+  jsx: 'automatic',
+  jsxImportSource: 'preact',
+});
+
+for (const entry of ['colors.css', 'theme.css', 'swarm-ui.css']) {
+  await build({
+    entryPoints: [src(entry)],
+    outfile: staticDir(entry),
+    bundle: true,
+    loader: { '.css': 'css' },
+    logLevel: 'info',
+  });
+}
+
+copyFileSync(src('index.html'), dist('index.html'));
+
+console.log('swarm-ui build ok →', dist(''));

frontend/packages/swarm-ui/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@hive/swarm-ui",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Swarm-level operator UI shell (project-bootstrap scope). Preact + wouter + TypeScript + JSX for a real SPA shell with a router and deep links, distinct from the per-hive dashboard's vanilla-JS + custom-element MPA. Empty start page for now; functionality is out of scope until swarm-controller's authelia-backed auth lands. Bundled by esbuild into a static dist; served by swarm-controller once that wiring exists.",
+  "type": "module",
+  "scripts": {
+    "build": "node ./build.mjs",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@hive/shared": "*",
+    "preact": "10.29.8",
+    "wouter-preact": "3.10.0"
+  },
+  "devDependencies": {
+    "typescript": "7.0.2"
+  }
+}

frontend/packages/swarm-ui/src/App.tsx

@@ -0,0 +1,35 @@
+// Root shell component. Empty start page for now — functionality
+// (swarm roster, target-state view, whatever the swarm-controller
+// epic eventually needs) is out of scope until auth against authelia
+// is figured out. What's here IS in scope: a real router + deep-link
+// shape that the per-hive dashboard's vanilla-JS + custom-element MPA
+// doesn't have, so later work has a shell to land routes into instead
+// of bolting routing on after the fact.
+import { Route, Switch } from 'wouter-preact';
+
+function Home() {
+  return (
+    <main class="swarm-ui-empty">
+      <h1>swarm ui</h1>
+      <p>nothing here yet — project-bootstrap placeholder.</p>
+    </main>
+  );
+}
+
+function NotFound() {
+  return (
+    <main class="swarm-ui-empty">
+      <h1>404</h1>
+      <p>no route here.</p>
+    </main>
+  );
+}
+
+export function App() {
+  return (
+    <Switch>
+      <Route path="/" component={Home} />
+      <Route component={NotFound} />
+    </Switch>
+  );
+}

frontend/packages/swarm-ui/src/colors.css

@@ -0,0 +1,6 @@
+/* Standalone base16 palette — re-exports the shared base16 slots so
+   esbuild emits its own `dist/static/colors.css`, linked first by every
+   swarm-ui page (before theme.css). This is the theme swap contract: a
+   stylix-generated variant replaces only this file. See
+   @hive/shared/colors.css + docs/web-ui/css-vars.md. */
+@import "@hive/shared/colors.css";

frontend/packages/swarm-ui/src/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>hyperhive swarm</title>
+  <link rel="stylesheet" href="static/colors.css">
+  <link rel="stylesheet" href="static/theme.css">
+  <link rel="stylesheet" href="static/swarm-ui.css">
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="static/main.js"></script>
+</body>
+</html>

frontend/packages/swarm-ui/src/main.tsx

@@ -0,0 +1,7 @@
+import { render } from 'preact';
+import { App } from './App.js';
+
+const root = document.getElementById('root');
+if (root) {
+  render(<App />, root);
+}

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

@@ -0,0 +1,12 @@
+@import "@hive/shared/base.css";
+
+/* Bootstrap placeholder only — real layout comes with the first
+   route that actually needs one. */
+.swarm-ui-empty {
+  max-width: 40em;
+  margin: 4em auto;
+  padding: 0 1em;
+}
+.swarm-ui-empty h1 {
+  color: var(--purple);
+}

frontend/packages/swarm-ui/src/theme.css

@@ -0,0 +1,6 @@
+/* Standalone semantic theme layer — re-exports the shared derivation so
+   esbuild emits it as its own `dist/static/theme.css`, linked by every
+   swarm-ui page right after colors.css. The base16 slots it derives
+   from live in colors.css (the swap contract); a theme swap replaces
+   only that file. See @hive/shared/theme.css + docs/web-ui/css-vars.md. */
+@import "@hive/shared/theme.css";

frontend/packages/swarm-ui/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src"]
+}