feat: serve web locally

Author: proAlexandr

bun.lock

@@ -4,7 +4,7 @@
   "description": "AI-powered development tool",
   "private": true,
   "type": "module",
-  "packageManager": "bun@1.3.5",
+  "packageManager": "bun@1.3.6",
   "scripts": {
     "dev": "bun run --cwd packages/opencode --conditions=browser src/index.ts",
     "typecheck": "bun turbo typecheck",
@@ -21,7 +21,7 @@
       "packages/slack"
     ],
     "catalog": {
-      "@types/bun": "1.3.5",
+      "@types/bun": "1.3.6",
       "@octokit/rest": "22.0.0",
       "@hono/zod-validator": "0.4.2",
       "ulid": "3.0.1",

package.json

@@ -5,6 +5,7 @@ import path from "path"
 import fs from "fs"
 import { $ } from "bun"
 import { fileURLToPath } from "url"
+import { readdir } from "node:fs/promises"
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -137,6 +138,52 @@ for (const item of targets) {
   const bunfsRoot = item.os === "win32" ? "B:/~BUN/root/" : "/$bunfs/root/"
   const workerRelativePath = path.relative(dir, parserWorker).replaceAll("\\", "/")
 
+  await Bun.spawn(["bun", "run", "build"], {
+    cwd: "../app",
+    stdout: "inherit",
+    stderr: "inherit",
+  }).exited
+
+  const files = await readdir("../app/dist", { recursive: true, withFileTypes: true })
+  let importFilesScriptPart = ""
+  let routesScriptPart = ""
+  for (let i = 0; i < files.length; ++i) {
+    const file = files[i]
+    if (file.isFile()) {
+      const serveBlob = file.name.endsWith(".woff") || file.name.endsWith(".woff2")
+      const path = file.parentPath + "/" + file.name
+      const route = path.substring(11) // cut ../app/dist
+      let header = ""
+      if (file.name.endsWith(".js")) {
+        header = ", jsHeader"
+      }
+      if (file.name.endsWith(".css")) {
+        header = ", cssHeader"
+      }
+      if (serveBlob) {
+        importFilesScriptPart += `import file${i} from '${path}'\n`
+        routesScriptPart += `'${route}': new Response(Bun.file(file${i})),\n`
+      } else {
+        importFilesScriptPart += `import file${i} from '${path}' with { type: 'text' }\n`
+        routesScriptPart += `'${route}': new Response(file${i}${header}),\n`
+      }
+    }
+  }
+
+  const serveWebScript = `
+    import indexFile from '../app/dist/index.html' with { type: 'text' }
+    ${importFilesScriptPart}
+
+    const httpHeader = { headers: { 'Content-Type': 'text/html;charset=utf-8'}}
+    const jsHeader = { headers: { 'Content-Type': 'text/javascript;charset=utf-8'}}
+    const cssHeader = { headers: { 'Content-Type': 'text/css;charset=utf-8'}}
+    
+    export const embeddedFiles = {
+      '/': new Response(indexFile, httpHeader),
+      ${routesScriptPart}
+    } as Record<string, Response>
+  `
+
   await Bun.build({
     conditions: ["browser"],
     tsconfig: "./tsconfig.json",
@@ -153,6 +200,9 @@ for (const item of targets) {
       execArgv: [`--user-agent=opencode/${Script.version}`, "--use-system-ca", "--"],
       windows: {},
     },
+    files: {
+      "./src/serveWeb.ts": serveWebScript,
+    },
     entrypoints: ["./src/index.ts", parserWorker, workerPath],
     define: {
       OPENCODE_VERSION: `'${Script.version}'`,

packages/opencode/script/build.ts

@@ -27,6 +27,9 @@ import { WebCommand } from "./cli/cmd/web"
 import { PrCommand } from "./cli/cmd/pr"
 import { SessionCommand } from "./cli/cmd/session"
 
+// Embedded web files are now served directly from the main server
+// No need to start a separate server on port 3000
+
 process.on("unhandledRejection", (e) => {
   Log.Default.error("rejection", {
     e: e instanceof Error ? e.message : e,

packages/opencode/src/index.ts

@@ -530,6 +530,38 @@ export namespace Server {
         .all("/*", async (c) => {
           const path = c.req.path
 
+          // Try to serve from embedded files if available (compiled binary)
+          const isInsideBunBinary = typeof OPENCODE_VERSION === "string"
+          if (isInsideBunBinary) {
+            try {
+              // @ts-ignore - embedded file is generated at build time
+              const { embeddedFiles } = await import("./src/serveWeb.ts")
+
+              // Check for exact match
+              if (embeddedFiles[path]) {
+                const response = embeddedFiles[path].clone()
+                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
+              }
+
+              // SPA fallback: serve index.html for routes without extensions
+              if (!path.includes(".") && path !== "/" && embeddedFiles["/"]) {
+                const response = embeddedFiles["/"].clone()
+                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
+              }
+            } catch (e) {
+              // Embedded files not available, fall through to proxy
+            }
+          }
+
+          // Fall back to proxying app.opencode.ai (for development)
           const response = await proxy(`https://app.opencode.ai${path}`, {
             ...c.req,
             headers: {