overmux 0.0.1 → 0.0.2

package/src/internal/cli/managed-vite.ts

@@ -0,0 +1,267 @@
+import { readFile, realpath } from "node:fs/promises";
+import { isAbsolute, relative, resolve } from "node:path";
+import { init, parse } from "es-module-lexer";
+import {
+  searchForWorkspaceRoot,
+  type InlineConfig,
+  type UserConfig,
+  type ViteDevServer,
+} from "vite";
+
+import { viteHmrPath } from "../shared/routes";
+
+type ViteApi = {
+  build: (options: { configFile: string; root: string }) => Promise<unknown>;
+  createServer: (options: InlineConfig) => Promise<ViteDevServer>;
+  loadConfigFromFile: (
+    environment: {
+      command: "build" | "serve";
+      mode: "development" | "production";
+    },
+    configFile: string,
+    configRoot: string,
+  ) => Promise<{ config: UserConfig } | null | undefined>;
+};
+
+type ManagedVite = {
+  close: () => Promise<void>;
+  server: ViteDevServer;
+  target: string;
+};
+
+export const loadViteRoot = async ({
+  api,
+  command,
+  configPath,
+}: {
+  api: ViteApi;
+  command: "build" | "serve";
+  configPath: string;
+}) => {
+  const configRoot = resolve(configPath, "..");
+  const mode = command === "build" ? "production" : "development";
+  const loaded = await api.loadConfigFromFile(
+    { command, mode },
+    configPath,
+    configRoot,
+  );
+  return {
+    config: loaded?.config ?? {},
+    root: resolve(configRoot, loaded?.config.root ?? "."),
+  };
+};
+
+const conflictingHmrKeys = [
+  "clientPort",
+  "host",
+  "path",
+  "port",
+  "protocol",
+  "server",
+] as const;
+
+export const validateViteServerConfig = (config: UserConfig) => {
+  const server = config.server;
+  const conflict = ["host", "port", "strictPort", "https"].find(
+    (key) => server?.[key as keyof typeof server] !== undefined,
+  );
+  if (conflict) {
+    throw new Error(
+      `Vite server.${conflict} is managed by \`overmux serve\`; remove it from the Vite config`,
+    );
+  }
+  if (server?.hmr === false) {
+    throw new Error(
+      "Vite server.hmr cannot be disabled when managed by `overmux serve`",
+    );
+  }
+  const hmr = server?.hmr;
+  if (hmr && typeof hmr === "object") {
+    const hmrConflict = conflictingHmrKeys.find(
+      (key) => hmr[key] !== undefined,
+    );
+    if (hmrConflict) {
+      throw new Error(
+        `Vite server.hmr.${hmrConflict} is managed by \`overmux serve\`; remove it from the Vite config`,
+      );
+    }
+  }
+};
+
+const validateResolvedViteServer = (server: ViteDevServer) => {
+  const config = server.config.server;
+  const hmr =
+    config.hmr && typeof config.hmr === "object" ? config.hmr : undefined;
+  const changedHmrEndpoint = conflictingHmrKeys.some(
+    (key) => key !== "path" && hmr?.[key] !== undefined,
+  );
+  if (
+    config.host !== "127.0.0.1" ||
+    config.port !== 0 ||
+    config.strictPort !== true ||
+    config.https ||
+    hmr?.path !== viteHmrPath ||
+    changedHmrEndpoint
+  ) {
+    throw new Error(
+      "A Vite plugin changed listener or HMR settings managed by `overmux serve`",
+    );
+  }
+};
+
+const pathIsWithin = (root: string, path: string) => {
+  const pathFromRoot = relative(root, path);
+  return !pathFromRoot.startsWith("..") && !isAbsolute(pathFromRoot);
+};
+
+const localPath = async (id: string, trustedRoots: string[]) => {
+  if (id.includes("\0")) {
+    return;
+  }
+  try {
+    const path = await realpath(id.split("?", 1)[0]!);
+    if (
+      path.includes("node_modules") ||
+      !trustedRoots.some((root) => pathIsWithin(root, path))
+    ) {
+      return;
+    }
+    return path;
+  } catch {
+    return;
+  }
+};
+
+const importsOf = async (path: string) => {
+  const source = await readFile(path, "utf8");
+  await init;
+  try {
+    return parse(source)[0];
+  } catch {
+    return [];
+  }
+};
+
+const trustedFiles = async ({
+  configPath,
+  server,
+  trustedRoots,
+}: {
+  configPath: string;
+  server: ViteDevServer;
+  trustedRoots: string[];
+}): Promise<Set<string>> => {
+  const files = new Set<string>();
+  const visit = async (path: string): Promise<void> => {
+    if (files.has(path)) {
+      return;
+    }
+    files.add(path);
+    const imports = await importsOf(path);
+    await Promise.all(
+      imports.map(async (imported) => {
+        if (!imported.n) {
+          return;
+        }
+        const resolved = await server.pluginContainer.resolveId(
+          imported.n,
+          path,
+        );
+        const id = typeof resolved === "string" ? resolved : resolved?.id;
+        const importedPath = id ? await localPath(id, trustedRoots) : undefined;
+        if (importedPath) {
+          await visit(importedPath);
+        }
+      }),
+    );
+  };
+  await visit(configPath);
+  return files;
+};
+
+// Watch overmux.config.ts and its imports because Vite only watches browser code.
+// Changes notify Overmux that its trusted server code needs reloading.
+export const watchTrustedFiles = async ({
+  configPath,
+  onUpdate,
+  server,
+}: {
+  configPath: string;
+  onUpdate: () => void;
+  server: ViteDevServer;
+}) => {
+  const logicalApplicationRoot = resolve(configPath, "..");
+  const [applicationRoot, workspaceRoot] = await Promise.all([
+    realpath(logicalApplicationRoot),
+    realpath(searchForWorkspaceRoot(logicalApplicationRoot)),
+  ]);
+  let files = new Set<string>();
+  const refresh = async () => {
+    files = await trustedFiles({
+      configPath: await realpath(configPath),
+      server,
+      trustedRoots: [applicationRoot, workspaceRoot],
+    });
+    server.watcher.add([...files]);
+  };
+  await refresh();
+  const changed = (path: string) => {
+    if (files.has(path)) {
+      void refresh().then(onUpdate);
+    }
+  };
+  server.watcher.on("change", changed);
+  return () => {
+    server.watcher.off("change", changed);
+  };
+};
+
+export const startManagedVite = async ({
+  api,
+  configPath,
+}: {
+  api: ViteApi;
+  configPath: string;
+}): Promise<ManagedVite> => {
+  const { config, root } = await loadViteRoot({
+    api,
+    command: "serve",
+    configPath,
+  });
+  validateViteServerConfig(config);
+  const allowedRoots = [
+    ...(config.server?.fs?.allow ?? []),
+    root,
+    await realpath(root),
+    searchForWorkspaceRoot(root),
+  ];
+  const server = await api.createServer({
+    configFile: configPath,
+    root,
+    server: {
+      fs: { allow: [...new Set(allowedRoots)] },
+      hmr: { path: viteHmrPath },
+      host: "127.0.0.1",
+      port: 0,
+      strictPort: true,
+    },
+  });
+  try {
+    validateResolvedViteServer(server);
+    await server.listen();
+    const address = server.httpServer?.address();
+    if (!address || typeof address === "string") {
+      throw new Error("Private Vite server did not bind a TCP address");
+    }
+    return {
+      close: () => server.close(),
+      server,
+      target: `http://127.0.0.1:${address.port}`,
+    };
+  } catch (cause) {
+    await server.close();
+    throw cause;
+  }
+};
+
+export type { ViteApi };

package/src/internal/cli/parse-port.ts

@@ -0,0 +1,8 @@
+import { serverConfigRuntimeSchema } from "@overmux/shared/node";
+
+export const parsePort = (value: string): Error | number => {
+  const port = Number(value);
+  return serverConfigRuntimeSchema.shape.port.safeParse(port).success
+    ? port
+    : new Error(`Invalid port: ${value}`);
+};

package/src/internal/client/auth/auth-api.ts

@@ -0,0 +1,53 @@
+import { z } from "zod";
+
+export type LoginInput = { code: string } | { ticket: string };
+
+export type LoginResponse =
+  | { status: "authenticated" }
+  | { status: "expired" | "invalid" | "rate-limited" | "unknown" };
+
+const authStateSchema = z.object({ authenticated: z.boolean() });
+const loginFailureSchema = z.object({
+  status: z.enum(["expired", "invalid", "rate-limited"]),
+});
+
+const responseJson = async (response: Response) => {
+  try {
+    return await response.json();
+  } catch {
+    return undefined;
+  }
+};
+
+export const getAuthState = async (signal?: AbortSignal) => {
+  const response = await fetch("/api/auth/state", {
+    cache: "no-store",
+    signal,
+  });
+  const state = authStateSchema.safeParse(await responseJson(response));
+  if (!response.ok || !state.success) {
+    throw new Error("Authentication state request failed");
+  }
+  return state.data;
+};
+
+export const login = async (
+  input: LoginInput,
+  signal?: AbortSignal,
+): Promise<LoginResponse> => {
+  const response = await fetch("/api/auth/login", {
+    body: JSON.stringify(input),
+    credentials: "same-origin",
+    headers: { "content-type": "application/json" },
+    method: "POST",
+    signal,
+  });
+  if (response.ok) {
+    return { status: "authenticated" };
+  }
+  const failure = loginFailureSchema.safeParse(await responseJson(response));
+  if (failure.success) {
+    return failure.data;
+  }
+  return { status: "unknown" };
+};

package/src/internal/client/auth/auth-shell.css

@@ -0,0 +1,74 @@
+:root {
+  color: #eee;
+  background: #111;
+  color-scheme: dark;
+  font:
+    16px/1.5 system-ui,
+    sans-serif;
+}
+
+body {
+  display: grid;
+  min-height: 100vh;
+  margin: 0;
+  place-items: center;
+}
+
+[data-om-auth-shell] {
+  box-sizing: border-box;
+  width: min(26rem, calc(100vw - 3rem));
+  padding: 2rem;
+  border: 1px solid #444;
+  border-radius: 1rem;
+  background: #191919;
+}
+
+[data-om-auth-shell] h1 {
+  margin-top: 0;
+}
+
+[data-om-auth-shell] label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+}
+
+[data-om-auth-shell] input,
+[data-om-auth-shell] button {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  font: inherit;
+}
+
+[data-om-auth-shell] input {
+  border: 1px solid #666;
+  background: #111;
+  color: inherit;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+[data-om-auth-shell] button {
+  margin-top: 1rem;
+  border: 0;
+  background: #6d5dfc;
+  color: white;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+[data-om-auth-shell] button:disabled {
+  opacity: 0.6;
+  cursor: wait;
+}
+
+[data-om-auth-status] {
+  min-height: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+[data-om-auth-status="error"] {
+  color: #ff9b9b;
+}

package/src/internal/client/auth/auth-shell.tsx

@@ -0,0 +1,167 @@
+// SECURITY BOUNDARY: This directory is the public, Overmux-owned pre-authentication client.
+// It may contain only locked/login/recovery UI and direct calls to the public authentication endpoints.
+// It must never import userland, OvermuxHost, runtime manifests, protected application code, or user assets.
+// The auth-only Vite build enforces that local imports cannot leave this directory.
+
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type FormEvent,
+  type RefObject,
+} from "react";
+
+// React Query is intentionally excluded to keep the public pre-authentication shell lightweight.
+// Its mutations may still run concurrently, so it would not replace latest-request cancellation.
+import { getAuthState, login, type LoginInput } from "./auth-api";
+import "./auth-shell.css";
+
+type AuthStatus =
+  | "idle"
+  | "pending"
+  | "invalid"
+  | "expired"
+  | "rate-limited"
+  | "server-unavailable"
+  | "session-expired";
+
+type AuthShellProps = {
+  ticket?: string;
+};
+
+type ExchangeOptions = {
+  input: LoginInput;
+  setStatus: (status: AuthStatus) => void;
+  signal: AbortSignal;
+};
+
+const statusMessages: Record<Exclude<AuthStatus, "idle">, string> = {
+  expired: "That login grant has expired. Generate a new one.",
+  invalid: "That login code or link is invalid.",
+  pending: "Signing in…",
+  "rate-limited": "Too many attempts. Wait a moment and try again.",
+  "server-unavailable": "The server is unavailable.",
+  "session-expired": "Your session expired or was revoked. Sign in again.",
+};
+
+const initialStatus = (): AuthStatus =>
+  new URLSearchParams(window.location.search).get("reason") ===
+  "session-expired"
+    ? "session-expired"
+    : "idle";
+
+// Login requests are latest-wins so an older response cannot overwrite newer UI state.
+// Aborting cannot undo server processing; the server separately consumes one-time grants atomically.
+const nextRequest = (request: RefObject<AbortController | undefined>) => {
+  request.current?.abort();
+  const controller = new AbortController();
+  request.current = controller;
+  return controller;
+};
+
+const exchangeLogin = async ({ input, setStatus, signal }: ExchangeOptions) => {
+  setStatus("pending");
+  try {
+    const result = await login(input, signal);
+    if (signal.aborted) {
+      return;
+    }
+    if (result.status === "authenticated") {
+      window.location.replace("/");
+      return;
+    }
+    setStatus(
+      result.status === "unknown" ? "server-unavailable" : result.status,
+    );
+  } catch {
+    if (!signal.aborted) {
+      setStatus("server-unavailable");
+    }
+  }
+};
+
+const isErrorStatus = (status: AuthStatus) =>
+  status !== "idle" && status !== "pending";
+
+const useAuthFlow = (ticket?: string) => {
+  const [status, setStatus] = useState(initialStatus);
+  const request = useRef<AbortController | undefined>(undefined);
+  const authenticate = useCallback((input: LoginInput) => {
+    const controller = nextRequest(request);
+    void exchangeLogin({ input, setStatus, signal: controller.signal });
+  }, []);
+
+  // Cleanup also prevents ticket changes, unmounts, and development remounts from completing stale requests.
+  useEffect(() => {
+    if (ticket) {
+      authenticate({ ticket });
+      return () => request.current?.abort();
+    }
+    const controller = nextRequest(request);
+    void getAuthState(controller.signal).then(
+      (state) => {
+        if (!controller.signal.aborted && state.authenticated) {
+          window.location.replace("/");
+        }
+      },
+      () => {
+        if (!controller.signal.aborted) {
+          setStatus("server-unavailable");
+        }
+      },
+    );
+    return () => request.current?.abort();
+  }, [authenticate, ticket]);
+
+  return { authenticate, status };
+};
+
+export const AuthShell = ({ ticket }: AuthShellProps) => {
+  const { authenticate, status } = useAuthFlow(ticket);
+  const submitCode = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const code = new FormData(event.currentTarget).get("code");
+    if (typeof code === "string") {
+      authenticate({ code });
+    }
+  };
+  const message = status === "idle" ? undefined : statusMessages[status];
+  const pending = status === "pending";
+
+  return (
+    <main aria-labelledby="auth-title" data-om-auth-shell="">
+      <h1 id="auth-title">Overmux is locked</h1>
+      <p>
+        Generate a login code on the server with <code>overmux auth login</code>
+        .
+      </p>
+      <p
+        aria-atomic="true"
+        aria-live="polite"
+        data-om-auth-status={isErrorStatus(status) ? "error" : ""}
+        id="auth-status"
+        role="status"
+      >
+        {message}
+      </p>
+      <form aria-busy={pending} onSubmit={submitCode}>
+        <label htmlFor="auth-code">Login code</label>
+        <input
+          aria-describedby="auth-status"
+          autoCapitalize="characters"
+          autoComplete="one-time-code"
+          disabled={pending}
+          id="auth-code"
+          name="code"
+          pattern="[A-Za-z0-9]{4}-[A-Za-z0-9]{4}"
+          required
+          spellCheck={false}
+        />
+        <button disabled={pending} type="submit">
+          Unlock Overmux
+        </button>
+      </form>
+    </main>
+  );
+};

package/src/internal/client/auth/entry.tsx

@@ -0,0 +1,26 @@
+import { createRoot } from "react-dom/client";
+
+import { AuthShell } from "./auth-shell";
+
+// Keep extraction and URL scrubbing together so the login ticket is removed before React renders.
+export const takeLoginTicket = () => {
+  const ticket = new URLSearchParams(window.location.hash.slice(1)).get(
+    "ticket",
+  );
+  if (ticket) {
+    window.history.replaceState(
+      null,
+      "",
+      `${window.location.pathname}${window.location.search}`,
+    );
+  }
+  return ticket ?? undefined;
+};
+
+const root = document.querySelector("#root");
+
+if (!root) {
+  throw new Error("The Overmux authentication shell requires a #root element");
+}
+
+createRoot(root).render(<AuthShell ticket={takeLoginTicket()} />);

package/src/internal/client/auth/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="dark light" />
+    <title>Overmux authentication</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./entry.tsx"></script>
+  </body>
+</html>