generate index.html's absolute URLs from PUBLIC_URL

index.html hardcoded the deployment's domain in eight places, so every instance
had to carry its own edit of the file — the only thing separating the rezio
branch from master.

The tags genuinely need absolute URLs. OpenGraph is fetched standalone by
crawlers, and Bun's HTML bundler treats a root-relative href as an asset to
resolve on disk, failing the build with "Could not resolve: /favicon.ico" —
external URLs are the only form it passes through untouched.

Bun's HTML import offers no substitution hook, so scripts/gen-index.ts swaps
__PUBLIC_URL__ for the value in .env and writes index.gen.html, which the server
imports. index.html is the tracked template and is now identical on every
deployment; index.gen.html is gitignored. predev/prestart run the generator, and
it is idempotent so --watch does not loop.

Substituting also fixes the manifest: an absolute URL puts its fetch in CORS
mode, which failed whenever the hardcoded domain was not the serving origin.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

.gitignore

@@ -42,3 +42,6 @@ src/config.ts
 # Playwright
 playwright/
 .wwebjs_cache/
+
+# generated from index.html by scripts/gen-index.ts
+src/apps/officer-web/index.gen.html

package.json

@@ -9,7 +9,10 @@
   ],
   "scripts": {
     "preinstall": "node -e \"var v = +process.versions.node.split('.')[0]; if (v < 22 || v > 22) { console.error('Node 22 required (got ' + process.versions.node + '). Run: nvm use 22'); process.exit(1); }\"",
+    "gen:index": "bun run ./scripts/gen-index.ts",
+    "predev": "bun run ./scripts/gen-index.ts",
     "dev": "bun --env-file=.env --watch src/server.tsx",
+    "prestart": "bun run ./scripts/gen-index.ts",
     "start": "NODE_ENV=production bun src/server.tsx",
     "prebuild": "bun run ./scripts/prebuild.ts",
     "build:web": "bun run ./scripts/build/web.ts",

scripts/gen-index.ts

@@ -0,0 +1,48 @@
+#!/usr/bin/env bun
+// Generates src/apps/officer-web/index.gen.html from index.html, substituting __PUBLIC_URL__ with
+// PUBLIC_URL from .env.
+//
+// The OpenGraph tags need absolute URLs — crawlers fetch the page standalone and cannot resolve
+// relative ones — but hardcoding the domain forces every deployment to carry its own edit of
+// index.html. Bun's HTML import offers no substitution hook, so the swap happens here and the server
+// imports the generated file. index.gen.html is gitignored; index.html is the tracked template and
+// is identical on every instance.
+
+import { existsSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const template = join(root, 'src/apps/officer-web/index.html');
+const output = join(root, 'src/apps/officer-web/index.gen.html');
+
+// The server reads .env through --env-file, but this script runs standalone.
+const envPath = join(root, '.env');
+if (!process.env.PUBLIC_URL && existsSync(envPath)) {
+  for (const line of (await Bun.file(envPath).text()).split('\n')) {
+    const match = line.match(/^\s*PUBLIC_URL\s*=\s*(.*)$/);
+    if (match) process.env.PUBLIC_URL = match[1]!.trim().replace(/^["']|["']$/g, '');
+  }
+}
+
+const publicUrl = (process.env.PUBLIC_URL ?? '').replace(/\/+$/, '');
+if (!publicUrl) {
+  console.error('[gen-index] PUBLIC_URL is not set — set it in .env (e.g. https://officer.example.com)');
+  process.exit(1);
+}
+
+const html = await Bun.file(template).text();
+const generated = html.replaceAll('__PUBLIC_URL__', publicUrl);
+
+if (generated.includes('__PUBLIC_URL__')) {
+  console.error('[gen-index] substitution left placeholders behind');
+  process.exit(1);
+}
+
+// Only write when the content actually changes, so `bun --watch` does not restart in a loop.
+if (existsSync(output) && (await Bun.file(output).text()) === generated) {
+  console.log(`[gen-index] up to date (${publicUrl})`);
+} else {
+  await Bun.write(output, generated);
+  console.log(`[gen-index] wrote index.gen.html (${publicUrl})`);
+}

src/apps/officer-web/index.html

@@ -6,29 +6,35 @@
     <title>Officer Dev (Alpha)</title>
     <meta name="description" content="Your all-purpose AI operating system. Personal AI assistant, terminal, file browser, code editor, and customizable dashboards — all self-hosted." />
 
+    <!-- OpenGraph. Crawlers fetch these standalone, so they need absolute URLs. __PUBLIC_URL__ is
+         substituted from .env by scripts/gen-index.ts into index.gen.html, which is what the server
+         actually serves — this file is the template and stays identical across deployments. -->
     <!-- OpenGraph -->
     <meta property="og:type" content="website" />
     <meta property="og:title" content="Officer Dev (Alpha)" />
     <meta property="og:description" content="Your all-purpose AI operating system. Personal AI assistant, terminal, file browser, code editor, and customizable dashboards — all self-hosted." />
-    <meta property="og:image" content="https://officer.pastilhas.dev/og-image-v3.jpg" />
+    <meta property="og:image" content="__PUBLIC_URL__/og-image-v3.jpg" />
-    <meta property="og:image:secure_url" content="https://officer.pastilhas.dev/og-image-v3.jpg" />
+    <meta property="og:image:secure_url" content="__PUBLIC_URL__/og-image-v3.jpg" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
     <meta property="og:image:type" content="image/jpeg" />
-    <meta property="og:url" content="https://officer.pastilhas.dev" />
+    <meta property="og:url" content="__PUBLIC_URL__" />
     <meta property="og:site_name" content="Officer Dev" />
 
     <!-- Twitter Card -->
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="Officer Dev (Alpha)" />
     <meta name="twitter:description" content="Your all-purpose AI operating system. Personal AI assistant, terminal, file browser, code editor, and customizable dashboards — all self-hosted." />
-    <meta name="twitter:image" content="https://officer.pastilhas.dev/og-image-v3.jpg" />
+    <meta name="twitter:image" content="__PUBLIC_URL__/og-image-v3.jpg" />
 
-    <!-- Favicons & App Icons -->
+    <!-- Favicons & App Icons. These must stay absolute: Bun's HTML bundler treats a root-relative
-    <link rel="icon" type="image/x-icon" href="https://officer.pastilhas.dev/favicon.ico" />
+         href as an asset to resolve on disk and fails the build ("Could not resolve: /favicon.ico"),
-    <link rel="icon" type="image/png" sizes="96x96" href="https://officer.pastilhas.dev/favicon-96x96.png" />
+         whereas external URLs are passed through untouched. Substituting PUBLIC_URL also keeps the
-    <link rel="apple-touch-icon" sizes="180x180" href="https://officer.pastilhas.dev/apple-touch-icon.png" />
+         manifest same-origin, so its CORS-mode fetch succeeds. -->
-    <link rel="manifest" href="https://officer.pastilhas.dev/site.webmanifest" />
+    <link rel="icon" type="image/x-icon" href="__PUBLIC_URL__/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="96x96" href="__PUBLIC_URL__/favicon-96x96.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="__PUBLIC_URL__/apple-touch-icon.png" />
+    <link rel="manifest" href="__PUBLIC_URL__/site.webmanifest" />
     <meta name="theme-color" content="#1F2620" />
 
     <script src="https://cdn.jsdelivr.net/npm/eruda"></script>

src/server.tsx

@@ -12,7 +12,7 @@ import { cliampWebsocket } from './servers/api/cliamp/websocket';
 import { cliampAudioWebsocket } from './servers/api/cliamp/audio-ws';
 import { desktopWebsocket } from './servers/api/desktop/websocket';
 import { findEntryByProxyId, touchEntry } from './servers/api/dev-server/router';
-import officerWeb from './apps/officer-web/index.html';
+import officerWeb from './apps/officer-web/index.gen.html';
 import { startBrowserRelay } from './servers/api/browser/relay';
 import { registerSidecar, unregisterSidecar, handleSidecarMessage } from './servers/sidecar-registry';
 import './servers/api/chat/opencode/sidecar-server'; // subscribe to the opencode sidecar's port report