npm - opencode-webui - Versions diffs - 2.4.0 → 3.0.1 - Mend

opencode-webui 2.4.0 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/README.md +76 -8
package/dist/assets/TerminalView-46ee1Rko.js +18 -0
package/dist/assets/TerminalView-BrP-ENHg.css +1 -0
package/dist/assets/client-DkhM26jE.js +2 -0
package/dist/assets/index-BpbA074E.css +2 -0
package/dist/assets/index-NnlYGssZ.js +113 -0
package/dist/assets/report-D38Le2zy.js +2 -0
package/dist/icons/apple-touch-icon.png +0 -0
package/dist/icons/badge-96.png +0 -0
package/dist/icons/icon-192.png +0 -0
package/dist/icons/icon-512.png +0 -0
package/dist/icons/maskable-512.png +0 -0
package/dist/index.html +10 -3
package/dist/manifest.webmanifest +1 -0
package/dist/sw.js +143 -0
package/package.json +4 -1
package/server/auth.ts +39 -22
package/server/config.ts +498 -0
package/server/index.ts +500 -36
package/server/lifecyclePlugin.ts +118 -0
package/server/setup.ts +774 -0
package/server/userExtensions.ts +198 -5
package/skills/webui/SKILL.md +59 -12
package/webui-extensions/README.md +255 -17
package/dist/assets/index-Cn0VQKKh.css +0 -1
package/dist/assets/index-DYfCCaPy.js +0 -128
package/dist/assets/report-BQezg0ph.js +0 -2

package/dist/assets/report-D38Le2zy.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{c as e}from"./client-DkhM26jE.js";import{t}from"./index-NnlYGssZ.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(`
2	+ `);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.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.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/icons/apple-touch-icon.png ADDED Viewed

Binary file

package/dist/icons/badge-96.png ADDED Viewed

Binary file

package/dist/icons/icon-192.png ADDED Viewed

Binary file

package/dist/icons/icon-512.png ADDED Viewed

Binary file

package/dist/icons/maskable-512.png ADDED Viewed

Binary file

package/dist/index.html CHANGED Viewed

@@ -2,8 +2,14 @@
 <html lang="en" class="dark">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content" />
+    <meta name="theme-color" content="#0b0d10" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <link rel="manifest" href="/manifest.webmanifest" />
     <link rel="icon" type="image/svg+xml" href="/assets/opencode.svg" />
+    <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
     <title>OpenCode Web</title>
     <!-- Shared-React import map: external extension bundles import the bare
       specifiers below (Bun.build `external`, server/index.ts) and resolve
@@ -19,8 +25,9 @@
         }
       }
     </script>
-    <script type="module" crossorigin src="/assets/index-DYfCCaPy.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Cn0VQKKh.css">
+    <script type="module" crossorigin src="/assets/index-NnlYGssZ.js"></script>
+    <link rel="modulepreload" crossorigin href="/assets/client-DkhM26jE.js">
+    <link rel="stylesheet" crossorigin href="/assets/index-BpbA074E.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/manifest.webmanifest ADDED Viewed

@@ -0,0 +1 @@

+ {"background_color":"#0b0d10","description":"Chat, streaming, tool cards, and extensions over your opencode engine.","display":"standalone","icons":[{"sizes":"192x192","src":"/icons/icon-192.png","type":"image/png"},{"sizes":"512x512","src":"/icons/icon-512.png","type":"image/png"},{"purpose":"maskable","sizes":"512x512","src":"/icons/maskable-512.png","type":"image/png"}],"id":"/","name":"opencode webui","scope":"/","short_name":"opencode","start_url":"/","theme_color":"#0b0d10"}

package/dist/sw.js ADDED Viewed

@@ -0,0 +1,143 @@
+/* opencode-webui service worker: app-shell caching + live activity tile.
+ *
+ * - Navigations: network-first (updates always flow), cache fallback offline.
+ * - Hashed /assets/* (immutable build output): cache-first.
+ * - Everything else, in particular /api/* (SSE streams): never intercepted.
+ * - Live tile: the page posts {type:"webui.tile",...} snapshots; the SW owns
+ *   one silent, pinned notification. A watchdog closes it if the page stops
+ *   reporting (dead tab must not leave a stale pinned tile).
+ */
+const TILE_TAG = "webui-activity";
+const ASSET_CACHE = "webui-assets-v1";
+const PAGE_CACHE = "webui-pages-v1";
+const TILE_WATCHDOG_MS = 30_000;
+let tileWatchdog = 0;
+self.addEventListener("install", (event) => {
+  event.waitUntil(self.skipWaiting());
+});
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    (async () => {
+      const keys = await caches.keys();
+      await Promise.all(
+        keys.filter((k) => k !== ASSET_CACHE && k !== PAGE_CACHE).map((k) => caches.delete(k)),
+      );
+      await self.clients.claim();
+    })(),
+  );
+});
+function isHashedAsset(url) {
+  return url.origin === self.location.origin && /\/assets\/[^/]+-[A-Za-z0-9_-]{8}\.[a-z0-9]+$/.test(url.pathname);
+}
+self.addEventListener("fetch", (event) => {
+  const { request } = event;
+  if (request.method !== "GET") return;
+  const url = new URL(request.url);
+  if (url.origin !== self.location.origin) return;
+  if (url.pathname.startsWith("/api/")) return; // streams + JSON: network only
+  if (request.mode === "navigate") {
+    event.respondWith(
+      (async () => {
+        try {
+          const fresh = await fetch(request);
+          const cache = await caches.open(PAGE_CACHE);
+          cache.put(request, fresh.clone());
+          return fresh;
+        } catch {
+          const cached = await caches.match(request);
+          if (cached) return cached;
+          const index = await caches.match("/index.html");
+          if (index) return index;
+          throw new Error("offline");
+        }
+      })(),
+    );
+    return;
+  }
+  if (isHashedAsset(url)) {
+    event.respondWith(
+      (async () => {
+        const cached = await caches.match(request);
+        if (cached) return cached;
+        const fresh = await fetch(request);
+        const cache = await caches.open(ASSET_CACHE);
+        cache.put(request, fresh.clone());
+        return fresh;
+      })(),
+    );
+  }
+});
+async function closeTile() {
+  const notes = await self.registration.getNotifications({ tag: TILE_TAG });
+  await Promise.all(notes.map((n) => n.close()));
+  if (tileWatchdog) {
+    clearTimeout(tileWatchdog);
+    tileWatchdog = 0;
+  }
+}
+self.addEventListener("message", (event) => {
+  const msg = event.data;
+  if (!msg || typeof msg.type !== "string") return;
+  if (msg.type === "webui.tile.clear") {
+    event.waitUntil(closeTile());
+    return;
+  }
+  if (msg.type !== "webui.tile") return;
+  const { title, body, url } = msg;
+  if (typeof title !== "string" || typeof body !== "string") return;
+  event.waitUntil(
+    (async () => {
+      await self.registration.showNotification(title, {
+        tag: TILE_TAG,
+        body,
+        silent: true,
+        ongoing: true,
+        renotify: false,
+        icon: "/icons/icon-192.png",
+        // Small (status-bar) icon on Android: a MONOCHROME silhouette on a
+        // transparent background. Chrome tints the alpha, so the old full-color
+        // 192px icon rendered as a solid white square.
+        badge: "/icons/badge-96.png",
+        timestamp: Date.now(),
+        data: { url: typeof url === "string" ? url : "/" },
+      });
+      if (tileWatchdog) clearTimeout(tileWatchdog);
+      tileWatchdog = setTimeout(() => {
+        tileWatchdog = 0;
+        void closeTile();
+      }, TILE_WATCHDOG_MS);
+    })(),
+  );
+});
+self.addEventListener("notificationclick", (event) => {
+  event.notification.close();
+  const target = (event.notification.data && event.notification.data.url) || "/";
+  const absolute = new URL(target, self.location.origin).href;
+  event.waitUntil(
+    (async () => {
+      const windows = await self.clients.matchAll({ type: "window", includeUncontrolled: true });
+      for (const win of windows) {
+        try {
+          if (new URL(win.url).origin === self.location.origin) {
+            await win.navigate(absolute);
+            return win.focus();
+          }
+        } catch {
+          /* cross-origin client — skip */
+        }
+      }
+      return self.clients.openWindow(absolute);
+    })(),
+  );
+});

package/package.json CHANGED Viewed

@@ -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.4.0",
+  "version": "3.0.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -38,6 +38,9 @@
     "typecheck": "tsc --noEmit",
     "gen:skill": "bun run scripts/gen-skill.ts",
     "check:ext": "bun run scripts/check-ext.ts",
+    "check:setup": "bun run scripts/uitest/setup-check.ts",
+    "check:setup:engine": "bun run scripts/uitest/setup-engine-check.ts",
+    "check:config": "bun run scripts/uitest/config-check.ts",
     "check:swap": "bun run scripts/uitest/swap-ready.ts",
     "prepublishOnly": "bun run typecheck && bun run gen:skill && bun run build"
   },

package/server/auth.ts CHANGED Viewed

@@ -93,22 +93,30 @@ export function loadSecret(): Buffer {
 export type AuthPolicy = {
   /** SHA-256 digest of the effective password — the ONLY thing kept. */
   digest: Buffer;
+  /** `"none"` = no login at all (sandbox, or auth:none in config). */
+  mode: "password" | "none";
   /** Set when the password was generated here (printed once, then forgotten). */
   generated?: string;
+  /** Where the effective credential came from (for the boot banner/UI). */
+  source?: "env" | "config" | "generated";
 };
+/** Effective credential resolution handed in by server/config.ts. */
+export type AuthInput =
+  | { mode: "none" }
+  | { mode: "password"; plaintext?: string; hash?: string };
 /**
- * Resolve the password policy at boot. WEBUI_PASSWORD wins; on a wildcard
- * bind with none set we REFUSE to start rather than expose an unauthenticated
- * proxy to the network. Loopback binds get a generated passphrase that is
- * GENERATED ONCE and then persisted (0600) next to the HMAC secret, so
- * restarts keep working without a new password to hunt for in logs.
+ * Resolve the auth policy at boot. Precedence: `WEBUI_PASSWORD` env > config
+ * `passwordHash` > a generated passphrase persisted (0600) next to the HMAC
+ * secret, so restarts keep working without a new password to hunt for.
+ *
+ * Authentication is OPTIONAL (`auth: "none"`, or sandbox mode): we no longer
+ * refuse a reachable bind, because the user may deliberately front it with
+ * Tailscale/a private network. We do warn loudly — the Settings UI surfaces the
+ * same exposure analysis. Sandbox remains loopback-only and IS refused off it.
  */
-export function resolveAuthPolicy(host: string): AuthPolicy {
-  const fromEnv = process.env.WEBUI_PASSWORD;
-  if (fromEnv && fromEnv.length > 0) {
-    return { digest: createHash("sha256").update(fromEnv, "utf8").digest() };
-  }
+export function resolveAuthPolicy(host: string, input: AuthInput = { mode: "password" }): AuthPolicy {
   if (process.env.WEBUI_SANDBOX === "1") {
     // Sandbox mode: loopback-only, no password. The bind address is the
     // guarantee — a non-loopback sandbox is a misconfiguration, refuse it.
@@ -116,14 +124,25 @@ export function resolveAuthPolicy(host: string): AuthPolicy {
       console.error(`[webui] sandbox requires a loopback bind — refusing ${host}`);
       process.exit(1);
     }
-    return { digest: Buffer.alloc(0) };
+    return { digest: Buffer.alloc(0), mode: "none" };
+  }
+  if (input.mode === "none") {
+    const bind = hostnameOf(host);
+    if (isWildcardHostname(bind) || !isLoopbackHostname(bind)) {
+      console.warn(
+        `[webui] WARNING: authentication is OFF and this instance is reachable on ${host} — anyone who can reach the port has full access`,
+      );
+    }
+    return { digest: Buffer.alloc(0), mode: "none" };
+  }
+  if (input.plaintext !== undefined && input.plaintext.length > 0) {
+    return { digest: createHash("sha256").update(input.plaintext, "utf8").digest(), mode: "password", source: "env" };
   }
-  if (isWildcardHostname(hostnameOf(host))) {
-    console.error(`[webui] refusing ${host} without WEBUI_PASSWORD — set it or keep the loopback bind`);
-    process.exit(1);
+  if (input.hash !== undefined && /^[0-9a-f]{64}$/i.test(input.hash)) {
+    return { digest: Buffer.from(input.hash, "hex"), mode: "password", source: "config" };
   }
   const generated = loadOrGeneratePassword();
-  return { digest: createHash("sha256").update(generated, "utf8").digest(), generated };
+  return { digest: createHash("sha256").update(generated, "utf8").digest(), mode: "password", generated, source: "generated" };
 }
 /** State dir shared with the HMAC secret (created by loadSecret). */
@@ -344,12 +363,9 @@ export interface AllowedHosts {
   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 resolveAllowedHosts(entries: string[] = []): AllowedHosts {
+  const normalized = entries.map((s) => hostnameOf(s.trim())).filter((s) => s.length > 0);
+  return { entries: normalized, acceptAll: normalized.includes("*") };
 }
 export function isHostAllowed(hostname: string, configuredHost: string, allowed: AllowedHosts): boolean {
@@ -381,8 +397,9 @@ export function guardRequest(
   req: Request,
   configuredHost: string,
   allowed: AllowedHosts = resolveAllowedHosts(),
+  trust = trustProxy(),
 ): Response | null {
-  const forwardedHost = trustProxy() ? firstHeaderValue(req, "x-forwarded-host") : undefined;
+  const forwardedHost = trust ? firstHeaderValue(req, "x-forwarded-host") : undefined;
   const hostHeader = req.headers.get("host") ?? "";
   const effectiveHost = forwardedHost ?? hostHeader;
   if (!effectiveHost) return forbidden("missing host header");