Phase 0: repo skeleton, image, compose stacks, doctor, migration runner, frontend shell

New repo for the Packet Station rebuild (Python 3.12, FastAPI, PostgreSQL 16, React, VisualKit, MFilesKit, Docker Compose on docker-1). Nothing is migrated from the M: install. - CLAUDE.md with the safety rules, README, CHANGELOG, docs (BRIEF, PLAN, SECURITY rewritten for the server with the requirement ID table, DEPLOY, stubs for FEED, POLICY, SCHEMA, GO-LIVE, PAPER-FALLBACK). - packetstation CLI: app, worker (heartbeat stub), migrate, doctor, version, healthcheck. Settings from the environment with secret files. Stack guard (test never points at VISUAL production). Security headers and CSP. Trusted proxy resolved by name. JSON logs with redaction. - Migration runner and 0001_base: settings, append-only audit_events with hash chain, ps_notify, grants for ps_app. - Multi-stage Dockerfile (ODBC Driver 18, PESCO libraries from the Gitea index only), compose base, proxy overlay for npm_default, CI overlay, postgres initdb roles, env examples, NPM proxy host notes, Gitea Actions. - Frontend: Vite, React, TypeScript, the PESCO dark theme ported with self-hosted fonts, placeholder sign-in and home. - Verified on docker-1: image builds, CI stack comes up healthy, doctor database checks pass, 77 server tests pass against PostgreSQL. Co-Authored-By: Claude Fable 5.1 <[email protected]>
2026-10-15 23:08:47 -06:00
commit 0b663bb2b2
91 changed files with 11307 additions and 0 deletions
@@ -0,0 +1,16 @@
+import { Outlet } from "react-router";
+import { TopBar } from "./TopBar";
+
+/** Page frame: the top bar, then the routed page inside main.wrap. */
+export function Layout() {
+  return (
+    <>
+      <TopBar>
+        <span className="proto">Rebuild preview</span>
+      </TopBar>
+      <main className="wrap" id="main">
+        <Outlet />
+      </main>
+    </>
+  );
+}
@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import { Link } from "react-router";
+import logo from "../assets/logo.png";
+
+interface TopBarProps {
+  /** Right-hand side: the signed-in user, role switcher and so on. */
+  children?: ReactNode;
+}
+
+/** Sticky shop header. Same markup classes as the old page's header.top. */
+export function TopBar({ children }: TopBarProps) {
+  return (
+    <header className="top">
+      <div className="top-in">
+        <Link className="brand" to="/" aria-label="Packet Station home">
+          <img alt="PESCO" src={logo} width={119} height={34} />
+          <div className="nm">
+            Packet <span>Station</span>
+          </div>
+        </Link>
+        <div className="sp" />
+        {children ? <div className="who">{children}</div> : null}
+      </div>
+    </header>
+  );
+}
@@ -0,0 +1,38 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { mockFetch } from "../test/fetchMock";
+import { parseVersion } from "../lib/version";
+import { VersionStatus } from "./VersionStatus";
+
+describe("VersionStatus", () => {
+  it("shows the server build version and a healthy API", async () => {
+    mockFetch({
+      "/api/version": { body: { version: "0.1.0", build: "sha-abc1234" } },
+      "/healthz": { body: { status: "ok" } },
+    });
+    render(<VersionStatus />);
+    expect(await screen.findByText("0.1.0")).toBeInTheDocument();
+    expect(screen.getByText("sha-abc1234")).toBeInTheDocument();
+    expect(await screen.findByText("Up")).toBeInTheDocument();
+  });
+
+  it("shows the error when the API is down", async () => {
+    mockFetch({
+      "/api/version": { status: 503, body: { detail: "Database unavailable" } },
+      "/healthz": { status: 503, body: { detail: "Database unavailable" } },
+    });
+    render(<VersionStatus />);
+    expect(await screen.findByText("Down")).toBeInTheDocument();
+    expect(await screen.findAllByText("Database unavailable")).toHaveLength(2);
+    expect(screen.getByTestId("kpi-version")).toHaveClass("hot");
+  });
+});
+
+describe("parseVersion", () => {
+  it("accepts a plain string and odd shapes", () => {
+    expect(parseVersion("1.2.3")).toEqual({ version: "1.2.3" });
+    expect(parseVersion({ build: "sha-1" })).toEqual({ version: "sha-1" });
+    expect(parseVersion({ version: "1.0", commit: "abc" })).toEqual({ version: "1.0", build: "abc" });
+    expect(parseVersion(null)).toEqual({ version: "unknown" });
+  });
+});
@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react";
+import { ApiError } from "../api/client";
+import {
+  FRONTEND_BUILD,
+  fetchHealth,
+  fetchVersion,
+  type HealthInfo,
+  type VersionInfo,
+} from "../lib/version";
+
+type Load<T> = { state: "loading" } | { state: "ok"; data: T } | { state: "error"; message: string };
+
+function errorText(err: unknown): string {
+  if (err instanceof ApiError) return err.message;
+  if (err instanceof Error) return err.message;
+  return "Unknown error";
+}
+
+/** KPI tiles for the server build, the API health and the frontend build. */
+export function VersionStatus() {
+  const [version, setVersion] = useState<Load<VersionInfo>>({ state: "loading" });
+  const [health, setHealth] = useState<Load<HealthInfo>>({ state: "loading" });
+
+  useEffect(() => {
+    const ctl = new AbortController();
+    const aborted = () => ctl.signal.aborted;
+    fetchVersion(ctl.signal)
+      .then((data) => !aborted() && setVersion({ state: "ok", data }))
+      .catch((err: unknown) => !aborted() && setVersion({ state: "error", message: errorText(err) }));
+    fetchHealth(ctl.signal)
+      .then((data) => !aborted() && setHealth({ state: "ok", data }))
+      .catch((err: unknown) => !aborted() && setHealth({ state: "error", message: errorText(err) }));
+    return () => ctl.abort();
+  }, []);
+
+  const healthOk = health.state === "ok" && health.data.ok;
+
+  return (
+    <div className="kpis" aria-live="polite">
+      <div className={version.state === "error" ? "kpi hot" : "kpi"} data-testid="kpi-version">
+        <div className="n mono">
+          {version.state === "ok" ? version.data.version : version.state === "loading" ? "..." : "?"}
+        </div>
+        <div className="l">Server build</div>
+        {version.state === "ok" && version.data.build ? (
+          <div className="small muted mono">{version.data.build}</div>
+        ) : null}
+        {version.state === "error" ? <div className="small muted">{version.message}</div> : null}
+      </div>
+
+      <div className={healthOk ? "kpi" : health.state === "loading" ? "kpi zero" : "kpi hot"} data-testid="kpi-health">
+        <div className="n">
+          <span className={`pill ${healthOk ? "st-ok" : health.state === "loading" ? "st-wait" : "st-bad"}`}>
+            {healthOk ? "Up" : health.state === "loading" ? "Checking" : "Down"}
+          </span>
+        </div>
+        <div className="l">API health</div>
+        {health.state === "ok" ? <div className="small muted">{health.data.status}</div> : null}
+        {health.state === "error" ? <div className="small muted">{health.message}</div> : null}
+      </div>
+
+      <div className="kpi zero">
+        <div className="n mono">{FRONTEND_BUILD}</div>
+        <div className="l">Frontend build</div>
+      </div>
+    </div>
+  );
+}