fix(client): make build assets deployment relative

src/client/index.html

@@ -5,9 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <title>PI WEB</title>
     <meta name="theme-color" content="#0d1117" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="%BASE_URL%favicon.svg" />
-    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="apple-touch-icon" href="%BASE_URL%apple-touch-icon.png" />
-    <link rel="manifest" href="/manifest.webmanifest" />
+    <link rel="manifest" href="%BASE_URL%manifest.webmanifest" />
     <style>
       :root {
         color-scheme: dark;

src/client/public/manifest.webmanifest

@@ -2,20 +2,20 @@
   "name": "PI WEB",
   "short_name": "PI WEB",
   "description": "Remote web UI and browser control plane for persistent Pi Coding Agent sessions.",
-  "start_url": "/",
+  "start_url": "./",
-  "scope": "/",
+  "scope": "./",
   "display": "standalone",
   "background_color": "#0d1117",
   "theme_color": "#0d1117",
   "icons": [
     {
-      "src": "/pwa-icon-192.png",
+      "src": "./pwa-icon-192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "any maskable"
     },
     {
-      "src": "/pwa-icon-512.png",
+      "src": "./pwa-icon-512.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "any maskable"

src/clientBuildContents.test.ts

@@ -0,0 +1,45 @@
+import { mkdtemp, readFile, rm } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { build } from "vite";
+import { describe, expect, it } from "vitest";
+
+const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+
+describe("production client build contents", () => {
+  it("emits deployment-relative HTML and PWA URLs", async () => {
+    const outDir = await mkdtemp(join(tmpdir(), "pi-web-client-build-"));
+    try {
+      await build({
+        configFile: join(repoRoot, "vite.config.ts"),
+        logLevel: "silent",
+        build: { outDir, emptyOutDir: true },
+      });
+
+      const html = await readFile(join(outDir, "index.html"), "utf8");
+      const references = htmlAssetReferences(html);
+      expect(references).toContain("./favicon.svg");
+      expect(references).toContain("./apple-touch-icon.png");
+      expect(references).toContain("./manifest.webmanifest");
+      expect(references).toContainEqual(expect.stringMatching(/^\.\/assets\/index-[^/]+\.js$/));
+      expect(references.filter((reference) => reference.startsWith("/"))).toEqual([]);
+
+      const manifest: unknown = JSON.parse(await readFile(join(outDir, "manifest.webmanifest"), "utf8"));
+      expect(manifest).toMatchObject({
+        start_url: "./",
+        scope: "./",
+        icons: [
+          { src: "./pwa-icon-192.png" },
+          { src: "./pwa-icon-512.png" },
+        ],
+      });
+    } finally {
+      await rm(outDir, { recursive: true, force: true });
+    }
+  });
+});
+
+function htmlAssetReferences(html: string): string[] {
+  return Array.from(html.matchAll(/\b(?:href|src)="([^"]+)"/g), (match) => match[1] ?? "");
+}

vite.config.ts

@@ -93,6 +93,7 @@ function devDocsPlugin(): Plugin {
 export default defineConfig({
   plugins: [devDocsPlugin()],
   root: "src/client",
+  base: "./",
   build: {
     outDir: "../../dist/client",
     emptyOutDir: true,