feat: initial fate based SPA

app/server/hono-app.ts

@@ -0,0 +1,107 @@
+import { versions } from "node:process";
+
+import { serveStatic } from "@hono/node-server/serve-static";
+import { Hono, type Context } from "hono";
+
+import type { AppContext } from "./context";
+
+interface HonoAppOptions {
+  context: AppContext;
+  prefix: string;
+  staticRoot?: string;
+}
+
+export function createHeadplaneHonoApp({ context, prefix, staticRoot }: HonoAppOptions) {
+  const app = new Hono();
+
+  const health = async (c: Context) => {
+    const api = context.hsApi.getRuntimeClient("fake-api-key");
+    const healthy = await api.isHealthy();
+
+    return c.json({ status: healthy ? "OK" : "ERROR" }, healthy ? 200 : 500);
+  };
+
+  app.get("/healthz", health);
+  app.get(`${prefix}/healthz`, health);
+
+  app.get(`${prefix}/api/info`, async (c) => {
+    if (context.config.server.info_secret == null) {
+      return c.json({ status: "Forbidden" }, 403);
+    }
+
+    const bearer = c.req.header("Authorization") ?? "";
+    if (!bearer.startsWith("Bearer ")) {
+      return c.json({ status: "Unauthorized" }, 401);
+    }
+
+    const token = bearer.slice("Bearer ".length).trim();
+    if (token !== context.config.server.info_secret) {
+      return c.json({ status: "Forbidden" }, 403);
+    }
+
+    const api = context.hsApi.getRuntimeClient("fake-api-key");
+    const healthy = await api.isHealthy();
+
+    return c.json({
+      status: healthy ? "healthy" : "unhealthy",
+      headplane_version: __VERSION__,
+      headscale_canonical_version: healthy ? context.hsApi.apiVersion : "unknown",
+      internal_versions: {
+        node: versions.node,
+        v8: versions.v8,
+        uv: versions.uv,
+        zlib: versions.zlib,
+        openssl: versions.openssl,
+        libc: versions.libc,
+      },
+    });
+  });
+
+  app.get(`${prefix}/api/session`, async (c) => {
+    try {
+      const principal = await context.auth.require(c.req.raw);
+
+      if (principal.kind === "api_key") {
+        return c.json({
+          authenticated: true,
+          principal: {
+            kind: principal.kind,
+            sessionId: principal.sessionId,
+            displayName: principal.displayName,
+          },
+        });
+      }
+
+      return c.json({
+        authenticated: true,
+        principal: {
+          kind: principal.kind,
+          sessionId: principal.sessionId,
+          user: principal.user,
+          profile: principal.profile,
+        },
+      });
+    } catch {
+      return c.json({ authenticated: false }, 401);
+    }
+  });
+
+  app.all(`${prefix}/fate`, (c) => c.json({ error: "Fate server is not mounted yet" }, 501));
+  app.all(`${prefix}/fate/*`, (c) => c.json({ error: "Fate server is not mounted yet" }, 501));
+
+  if (staticRoot) {
+    const stripPrefix = (path: string) => path.slice(prefix.length) || "/";
+
+    app.get(prefix, (c) => c.redirect(`${prefix}/`));
+    app.use(
+      `${prefix}/*`,
+      serveStatic({
+        root: staticRoot,
+        rewriteRequestPath: stripPrefix,
+      }),
+    );
+    app.get(`${prefix}/*`, serveStatic({ root: staticRoot, path: "index.html" }));
+  }
+
+  return app;
+}

app/server/hono-dev.ts

@@ -0,0 +1,87 @@
+import { createServer } from "node:http";
+import { exit } from "node:process";
+
+import { getRequestListener } from "@hono/node-server";
+import { createServer as createViteServer } from "vite";
+
+import log from "~/utils/log";
+
+import { ConfigError } from "./config/error";
+import { loadConfig } from "./config/load";
+import { createAppContext } from "./context";
+import { createHeadplaneHonoApp } from "./hono-app";
+
+const PREFIX = process.env.__INTERNAL_PREFIX || "/admin";
+(globalThis as Record<string, unknown>).__PREFIX__ = PREFIX;
+(globalThis as Record<string, unknown>).__VERSION__ = process.env.HEADPLANE_VERSION ?? "dev";
+
+let config;
+try {
+  config = await loadConfig();
+} catch (error) {
+  if (error instanceof ConfigError) {
+    log.error("server", "Unable to load configuration: %s", error.message);
+  } else {
+    log.error("server", "Failed to load configuration: %s", error);
+  }
+  exit(1);
+}
+
+const context = await createAppContext(config);
+context.auth.start();
+
+const app = createHeadplaneHonoApp({ context, prefix: PREFIX });
+const honoListener = getRequestListener(app.fetch);
+const vite = await createViteServer({
+  appType: "spa",
+  server: {
+    middlewareMode: true,
+  },
+});
+
+const server = createServer((req, res) => {
+  if (shouldUseHono(req.url)) {
+    void honoListener(req, res);
+    return;
+  }
+
+  vite.middlewares(req, res, (error?: unknown) => {
+    if (error) {
+      if (error instanceof Error) {
+        vite.ssrFixStacktrace(error);
+      }
+
+      log.error("server", "Vite middleware failed: %s", error);
+      res.statusCode = 500;
+      res.end("Internal Server Error");
+      return;
+    }
+
+    void honoListener(req, res);
+  });
+});
+
+server.listen(config.server.port, config.server.host, () => {
+  log.info("server", "Listening on http://%s:%s", config.server.host, config.server.port);
+});
+
+function shouldUseHono(rawUrl: string | undefined) {
+  if (!rawUrl) {
+    return false;
+  }
+
+  let pathname;
+  try {
+    pathname = new URL(rawUrl, "http://localhost").pathname;
+  } catch {
+    return false;
+  }
+
+  return (
+    pathname === "/healthz" ||
+    pathname === `${PREFIX}/healthz` ||
+    pathname === `${PREFIX}/fate` ||
+    pathname.startsWith(`${PREFIX}/fate/`) ||
+    pathname.startsWith(`${PREFIX}/api/`)
+  );
+}

app/server/hono-main.ts

@@ -0,0 +1,46 @@
+import { exit } from "node:process";
+
+import { serve } from "@hono/node-server";
+
+import log from "~/utils/log";
+
+import { ConfigError } from "./config/error";
+import { loadConfig } from "./config/load";
+import { createAppContext } from "./context";
+import { createHeadplaneHonoApp } from "./hono-app";
+
+const PREFIX = process.env.__INTERNAL_PREFIX || "/admin";
+(globalThis as Record<string, unknown>).__PREFIX__ = PREFIX;
+(globalThis as Record<string, unknown>).__VERSION__ = process.env.HEADPLANE_VERSION ?? "dev";
+
+let config;
+try {
+  config = await loadConfig();
+} catch (error) {
+  if (error instanceof ConfigError) {
+    log.error("server", "Unable to load configuration: %s", error.message);
+  } else {
+    log.error("server", "Failed to load configuration: %s", error);
+  }
+  exit(1);
+}
+
+const context = await createAppContext(config);
+context.auth.start();
+
+const app = createHeadplaneHonoApp({
+  context,
+  prefix: PREFIX,
+  staticRoot: "build/client",
+});
+
+serve(
+  {
+    fetch: app.fetch,
+    hostname: config.server.host,
+    port: config.server.port,
+  },
+  (info) => {
+    log.info("server", "Listening on http://%s:%s", info.address, info.port);
+  },
+);

app/spa/app.tsx

@@ -0,0 +1,21 @@
+import { RouterProvider } from "@tanstack/react-router";
+import { FateClient, createClient, createHTTPTransport } from "react-fate";
+
+import { router } from "./router";
+
+const fate = createClient({
+  roots: {},
+  transport: createHTTPTransport({
+    fetch: (input, init) => fetch(input, { ...init, credentials: "include" }),
+    url: `${__PREFIX__}/fate`,
+  }),
+  types: [],
+});
+
+export function App() {
+  return (
+    <FateClient client={fate}>
+      <RouterProvider router={router} />
+    </FateClient>
+  );
+}

app/spa/main.tsx

@@ -0,0 +1,16 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import "~/tailwind.css";
+import { App } from "./app";
+
+const root = document.getElementById("root");
+if (!root) {
+  throw new Error("Unable to find root element");
+}
+
+createRoot(root).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

app/spa/router.tsx

@@ -0,0 +1,69 @@
+import { Link, Outlet, createRootRoute, createRoute, createRouter } from "@tanstack/react-router";
+
+const rootRoute = createRootRoute({
+  component: RootLayout,
+});
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/",
+  component: HomePage,
+});
+
+const machinesRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/machines",
+  component: MachinesPage,
+});
+
+const routeTree = rootRoute.addChildren([indexRoute, machinesRoute]);
+
+export const router = createRouter({
+  basepath: __PREFIX__,
+  routeTree,
+});
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+function RootLayout() {
+  return (
+    <div className="min-h-screen bg-neutral-950 text-white">
+      <header className="border-b border-white/10 px-6 py-4">
+        <nav className="flex gap-4 text-sm">
+          <Link to="/">Home</Link>
+          <Link to="/machines">Machines</Link>
+        </nav>
+      </header>
+
+      <main className="p-6">
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
+function HomePage() {
+  return (
+    <section className="space-y-2">
+      <h1 className="text-2xl font-semibold">Headplane SPA</h1>
+      <p className="text-neutral-400">
+        This is the one-way SPA shell. Data should move to raw Fate views and actions.
+      </p>
+    </section>
+  );
+}
+
+function MachinesPage() {
+  return (
+    <section className="space-y-2">
+      <h1 className="text-2xl font-semibold">Machines</h1>
+      <p className="text-neutral-400">
+        First migration target: replace the React Router loader/action/SSE model with raw Fate.
+      </p>
+    </section>
+  );
+}