opencode-webui 2.2.0 → 2.4.0

package/dist/assets/{report-B9LU5-59.js → report-BQezg0ph.js}

@@ -1,2 +1,2 @@
-import{n as e,t}from"./index-DDE-utaG.js";var n=`report`,r=t(),{notify:i}=r,a=`AbdelftahZowail/opencode-webui`,o=10,s=window;function c(e){let t=s.__reportErrors??=[];t.push(e),t.length>o&&t.splice(0,t.length-o)}s.__reportErrorsInstalled||(s.__reportErrorsInstalled=!0,window.onerror=(e,t,n,r,i)=>{c({message:String(e).slice(0,500),source:t??``,line:n??0,stack:i instanceof Error?i.stack?.slice(0,500):void 0})},window.addEventListener(`unhandledrejection`,e=>{let t=e.reason;c({message:(t instanceof Error?t.message:String(t)).slice(0,500),source:`unhandledrejection`,line:0,stack:t instanceof Error?t.stack?.slice(0,500):void 0})}));async function l(e){try{let t=await fetch(e);return t.ok?await t.json():null}catch{return null}}async function u(t){let[n,r]=await Promise.all([l(`/api/webui/config`),l(`/api/webui/extensions`)]);return{url:location.href,userAgent:navigator.userAgent,language:navigator.language,viewport:`${window.innerWidth}x${window.innerHeight}`,version:n?.version??`unknown`,reportRepo:n?.reportRepo??a,builtins:e(),runtimeExtensions:(r?.data??[]).map(e=>e.id??``).filter(Boolean),errors:s.__reportErrors??[],sessionID:t,timestamp:new Date().toISOString()}}function d(e,t){let n=`WebUI bug: ${e?e.slice(0,80):`user report`}`,r=[`### What happened`,e||``,``,`### Steps to reproduce`,`1. `,``,`### Expected`,``,`### Actual`,``,`<details><summary>Diagnostics</summary>`,``,"```json",JSON.stringify(t,null,2),"```",`</details>`].join(`
+import{n as e,t}from"./index-DYfCCaPy.js";var n=`report`,r=t(),{notify:i}=r,a=`AbdelftahZowail/opencode-webui`,o=10,s=window;function c(e){let t=s.__reportErrors??=[];t.push(e),t.length>o&&t.splice(0,t.length-o)}s.__reportErrorsInstalled||(s.__reportErrorsInstalled=!0,window.onerror=(e,t,n,r,i)=>{c({message:String(e).slice(0,500),source:t??``,line:n??0,stack:i instanceof Error?i.stack?.slice(0,500):void 0})},window.addEventListener(`unhandledrejection`,e=>{let t=e.reason;c({message:(t instanceof Error?t.message:String(t)).slice(0,500),source:`unhandledrejection`,line:0,stack:t instanceof Error?t.stack?.slice(0,500):void 0})}));async function l(e){try{let t=await fetch(e);return t.ok?await t.json():null}catch{return null}}async function u(t){let[n,r]=await Promise.all([l(`/api/webui/config`),l(`/api/webui/extensions`)]);return{url:location.href,userAgent:navigator.userAgent,language:navigator.language,viewport:`${window.innerWidth}x${window.innerHeight}`,version:n?.version??`unknown`,reportRepo:n?.reportRepo??a,builtins:e(),runtimeExtensions:(r?.data??[]).map(e=>e.id??``).filter(Boolean),errors:s.__reportErrors??[],sessionID:t,timestamp:new Date().toISOString()}}function d(e,t){let n=`WebUI bug: ${e?e.slice(0,80):`user report`}`,r=[`### What happened`,e||``,``,`### Steps to reproduce`,`1. `,``,`### Expected`,``,`### Actual`,``,`<details><summary>Diagnostics</summary>`,``,"```json",JSON.stringify(t,null,2),"```",`</details>`].join(`
 `);return{title:n,body:r,url:`https://github.com/${t.reportRepo}/issues/new?title=${encodeURIComponent(n)}&body=${encodeURIComponent(r)}`}}async function f(e){try{return await navigator.clipboard.writeText(e),!0}catch{return!1}}async function p(e,t){let n=e.trim(),a=n.startsWith(`--agent`),o=a?n.replace(/^--agent\b/,``).trim():n,s=await u(t.sessionID??r.store.getState().currentSessionID??null),{title:c,body:l,url:p}=d(o,s);if(a){let e=`File a bug against ${s.reportRepo} using the gh CLI: create an issue with the title and body below, then reply with the issue URL. Do not include any private session content beyond the diagnostics JSON.\n\nTitle: ${c}\n\n${l}`,n=t.sessionID??r.store.getState().currentSessionID??null;if(n&&r.store.isDraftSession(n))try{n=await r.store.materializeDraft(``)}catch{n=null}if(!n){let t=await f(e);i({title:t?`No active session — report prompt copied`:`No active session`,description:t?`Paste it into a session to have the agent file the issue.`:`Could not copy the report prompt either.`,variant:t?`default`:`destructive`});return}i({title:`Report handed to the agent`,description:`It will file the issue and reply with the URL.`}),await r.store.sendPromptTo(n,e);return}if(window.open(p,`_blank`))i({title:`Opening GitHub issue…`});else{let e=await f(p);i({title:e?`Report ready — link copied`:`Report link`,description:e?`Popup blocked; paste the link in a browser.`:`Popup blocked and the clipboard is unavailable.`,variant:e?`default`:`destructive`})}}r.register({kind:`contribute`,id:`report`,collection:`slash`,item:{name:`report`,aliases:[`bug`],description:`Report a webui bug on GitHub — diag bundle prefilled`,run:p}});export{n as id};

package/dist/index.html

@@ -2,7 +2,7 @@
 <html lang="en" class="dark">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/svg+xml" href="/assets/opencode.svg" />
     <title>OpenCode Web</title>
     <!-- Shared-React import map: external extension bundles import the bare
@@ -19,8 +19,8 @@
         }
       }
     </script>
-    <script type="module" crossorigin src="/assets/index-DDE-utaG.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-d4KcyqrZ.css">
+    <script type="module" crossorigin src="/assets/index-DYfCCaPy.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Cn0VQKKh.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -3,7 +3,7 @@
   "description": "Web UI for the OpenCode coding agent — chat, streaming, tool cards, and extensions over the OpenCode engine's HTTP API.",
   "private": false,
   "type": "module",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "license": "MIT",
   "repository": {
     "type": "git",

package/server/auth.ts

@@ -10,10 +10,13 @@
  *   32-byte secret persisted at ~/.local/state/opencode-webui/secret.key
  *   (chmod 600) so sessions survive proxy restarts. No plaintext secret ever
  *   leaves this module, and no password or token is ever logged.
- * - DNS-rebinding: the Host header is validated on EVERY request (loopback
- *   names + the configured bind host, plus the reverse-proxy-forwarded
- *   X-Forwarded-Host when present). State-changing methods additionally get
- *   an Origin check: same-origin or no Origin (curl/scripts) passes.
+ * - DNS-rebinding: the Host header is validated on EVERY request against an
+ *   operator-controlled allowlist — loopback names and the configured bind
+ *   host always, plus WEBUI_ALLOWED_HOSTS (`"*"` accepts everything, loudly
+ *   logged). X-Forwarded-Host is honored only with WEBUI_TRUST_PROXY=1, so a
+ *   direct client can't spoof its Host through the guard. State-changing
+ *   methods additionally get an Origin check: same-origin or no Origin
+ *   (curl/scripts) passes.
  * - Login attempts are rate-limited per peer IP: 5 failures/min, then 429
  *   with Retry-After. A successful login clears the counter.
  *
@@ -326,24 +329,71 @@ function forbidden(reason: string): Response {
   return Response.json({ error: "forbidden", reason }, { status: 403 });
 }
 
+/**
+ * Who may reach this proxy, stated by the operator — not hardcoded.
+ *
+ * WEBUI_ALLOWED_HOSTS is a comma-separated list of extra hostnames/IPs the
+ * Host-header guard accepts (ports are ignored, matching is case-insensitive).
+ * `"*"` accepts everything: explicit, logged at boot, your responsibility.
+ * Loopback names and the configured bind host are always allowed on top.
+ */
+export interface AllowedHosts {
+  /** Normalized entries from WEBUI_ALLOWED_HOSTS (lowercased, no ports). */
+  entries: string[];
+  /** True when the list contains "*". */
+  acceptAll: boolean;
+}
+
+export function resolveAllowedHosts(): AllowedHosts {
+  const entries = (process.env.WEBUI_ALLOWED_HOSTS ?? "")
+    .split(",")
+    .map((s) => hostnameOf(s.trim()))
+    .filter((s) => s.length > 0);
+  return { entries, acceptAll: entries.includes("*") };
+}
+
+export function isHostAllowed(hostname: string, configuredHost: string, allowed: AllowedHosts): boolean {
+  if (isLoopbackHostname(hostname)) return true;
+  if (hostname === hostnameOf(configuredHost)) return true;
+  if (allowed.acceptAll) return true;
+  return allowed.entries.includes(hostname);
+}
+
+/**
+ * Only honor X-Forwarded-Host / X-Forwarded-Proto when the operator says a
+ * trusted reverse proxy is in front (WEBUI_TRUST_PROXY=1). Honoring them
+ * unconditionally lets any direct client spoof its Host straight through
+ * the guard above.
+ */
+export function trustProxy(): boolean {
+  return process.env.WEBUI_TRUST_PROXY === "1";
+}
+
 /**
  * Runs before EVERY route (login included). Returns a 403 Response to reject,
- * or null to continue. X-Forwarded-Host (when present, e.g. behind a reverse
- * proxy) names the public host and is allowed; otherwise the Host header must
- * be a loopback name or the configured bind host — anything else is exactly
- * what a DNS-rebinding attack looks like.
+ * or null to continue. With WEBUI_TRUST_PROXY=1, X-Forwarded-Host (set by
+ * your reverse proxy) names the public host and is allowed; otherwise the
+ * Host header must be a loopback name, the configured bind host, or a
+ * WEBUI_ALLOWED_HOSTS entry — anything else is exactly what a DNS-rebinding
+ * attack looks like.
  */
-export function guardRequest(req: Request, configuredHost: string): Response | null {
-  const forwardedHost = firstHeaderValue(req, "x-forwarded-host");
+export function guardRequest(
+  req: Request,
+  configuredHost: string,
+  allowed: AllowedHosts = resolveAllowedHosts(),
+): Response | null {
+  const forwardedHost = trustProxy() ? firstHeaderValue(req, "x-forwarded-host") : undefined;
   const hostHeader = req.headers.get("host") ?? "";
   const effectiveHost = forwardedHost ?? hostHeader;
   if (!effectiveHost) return forbidden("missing host header");
 
   if (!forwardedHost) {
     const hostname = hostnameOf(hostHeader);
-    const allowed =
-      isLoopbackHostname(hostname) || hostname === hostnameOf(configuredHost);
-    if (!allowed) return forbidden("untrusted host header");
+    if (!isHostAllowed(hostname, configuredHost, allowed)) {
+      return forbidden(
+        `untrusted host header ${JSON.stringify(hostname)} — add it to WEBUI_ALLOWED_HOSTS (comma-separated, "*" accepts all)`,
+      );
+    }
   }
 
   const method = req.method;

package/server/index.ts

@@ -29,12 +29,15 @@ import {
   SANDBOX,
   guardRequest,
   handleLogin,
+  hostnameOf,
   isAuthed,
   isLoopbackHostname,
+  isWildcardHostname,
   loadSecret,
   loginPageResponse,
   logoutResponse,
   peerIP,
+  resolveAllowedHosts,
   resolveAuthPolicy,
   unauthorizedResponse,
 } from "./auth";
@@ -674,6 +677,9 @@ if (process.argv.includes("--install-skill")) {
 
 // Exits with a clear message when a wildcard bind has no WEBUI_PASSWORD.
 const AUTH = resolveAuthPolicy(HOST);
+// Operator-controlled Host allowlist (WEBUI_ALLOWED_HOSTS) — resolved once,
+// consulted on every request by guardRequest below.
+const ALLOWED_HOSTS = resolveAllowedHosts();
 const SECRET = loadSecret();
 const SKILL = await syncSkill(); // best-effort — never blocks the banner below it
 
@@ -715,7 +721,7 @@ const server: Server<Record<string, unknown>> = Bun.serve({
     const path = url.pathname;
 
     // DNS-rebinding + cross-origin guard — before ANY route, login included.
-    const guarded = guardRequest(req, HOST);
+    const guarded = guardRequest(req, HOST, ALLOWED_HOSTS);
     if (guarded) return guarded;
 
     // The unauthenticated surface: login page, login POST, logout.
@@ -1043,6 +1049,21 @@ const server: Server<Record<string, unknown>> = Bun.serve({
   },
 });
 
+// Operator-visible access summary: who the Host guard lets in, so a 403 is
+// never a mystery. Loopback + bind host are always allowed; the rest comes
+// from WEBUI_ALLOWED_HOSTS.
+function describeHosts(): string {
+  const parts = ["localhost (loopback always allowed)"];
+  const bind = hostnameOf(HOST);
+  if (isWildcardHostname(bind)) parts.push(`${HOST} (all interfaces — Host header still checked)`);
+  else if (!isLoopbackHostname(bind)) parts.push(bind);
+  for (const e of ALLOWED_HOSTS.entries) {
+    if (e === "*") parts.push("ANY host (WEBUI_ALLOWED_HOSTS=*)");
+    else if (!parts.includes(e)) parts.push(e);
+  }
+  return parts.join(", ");
+}
+
 // First-boot banner — the entire onboarding. The generated password is
 // printed exactly once and never logged anywhere else.
 const displayHost = isLoopbackHostname(HOST === "localhost" ? "localhost" : HOST) ? "localhost" : HOST;
@@ -1052,6 +1073,7 @@ console.log(
     SANDBOX()
       ? `[webui] sandbox — loopback only, NO password; extensions (scratch): ${globalUserExtensionsDir()}`
       : `[webui] password: ${AUTH.generated ?? "from WEBUI_PASSWORD"}`,
+    `[webui] hosts: ${describeHosts()}`,
     `[webui] same sessions as your opencode TUI — it's the same engine`,
     `[webui] extensions: drop folders in ${globalUserExtensionsDir()}/<name>/ (index.tsx + manifest.json)`,
     SKILL.ok

package/skills/webui/SKILL.md

@@ -11,7 +11,7 @@ service credentials. One port for UI + `/api/*`: http://localhost:4097
 (`WEBUI_PROXY_PORT`).
 
 - **Repo**: https://github.com/AbdelftahZowail/opencode-webui
-- **This skill's version**: 2.2.0 (matches the `v2.2.0` git tag —
+- **This skill's version**: 2.4.0 (matches the `v2.4.0` git tag —
   the file links below are pinned to it, so they always describe the code
   this skill was generated with)
 - **A running instance exposes its version** at `GET /api/webui/config` →
@@ -24,13 +24,13 @@ fetch the exact file at the pinned tag instead of reading a local clone:
 
 | File | Purpose |
 | --- | --- |
-| https://raw.githubusercontent.com/AbdelftahZowail/opencode-webui/v2.2.0/webui-extensions/README.md | Full authoring guide — the source of truth for strata/kinds/hooks/anchors |
-| https://raw.githubusercontent.com/AbdelftahZowail/opencode-webui/v2.2.0/src/extensions/registry.tsx | The extension registry — exact register() shapes per kind |
-| https://raw.githubusercontent.com/AbdelftahZowail/opencode-webui/v2.2.0/src/extensions/hooks.ts | Shared fireHooks runner — how open hook events fire |
-| https://raw.githubusercontent.com/AbdelftahZowail/opencode-webui/v2.2.0/src/lib/domKit.ts | DOM-stratum kit (foreign/watch/styles) + the data-oc-* anchor table |
-| https://raw.githubusercontent.com/AbdelftahZowail/opencode-webui/v2.2.0/server/ext/types.ts | Proxy-stratum types — server.ts routes/middleware/onEvent/pollers shapes |
-| https://raw.githubusercontent.com/AbdelftahZowail/opencode-webui/v2.2.0/docs/extension-system-spec.md | The v2 decision record — strata, precedence, deletions, acceptance checks |
-| https://raw.githubusercontent.com/AbdelftahZowail/opencode-webui/v2.2.0/src/store.ts | The store — actions useStore exposes to extensions |
+| https://raw.githubusercontent.com/AbdelftahZowail/opencode-webui/v2.4.0/webui-extensions/README.md | Full authoring guide — the source of truth for strata/kinds/hooks/anchors |
+| https://raw.githubusercontent.com/AbdelftahZowail/opencode-webui/v2.4.0/src/extensions/registry.tsx | The extension registry — exact register() shapes per kind |
+| https://raw.githubusercontent.com/AbdelftahZowail/opencode-webui/v2.4.0/src/extensions/hooks.ts | Shared fireHooks runner — how open hook events fire |
+| https://raw.githubusercontent.com/AbdelftahZowail/opencode-webui/v2.4.0/src/lib/domKit.ts | DOM-stratum kit (foreign/watch/styles) + the data-oc-* anchor table |
+| https://raw.githubusercontent.com/AbdelftahZowail/opencode-webui/v2.4.0/server/ext/types.ts | Proxy-stratum types — server.ts routes/middleware/onEvent/pollers shapes |
+| https://raw.githubusercontent.com/AbdelftahZowail/opencode-webui/v2.4.0/docs/extension-system-spec.md | The v2 decision record — strata, precedence, deletions, acceptance checks |
+| https://raw.githubusercontent.com/AbdelftahZowail/opencode-webui/v2.4.0/src/store.ts | The store — actions useStore exposes to extensions |
 
 ## Environment
 

package/webui-extensions/README.md

@@ -98,7 +98,7 @@ with rich props, so wraps and value-overrides stay surgical.
 | `message.copyButton` | `variant: "user" \| "assistant"`, `text` |
 | `message:<type>` / `message:*` | replace-with-fall-through per message type |
 | `tool.card` | `part: ToolPart`, `stateKey?` |
-| `tool.edit` / `write` / `shell` / `subagent` / `execute` / `generic` | per-tool view props |
+| `tool.edit` / `write` / `shell` / `subagent` / `execute` / `read` / `generic` | per-tool view props |
 | `tool:<name>` | replace-with-fall-through per tool name |
 
 Persisted-vs-live guarantee (streaming authors depend on this): persisted