refactor: set web UI title from active server context, drop server-side rewrite

The previous approach rewrote <title> on the sidecar based on os.hostname()
or the request Host header, which on macOS often returns generic names like
"Mac.lan" instead of the SSH/displayName the user expects. The web app
already tracks the active ServerConnection — drive document.title from
server.name so it reflects displayName / configured connection name and
updates reactively when the user switches servers.

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

Author: 2 people

packages/app/src/app.tsx

@@ -14,6 +14,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"
 import { Effect } from "effect"
 import {
   type Component,
+  createEffect,
   createMemo,
   createResource,
   createSignal,
@@ -293,6 +294,15 @@ function ServerKey(props: ParentProps) {
   )
 }
 
+function DocumentTitle() {
+  const server = useServer()
+  createEffect(() => {
+    const name = server.name
+    document.title = name ? `${name} - OpenCode` : "OpenCode"
+  })
+  return null
+}
+
 export function AppInterface(props: {
   children?: JSX.Element
   defaultServer: ServerConnection.Key
@@ -306,6 +316,7 @@ export function AppInterface(props: {
       disableHealthCheck={props.disableHealthCheck}
       servers={props.servers}
     >
+      <DocumentTitle />
       <ConnectionGate disableHealthCheck={props.disableHealthCheck}>
         <ServerKey>
           <QueryProvider>

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

@@ -3,36 +3,10 @@ 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
@@ -96,13 +70,11 @@ function notFound() {
   return HttpServerResponse.jsonUnsafe({ error: "Not Found" }, { status: 404 })
 }
 
-function embeddedUIResponse(file: string, body: Uint8Array, name: string) {
+function embeddedUIResponse(file: string, body: Uint8Array) {
   const mime = AppFileSystem.mimeType(file)
   const headers = new Headers({ "content-type": mime })
   if (mime.startsWith("text/html")) {
-    const rewritten = rewriteTitle(new TextDecoder().decode(body), name)
-    headers.set("content-security-policy", cspForHtml(rewritten))
-    return HttpServerResponse.raw(new TextEncoder().encode(rewritten), { headers })
+    headers.set("content-security-policy", cspForHtml(new TextDecoder().decode(body)))
   }
   return HttpServerResponse.raw(body, { headers })
 }
@@ -111,15 +83,14 @@ 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, name)),
+    Effect.map((body) => embeddedUIResponse(resolved, body)),
     Effect.catchReason("PlatformError", "NotFound", () => Effect.succeed(notFound())),
   )
 }
@@ -128,14 +99,13 @@ 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, name)),
+    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, name)),
+        Effect.map((body) => embeddedUIResponse(path.join(dir, "index.html"), body)),
         Effect.catchReason("PlatformError", "NotFound", () => Effect.succeed(notFound())),
       ),
     ),
@@ -149,13 +119,11 @@ 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, name)
+    if (embeddedWebUI) return yield* serveEmbeddedUIEffect(requestPath, 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, name)
+    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(requestPath), {
@@ -166,7 +134,7 @@ export function serveUIEffect(
     const headers = proxyResponseHeaders(response.headers)
 
     if (response.headers["content-type"]?.includes("text/html")) {
-      const body = rewriteTitle(yield* response.text, name)
+      const body = yield* response.text
       headers.set("Content-Security-Policy", cspForHtml(body))
       return HttpServerResponse.text(body, { status: response.status, headers })
     }

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

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