feat: show server hostname in web UI title

Rewrites the served HTML <title> to "${hostname} - OpenCode" so the
browser tab identifies which machine the sidecar is running on. Falls
back to the request Host header's domain part when os.hostname() is
empty. Applies to embedded, dev-dir, and proxy serving paths.

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

Author: 2 people

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

@@ -3,10 +3,36 @@ import { Flag } from "@opencode-ai/core/flag/flag"
 import { Effect, Stream } from "effect"
 import { HttpBody, HttpClient, HttpClientRequest, HttpServerRequest, HttpServerResponse } from "effect/unstable/http"
 import { createHash } from "node:crypto"
+import os from "node:os"
 import path from "node:path"
 import { fileURLToPath } from "node:url"
 import { ProxyUtil } from "../proxy-util"
 
+const SERVER_HOSTNAME = (() => {
+  try {
+    return os.hostname().replace(/\.local$/i, "")
+  } catch {
+    return ""
+  }
+})()
+
+function serverDisplayName(request: HttpServerRequest.HttpServerRequest) {
+  if (SERVER_HOSTNAME) return SERVER_HOSTNAME
+  const host = request.headers["host"] ?? ""
+  return host.split(":")[0] ?? ""
+}
+
+function escapeHtml(value: string) {
+  return value.replace(/[&<>"']/g, (c) =>
+    c === "&" ? "&amp;" : c === "<" ? "&lt;" : c === ">" ? "&gt;" : c === '"' ? "&quot;" : "&#39;",
+  )
+}
+
+function rewriteTitle(html: string, name: string) {
+  if (!name) return html
+  return html.replace(/<title\b[^>]*>[\s\S]*?<\/title>/i, `<title>${escapeHtml(name)} - OpenCode</title>`)
+}
+
 const embeddedUIPromise = Flag.OPENCODE_DISABLE_EMBEDDED_WEB_UI
   ? Promise.resolve(null)
   : // @ts-expect-error - generated file at build time
@@ -70,11 +96,13 @@ function notFound() {
   return HttpServerResponse.jsonUnsafe({ error: "Not Found" }, { status: 404 })
 }
 
-function embeddedUIResponse(file: string, body: Uint8Array) {
+function embeddedUIResponse(file: string, body: Uint8Array, name: string) {
   const mime = AppFileSystem.mimeType(file)
   const headers = new Headers({ "content-type": mime })
   if (mime.startsWith("text/html")) {
-    headers.set("content-security-policy", cspForHtml(new TextDecoder().decode(body)))
+    const rewritten = rewriteTitle(new TextDecoder().decode(body), name)
+    headers.set("content-security-policy", cspForHtml(rewritten))
+    return HttpServerResponse.raw(new TextEncoder().encode(rewritten), { headers })
   }
   return HttpServerResponse.raw(body, { headers })
 }
@@ -83,14 +111,15 @@ export function serveEmbeddedUIEffect(
   requestPath: string,
   fs: AppFileSystem.Interface,
   embeddedWebUI: Record<string, string>,
+  name: string,
 ) {
   const file = embeddedWebUI[requestPath.replace(/^\//, "")] ?? embeddedWebUI["index.html"] ?? null
   if (!file) return Effect.succeed(notFound())
 
   const resolved = embeddedUIFile(file)
 
   return fs.readFile(resolved).pipe(
-    Effect.map((body) => embeddedUIResponse(resolved, body)),
+    Effect.map((body) => embeddedUIResponse(resolved, body, name)),
     Effect.catchReason("PlatformError", "NotFound", () => Effect.succeed(notFound())),
   )
 }
@@ -99,13 +128,14 @@ function serveLocalDirEffect(
   requestPath: string,
   fs: AppFileSystem.Interface,
   dir: string,
+  name: string,
 ) {
   const filePath = path.join(dir, requestPath === "/" ? "index.html" : requestPath)
   return fs.readFile(filePath).pipe(
-    Effect.map((body) => embeddedUIResponse(filePath, body)),
+    Effect.map((body) => embeddedUIResponse(filePath, body, name)),
     Effect.catchReason("PlatformError", "NotFound", () =>
       fs.readFile(path.join(dir, "index.html")).pipe(
-        Effect.map((body) => embeddedUIResponse(path.join(dir, "index.html"), body)),
+        Effect.map((body) => embeddedUIResponse(path.join(dir, "index.html"), body, name)),
         Effect.catchReason("PlatformError", "NotFound", () => Effect.succeed(notFound())),
       ),
     ),
@@ -119,11 +149,13 @@ export function serveUIEffect(
   return Effect.gen(function* () {
     const embeddedWebUI = yield* Effect.promise(() => embeddedUI())
     const requestPath = new URL(request.url, "http://localhost").pathname
+    const name = serverDisplayName(request)
 
-    if (embeddedWebUI) return yield* serveEmbeddedUIEffect(requestPath, services.fs, embeddedWebUI)
+    if (embeddedWebUI) return yield* serveEmbeddedUIEffect(requestPath, services.fs, embeddedWebUI, name)
 
     // 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)
+    if (Flag.OPENCODE_DEV_UI_DIR)
+      return yield* serveLocalDirEffect(requestPath, services.fs, Flag.OPENCODE_DEV_UI_DIR, name)
 
     const response = yield* services.client.execute(
       HttpClientRequest.make(request.method)(upstreamURL(requestPath), {
@@ -134,7 +166,7 @@ export function serveUIEffect(
     const headers = proxyResponseHeaders(response.headers)
 
     if (response.headers["content-type"]?.includes("text/html")) {
-      const body = yield* response.text
+      const body = rewriteTitle(yield* response.text, name)
       headers.set("Content-Security-Policy", cspForHtml(body))
       return HttpServerResponse.text(body, { status: response.status, headers })
     }

packages/opencode/test/server/httpapi-ui.test.ts

@@ -317,6 +317,7 @@ describe("HttpApi UI fallback", () => {
           },
         },
         { "assets/app.js": "/$bunfs/root/assets/app.js" },
+        "",
       ).pipe(Effect.map(HttpServerResponse.toWeb))
 
       expect(response.status).toBe(200)
@@ -346,6 +347,7 @@ describe("HttpApi UI fallback", () => {
           },
         },
         { "index.html": "/$bunfs/root/index.html" },
+        "",
       ).pipe(Effect.map(HttpServerResponse.toWeb))
 
       const csp = response.headers.get("content-security-policy") ?? ""