vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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.
This commit is contained in:
iris 2026-08-11 20:59:15 +02:00 • committed by mara
commit 7d1b18d2c8
16 changed files with 698 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

35
frontend/packages/swarm-ui/src/App.tsx Normal file
View file

@ -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>
);
}

6
frontend/packages/swarm-ui/src/colors.css Normal file
View file

@ -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";

15
frontend/packages/swarm-ui/src/index.html Normal file
View file

@ -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>

7
frontend/packages/swarm-ui/src/main.tsx Normal file
View file

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

12
frontend/packages/swarm-ui/src/swarm-ui.css Normal file
View file

@ -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);
}

6
frontend/packages/swarm-ui/src/theme.css Normal file
View file

@ -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";