feat: serve local web UI in dev mode, suppress auth dialog

- Use Bearer WWW-Authenticate scheme so browsers don't pop a native
  credentials dialog on 401 (Chrome/Firefox do this for Basic but not Bearer).
  The server still accepts Authorization: Basic from the desktop app.
- Add OPENCODE_DEV_UI_DIR flag: when set, the server serves static files
  from that directory (SPA fallback to index.html) instead of proxying
  to app.opencode.ai.
- In desktop dev mode (!app.isPackaged), automatically set OPENCODE_DEV_UI_DIR
  to packages/app/dist so remote browsers see the local build.
- Add OPENCODE_DEV_UI_URL flag to override the upstream proxy base URL.
- Fix variable shadowing: rename path→requestPath in serveUIEffect to avoid
  conflict with the `import path from "node:path"` added in a prior commit.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: 2 people

packages/core/src/flag/flag.ts

@@ -77,6 +77,8 @@ export const Flag = {
   OPENCODE_MODELS_URL: process.env["OPENCODE_MODELS_URL"],
   OPENCODE_MODELS_PATH: process.env["OPENCODE_MODELS_PATH"],
   OPENCODE_DISABLE_EMBEDDED_WEB_UI: truthy("OPENCODE_DISABLE_EMBEDDED_WEB_UI"),
+  OPENCODE_DEV_UI_URL: process.env["OPENCODE_DEV_UI_URL"],
+  OPENCODE_DEV_UI_DIR: process.env["OPENCODE_DEV_UI_DIR"],
   OPENCODE_DB: process.env["OPENCODE_DB"],
   OPENCODE_DISABLE_CHANNEL_DB: truthy("OPENCODE_DISABLE_CHANNEL_DB"),
   OPENCODE_SKIP_MIGRATIONS: truthy("OPENCODE_SKIP_MIGRATIONS"),

packages/desktop/src/main/server.ts

@@ -100,6 +100,9 @@ export function preferAppEnv(userDataPath: string) {
     OPENCODE_EXPERIMENTAL_FILEWATCHER: "true",
     OPENCODE_CLIENT: "desktop",
     XDG_STATE_HOME: process.env.XDG_STATE_HOME ?? userDataPath,
+    // In dev mode, serve the web UI from the local build output so remote
+    // browsers see the current local build instead of app.opencode.ai.
+    ...(!app.isPackaged ? { OPENCODE_DEV_UI_DIR: join(dirname(fileURLToPath(import.meta.url)), "../../../app/dist") } : {}),
   })
 }
 

packages/opencode/src/server/routes/instance/httpapi/middleware/authorization.ts

@@ -7,7 +7,9 @@ import { isPublicUIPath } from "@/server/shared/public-ui"
 
 const AUTH_TOKEN_QUERY = "auth_token"
 const UNAUTHORIZED = 401
-const WWW_AUTHENTICATE = 'Basic realm="Secure Area"'
+// Use Bearer scheme so browsers don't show a native auth dialog on 401.
+// The server still accepts Authorization: Basic credentials from the app.
+const WWW_AUTHENTICATE = 'Bearer realm="Secure Area"'
 
 // Avoid HttpApiSecurity alternatives here: Effect security middleware wraps the
 // full handler, so a downstream failure can make the next auth alternative run

packages/opencode/src/server/shared/ui.ts

@@ -17,7 +17,7 @@ const embeddedUIPromise = Flag.OPENCODE_DISABLE_EMBEDDED_WEB_UI
         return null
       })
 
-export const UI_UPSTREAM = new URL("https://app.opencode.ai")
+export const UI_UPSTREAM = new URL(Flag.OPENCODE_DEV_UI_URL ?? "https://app.opencode.ai")
 
 export const csp = (hash = "") =>
   `default-src 'self'; script-src 'self' 'wasm-unsafe-eval'${hash ? ` 'sha256-${hash}'` : ""}; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; media-src 'self' data:; connect-src * data:`
@@ -95,18 +95,38 @@ export function serveEmbeddedUIEffect(
   )
 }
 
+function serveLocalDirEffect(
+  requestPath: string,
+  fs: AppFileSystem.Interface,
+  dir: string,
+) {
+  const filePath = path.join(dir, requestPath === "/" ? "index.html" : requestPath)
+  return fs.readFile(filePath).pipe(
+    Effect.map((body) => embeddedUIResponse(filePath, body)),
+    Effect.catchReason("PlatformError", "NotFound", () =>
+      fs.readFile(path.join(dir, "index.html")).pipe(
+        Effect.map((body) => embeddedUIResponse(path.join(dir, "index.html"), body)),
+        Effect.catchReason("PlatformError", "NotFound", () => Effect.succeed(notFound())),
+      ),
+    ),
+  )
+}
+
 export function serveUIEffect(
   request: HttpServerRequest.HttpServerRequest,
   services: { fs: AppFileSystem.Interface; client: HttpClient.HttpClient },
 ) {
   return Effect.gen(function* () {
     const embeddedWebUI = yield* Effect.promise(() => embeddedUI())
-    const path = new URL(request.url, "http://localhost").pathname
+    const requestPath = new URL(request.url, "http://localhost").pathname
+
+    if (embeddedWebUI) return yield* serveEmbeddedUIEffect(requestPath, services.fs, embeddedWebUI)
 
-    if (embeddedWebUI) return yield* serveEmbeddedUIEffect(path, services.fs, embeddedWebUI)
+    // Dev mode: serve from local build directory if configured
+    if (Flag.OPENCODE_DEV_UI_DIR) return yield* serveLocalDirEffect(requestPath, services.fs, Flag.OPENCODE_DEV_UI_DIR)
 
     const response = yield* services.client.execute(
-      HttpClientRequest.make(request.method)(upstreamURL(path), {
+      HttpClientRequest.make(request.method)(upstreamURL(requestPath), {
         headers: ProxyUtil.headers(request.headers, { host: UI_UPSTREAM.host }),
         body: requestBody(request),
       }),