feat(app): embed web ui in binary with flags to use proxy

Author: BlankParticle

packages/opencode/script/build.ts

@@ -54,6 +54,26 @@ console.log(`Loaded ${migrations.length} migrations`)
 const singleFlag = process.argv.includes("--single")
 const baselineFlag = process.argv.includes("--baseline")
 const skipInstall = process.argv.includes("--skip-install")
+const skipEmbedWebUi = process.argv.includes("--skip-embed-web-ui")
+
+
+const createEmbeddedWebUIBundle = async()=>{
+    console.log(`Building Web UI to embed in the binary`);
+    const appDir = path.join(import.meta.dirname, "../../app")
+    await $`bun run --cwd ${appDir} build`;
+    const allFiles = await Array.fromAsync(new Bun.Glob("**/*").scan({ cwd: path.join(appDir, "dist")}));
+    const fileMap = `
+    // Import all files as file_$i with type: "file" 
+    ${allFiles.map((filePath, i) => `import file_${i} from "${path.join(appDir, "dist", filePath)}" with { type: "file" };`).join("\n")}
+    // Export with original mappings
+    export default {
+      ${allFiles.map((filePath, i)=>`"${filePath}": file_${i},`).join("\n")}
+    }
+    `.trim()
+    return fileMap;
+}
+
+const embeddedFileMap = skipEmbedWebUi ? null : await createEmbeddedWebUIBundle();
 
 const allTargets: {
   os: string
@@ -179,7 +199,10 @@ for (const item of targets) {
       execArgv: [`--user-agent=opencode/${Script.version}`, "--use-system-ca", "--"],
       windows: {},
     },
-    entrypoints: ["./src/index.ts", parserWorker, workerPath],
+    files: {
+      ...(embeddedFileMap ? { "opencode-web-ui.gen.ts": embeddedFileMap } : {}),
+    },
+    entrypoints: ["./src/index.ts", parserWorker, workerPath, ...(embeddedFileMap ? ["opencode-web-ui.gen.ts"] : [])],
     define: {
       OPENCODE_VERSION: `'${Script.version}'`,
       OPENCODE_MIGRATIONS: JSON.stringify(migrations),

packages/opencode/src/flag/flag.ts

@@ -53,6 +53,7 @@ export namespace Flag {
   export const OPENCODE_EXPERIMENTAL_MARKDOWN = truthy("OPENCODE_EXPERIMENTAL_MARKDOWN")
   export const OPENCODE_MODELS_URL = process.env["OPENCODE_MODELS_URL"]
   export const OPENCODE_MODELS_PATH = process.env["OPENCODE_MODELS_PATH"]
+  export const OPENCODE_DISABLE_EMBEDDED_WEB_UI = truthy("OPENCODE_DISABLE_EMBEDDED_WEB_UI")
 
   function number(key: string) {
     const value = process.env[key]

packages/opencode/src/server/server.ts

@@ -539,20 +539,36 @@ export namespace Server {
           },
         )
         .all("/*", async (c) => {
+          const embeddedWebUI = Flag.OPENCODE_DISABLE_EMBEDDED_WEB_UI 
+          ? null 
+          // @ts-expect-error - generated file at build time, esm modules imports are cached already
+           : await import("opencode-web-ui.gen.ts").then((module) => module.default as Record<string, string>).catch(() => null);
           const path = c.req.path
 
-          const response = await proxy(`https://app.opencode.ai${path}`, {
-            ...c.req,
-            headers: {
-              ...c.req.raw.headers,
-              host: "app.opencode.ai",
-            },
-          })
-          response.headers.set(
-            "Content-Security-Policy",
-            "default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; media-src 'self' data:; connect-src 'self' data:",
-          )
-          return response
+          if (embeddedWebUI) {
+            const match = embeddedWebUI[path.replace(/^\//, "")] ?? embeddedWebUI["index.html"] ?? null;
+            if (!match)  return c.json({ error: "Not Found" }, 404)
+            const file = Bun.file(match)
+            if (await file.exists()) {
+              c.header("Content-Type", file.type)
+              return c.body(await file.arrayBuffer())
+            } else {
+              return c.json({ error: "Not Found" }, 404)
+            }
+          } else {
+            const response = await proxy(`https://app.opencode.ai${path}`, {
+              ...c.req,
+              headers: {
+                ...c.req.raw.headers,
+                host: "app.opencode.ai",
+              },
+            })
+            response.headers.set(
+              "Content-Security-Policy",
+              "default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; media-src 'self' data:; connect-src 'self' data:",
+            )
+            return response
+          }
         }) as unknown as Hono,
   )