vite-plugin-opencode-assistant 1.0.11 → 1.0.12

package/es/client/index.js

@@ -46,6 +46,16 @@ function utf8ToBase64(str) {
   const binString = Array.from(bytes, (byte) => String.fromCodePoint(byte)).join("");
   return btoa(binString);
 }
+let proxyUrl = "";
+function toProxyUrl(url) {
+  if (!url || !proxyUrl) return url;
+  try {
+    const urlObj = new URL(url, window.location.origin);
+    return `${proxyUrl}${urlObj.pathname}${urlObj.search}`;
+  } catch (e) {
+    return url;
+  }
+}
 let config = {};
 const scriptTag = document.querySelector(`script[${CONFIG_DATA_ATTR}]`);
 if (scriptTag) {
@@ -74,15 +84,19 @@ const App = {
     const selectedElements = ref([]);
     const widgetRef = ref(null);
     const {
-      webUrl = "",
       position = "bottom-right",
-      theme = "auto",
+      theme: initialTheme = "auto",
       open: autoOpen = false,
       sessionUrl: initialSessionUrl = "",
+      proxyUrl: configProxyUrl = "",
       lazy = false,
       hotkey = "ctrl+k",
       cwd = ""
     } = config;
+    if (configProxyUrl) {
+      proxyUrl = configProxyUrl;
+    }
+    const theme = ref(initialTheme);
     const isWaitingForSession = ref(!initialSessionUrl);
     const computedLoading = computed(() => loading.value || isWaitingForSession.value);
     let servicesStarted = !lazy;
@@ -93,7 +107,7 @@ const App = {
     };
     currentSessionId.value = extractSessionId(initialSessionUrl);
     if (servicesStarted && initialSessionUrl) {
-      iframeSrc.value = initialSessionUrl;
+      iframeSrc.value = toProxyUrl(initialSessionUrl);
     }
     try {
       const stored = sessionStorage.getItem("__opencode_selected_elements__");
@@ -140,7 +154,7 @@ const App = {
           updatedAt: Date.now()
         });
         currentSessionId.value = newSession.id;
-        iframeSrc.value = `${webUrl}/${utf8ToBase64(cwd)}/session/${newSession.id}`;
+        iframeSrc.value = `${proxyUrl}/${utf8ToBase64(cwd)}/session/${newSession.id}`;
         loadSessions();
       } catch (e) {
         showNotification("\u521B\u5EFA\u4F1A\u8BDD\u5931\u8D25");
@@ -155,7 +169,7 @@ const App = {
           if (sessions.value.length > 0) {
             const nextSession = sessions.value[0];
             currentSessionId.value = nextSession.id;
-            iframeSrc.value = `${webUrl}/${utf8ToBase64(cwd)}/session/${nextSession.id}`;
+            iframeSrc.value = `${proxyUrl}/${utf8ToBase64(cwd)}/session/${nextSession.id}`;
           } else {
             currentSessionId.value = null;
             iframeSrc.value = "";
@@ -169,7 +183,7 @@ const App = {
       if (currentSessionId.value === session.id) return;
       currentSessionId.value = session.id;
       loading.value = true;
-      iframeSrc.value = `${webUrl}/${utf8ToBase64(cwd)}/session/${session.id}`;
+      iframeSrc.value = `${proxyUrl}/${utf8ToBase64(cwd)}/session/${session.id}`;
       setTimeout(() => {
         loading.value = false;
       }, 500);
@@ -185,7 +199,7 @@ const App = {
             updateContext(true);
           } else if (data.type === "SESSION_READY") {
             if (data.sessionUrl && !iframeSrc.value) {
-              iframeSrc.value = data.sessionUrl;
+              iframeSrc.value = toProxyUrl(data.sessionUrl);
               currentSessionId.value = extractSessionId(data.sessionUrl);
             }
             isWaitingForSession.value = false;
@@ -225,7 +239,7 @@ const App = {
         if (data.success) {
           servicesStarted = true;
           if (data.sessionUrl) {
-            iframeSrc.value = data.sessionUrl;
+            iframeSrc.value = toProxyUrl(data.sessionUrl);
             currentSessionId.value = extractSessionId(data.sessionUrl);
             isWaitingForSession.value = false;
           }
@@ -300,7 +314,7 @@ const App = {
       return h(OpenCodeWidget, {
         ref: widgetRef,
         position,
-        theme,
+        theme: theme.value,
         open: open.value,
         selectMode: selectMode.value,
         sessionListCollapsed: sessionListCollapsed.value,
@@ -319,6 +333,12 @@ const App = {
         "onUpdate:sessionListCollapsed": (val) => {
           sessionListCollapsed.value = val;
         },
+        "onUpdate:theme": (val) => {
+          theme.value = val;
+        },
+        "onToggle-theme": (val) => {
+          theme.value = val;
+        },
         "onCreate-session": createSession,
         "onDelete-session": deleteSession,
         "onSelect-session": selectSession,

package/es/core/proxy-server.d.ts

@@ -0,0 +1,11 @@
+import http from "http";
+import { type OpenCodeSettings, type OpenCodeLanguage } from "@vite-plugin-opencode-assistant/shared";
+export interface ProxyServerOptions {
+    /** 主题模式 */
+    theme?: "light" | "dark" | "auto";
+    /** OpenCode 界面语言 */
+    language?: OpenCodeLanguage;
+    /** OpenCode 内部设置 */
+    settings?: OpenCodeSettings;
+}
+export declare function startProxyServer(targetUrl: string, port: number, options?: ProxyServerOptions): http.Server;

package/es/core/proxy-server.js

@@ -0,0 +1,194 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import http from "http";
+import {
+  createLogger,
+  DEFAULT_OPENCODE_SETTINGS,
+  OPENCODE_STORAGE_KEYS
+} from "@vite-plugin-opencode-assistant/shared";
+const log = createLogger("ProxyServer");
+function mergeSettings(defaultSettings, userSettings) {
+  if (!userSettings) return defaultSettings;
+  const result = __spreadValues({}, defaultSettings);
+  if (userSettings.general) {
+    result.general = __spreadValues(__spreadValues({}, defaultSettings.general), userSettings.general);
+  }
+  if (userSettings.appearance) {
+    result.appearance = userSettings.appearance;
+  }
+  if (userSettings.permissions) {
+    result.permissions = userSettings.permissions;
+  }
+  if (userSettings.notifications) {
+    result.notifications = userSettings.notifications;
+  }
+  if (userSettings.sounds) {
+    result.sounds = userSettings.sounds;
+  }
+  return result;
+}
+function generateBridgeScript(options) {
+  const { theme = "auto", language, settings } = options;
+  const mergedSettings = mergeSettings(DEFAULT_OPENCODE_SETTINGS, settings);
+  return `
+(function() {
+  const STORAGE_KEYS = ${JSON.stringify(OPENCODE_STORAGE_KEYS)};
+  const THEME_KEY = STORAGE_KEYS.COLOR_SCHEME;
+  const SETTINGS_KEY = STORAGE_KEYS.SETTINGS;
+
+  // === \u521D\u59CB\u5316\u914D\u7F6E ===
+  const initialConfig = {
+    theme: ${JSON.stringify(theme)},
+    language: ${JSON.stringify(language || null)},
+    settings: ${JSON.stringify(mergedSettings)}
+  };
+
+  // \u521D\u59CB\u5316\u4E3B\u9898
+  if (initialConfig.theme && initialConfig.theme !== "auto") {
+    localStorage.setItem(THEME_KEY, initialConfig.theme);
+    document.documentElement.setAttribute("data-color-scheme", initialConfig.theme);
+  }
+
+  // \u521D\u59CB\u5316\u8BBE\u7F6E
+  localStorage.setItem(SETTINGS_KEY, JSON.stringify(initialConfig.settings));
+
+  // === \u4E3B\u9898\u540C\u6B65\u51FD\u6570 ===
+  function getTheme() {
+    try {
+      return localStorage.getItem(THEME_KEY) || "system";
+    } catch {
+      return "system";
+    }
+  }
+
+  function setTheme(theme) {
+    try {
+      const oldTheme = localStorage.getItem(THEME_KEY);
+      localStorage.setItem(THEME_KEY, theme);
+      document.documentElement.setAttribute('data-color-scheme', theme);
+
+      if (oldTheme !== theme) {
+        window.dispatchEvent(new StorageEvent('storage', {
+          key: THEME_KEY,
+          oldValue: oldTheme,
+          newValue: theme,
+          url: window.location.href
+        }));
+      }
+    } catch {
+      // ignore
+    }
+  }
+
+  // === \u6D88\u606F\u76D1\u542C ===
+  window.addEventListener("message", function(event) {
+    if (event.data && event.data.type === "OPENCODE_SET_THEME") {
+      setTheme(event.data.theme);
+    }
+  });
+
+  // === \u5C31\u7EEA\u901A\u77E5 ===
+  window.addEventListener("load", function() {
+    if (window.parent !== window) {
+      window.parent.postMessage({ type: "OPENCODE_READY" }, "*");
+    }
+  });
+})();
+`;
+}
+function startProxyServer(targetUrl, port, options = {}) {
+  const target = new URL(targetUrl);
+  const bridgeScript = generateBridgeScript(options);
+  const server = http.createServer((req, res) => {
+    if (req.url === "/__opencode_bridge__.js") {
+      const body = bridgeScript;
+      res.writeHead(200, {
+        "content-type": "application/javascript; charset=utf-8",
+        "cache-control": "no-store",
+        "content-length": Buffer.byteLength(body)
+      });
+      res.end(body);
+      return;
+    }
+    const options2 = {
+      hostname: target.hostname,
+      port: target.port,
+      path: req.url,
+      method: req.method,
+      headers: __spreadProps(__spreadValues({}, req.headers), {
+        host: target.host,
+        // Don't accept compressed responses so we can modify HTML
+        "accept-encoding": "identity"
+      })
+    };
+    const proxyReq = http.request(options2, (proxyRes) => {
+      var _a;
+      const rawContentType = proxyRes.headers["content-type"];
+      const contentType = Array.isArray(rawContentType) ? (_a = rawContentType[0]) != null ? _a : "" : rawContentType != null ? rawContentType : "";
+      if (contentType.includes("text/html")) {
+        const chunks = [];
+        proxyRes.on("data", (chunk) => {
+          chunks.push(chunk);
+        });
+        proxyRes.on("end", () => {
+          let body = Buffer.concat(chunks).toString("utf-8");
+          if (body.match(/<\/head>/i)) {
+            body = body.replace(
+              /<\/head>/i,
+              '<script src="/__opencode_bridge__.js"></script></head>'
+            );
+          } else if (body.match(/<\/body>/i)) {
+            body = body.replace(
+              /<\/body>/i,
+              '<script src="/__opencode_bridge__.js"></script></body>'
+            );
+          } else {
+            body += '<script src="/__opencode_bridge__.js"></script>';
+          }
+          const headers = {};
+          for (const [key, value] of Object.entries(proxyRes.headers)) {
+            if (value !== void 0 && key !== "content-encoding" && key !== "transfer-encoding" && key !== "content-length") {
+              headers[key] = value;
+            }
+          }
+          headers["content-length"] = Buffer.byteLength(body);
+          res.writeHead(proxyRes.statusCode || 200, headers);
+          res.end(body);
+        });
+      } else {
+        res.writeHead(proxyRes.statusCode || 200, proxyRes.headers);
+        proxyRes.pipe(res);
+      }
+    });
+    proxyReq.on("error", (err) => {
+      log.error("Proxy error", { error: err.message, url: req.url });
+      res.writeHead(502);
+      res.end("Proxy error");
+    });
+    req.pipe(proxyReq);
+  });
+  server.listen(port, () => {
+    log.info(`Proxy server started on port ${port} -> ${targetUrl}`);
+  });
+  return server;
+}
+export {
+  startProxyServer
+};

package/es/core/service.d.ts

@@ -7,12 +7,15 @@ export declare class OpenCodeService {
     private api;
     private sseClients;
     private onPortAllocated;
+    private onProxyPortAllocated;
     webProcess: ResultPromise | null;
     actualWebPort: number;
+    actualProxyPort: number;
     isStarted: boolean;
     private startPromise;
     sessionUrl: string | null;
-    constructor(config: Required<OpenCodeOptions>, api: OpenCodeAPI, sseClients: Set<http.ServerResponse>, onPortAllocated: (port: number) => void);
+    private proxyServer;
+    constructor(config: Required<OpenCodeOptions>, api: OpenCodeAPI, sseClients: Set<http.ServerResponse>, onPortAllocated: (port: number) => void, onProxyPortAllocated: (port: number) => void);
     start(corsOrigins?: string[], contextApiUrl?: string, viteOrigin?: string): Promise<void>;
     stop(): Promise<void>;
 }

package/es/core/service.js

@@ -22,26 +22,36 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import { prepareOpenCodeRuntime, startOpenCodeWeb } from "@vite-plugin-opencode-assistant/opencode";
-import { SERVER_START_TIMEOUT, createLogger } from "@vite-plugin-opencode-assistant/shared";
+import {
+  DEFAULT_PROXY_PORT,
+  SERVER_START_TIMEOUT,
+  createLogger
+} from "@vite-plugin-opencode-assistant/shared";
 import {
   checkOpenCodeInstalled,
   findAvailablePort,
   killOrphanOpenCodeProcesses,
   waitForServer
 } from "../utils/system.js";
+import { startProxyServer } from "./proxy-server.js";
 const log = createLogger("Service");
 class OpenCodeService {
-  constructor(config, api, sseClients, onPortAllocated) {
+  constructor(config, api, sseClients, onPortAllocated, onProxyPortAllocated) {
     __publicField(this, "config", config);
     __publicField(this, "api", api);
     __publicField(this, "sseClients", sseClients);
     __publicField(this, "onPortAllocated", onPortAllocated);
+    __publicField(this, "onProxyPortAllocated", onProxyPortAllocated);
     __publicField(this, "webProcess", null);
     __publicField(this, "actualWebPort");
+    __publicField(this, "actualProxyPort");
     __publicField(this, "isStarted", false);
     __publicField(this, "startPromise", null);
     __publicField(this, "sessionUrl", null);
+    __publicField(this, "proxyServer", null);
+    var _a;
     this.actualWebPort = config.webPort;
+    this.actualProxyPort = (_a = config.proxyPort) != null ? _a : DEFAULT_PROXY_PORT;
   }
   start(corsOrigins, contextApiUrl, viteOrigin) {
     return __async(this, null, function* () {
@@ -54,6 +64,7 @@ class OpenCodeService {
         return this.startPromise;
       }
       this.startPromise = (() => __async(this, null, function* () {
+        var _a, _b, _c;
         const timer = log.timer("startServices", {
           corsOrigins,
           contextApiUrl,
@@ -116,6 +127,24 @@ Please install OpenCode first:
         log.info(`Waiting for OpenCode Web to become ready at ${webUrl}...`);
         yield waitForServer(webUrl, SERVER_START_TIMEOUT);
         log.info(`OpenCode Web started at ${webUrl}`);
+        this.actualProxyPort = yield findAvailablePort(
+          (_a = this.config.proxyPort) != null ? _a : DEFAULT_PROXY_PORT,
+          this.config.hostname
+        );
+        this.onProxyPortAllocated(this.actualProxyPort);
+        if (this.actualProxyPort !== ((_b = this.config.proxyPort) != null ? _b : DEFAULT_PROXY_PORT)) {
+          log.info(
+            `Proxy port ${(_c = this.config.proxyPort) != null ? _c : DEFAULT_PROXY_PORT} is in use, using ${this.actualProxyPort} instead`
+          );
+        } else {
+          log.debug(`Using proxy port ${this.actualProxyPort}`);
+        }
+        this.proxyServer = startProxyServer(webUrl, this.actualProxyPort, {
+          theme: this.config.theme,
+          language: this.config.language,
+          settings: this.config.settings
+        });
+        timer.checkpoint("Proxy server started");
         yield this.api.warmupChromeMcp(viteOrigin);
         timer.checkpoint("Chrome MCP warmup complete");
         try {
@@ -147,6 +176,11 @@ Please install OpenCode first:
     return __async(this, null, function* () {
       const timer = log.timer("stopServices");
       log.info("Stopping OpenCode services...");
+      if (this.proxyServer) {
+        log.debug("Closing proxy server");
+        this.proxyServer.close();
+        this.proxyServer = null;
+      }
       if (this.webProcess) {
         log.debug("Killing web process", { pid: this.webProcess.pid });
         this.webProcess.kill("SIGTERM");

package/es/endpoints/types.d.ts

@@ -2,6 +2,7 @@ import type { PageContext, SessionInfo } from "@vite-plugin-opencode-assistant/s
 import type http from "http";
 export interface EndpointContext {
     get sessionUrl(): string | null;
+    get webUrl(): string | null;
     get sseClients(): Set<http.ServerResponse>;
     get pageContext(): PageContext;
     set pageContext(ctx: PageContext);

package/es/index.js

@@ -38,6 +38,7 @@ import Inspector from "unplugin-vue-inspector/vite";
 import {
   CONTEXT_API_PATH,
   DEFAULT_CONFIG,
+  DEFAULT_PROXY_PORT,
   createLogger,
   setVerbose
 } from "@vite-plugin-opencode-assistant/shared";
@@ -59,16 +60,26 @@ function opencodePlugin(options = {}) {
   return plugins;
 }
 function createOpenCodePlugin(options = {}) {
+  var _a;
   const config = __spreadValues(__spreadValues({}, DEFAULT_CONFIG), options);
   setVerbose(config.verbose);
   const log = createLogger("Plugin");
   let actualWebPort = config.webPort;
+  let actualProxyPort = (_a = config.proxyPort) != null ? _a : DEFAULT_PROXY_PORT;
   let pageContext = { url: "", title: "" };
   const sseClients = /* @__PURE__ */ new Set();
   const api = new OpenCodeAPI(config.hostname, () => actualWebPort, config.warmupChromeMcp);
-  const service = new OpenCodeService(config, api, sseClients, (port) => {
-    actualWebPort = port;
-  });
+  const service = new OpenCodeService(
+    config,
+    api,
+    sseClients,
+    (port) => {
+      actualWebPort = port;
+    },
+    (port) => {
+      actualProxyPort = port;
+    }
+  );
   return {
     name: "vite-plugin-opencode",
     apply(_viteConfig, env) {
@@ -77,12 +88,15 @@ function createOpenCodePlugin(options = {}) {
     },
     configureServer(server) {
       return __async(this, null, function* () {
-        var _a2, _b;
+        var _a2, _b2;
         const timer = log.timer("configureServer");
         setupMiddlewares(server, {
           get sessionUrl() {
             return service.sessionUrl;
           },
+          get webUrl() {
+            return actualWebPort ? `http://${config.hostname}:${actualWebPort}` : null;
+          },
           get sseClients() {
             return sseClients;
           },
@@ -131,7 +145,7 @@ function createOpenCodePlugin(options = {}) {
             log.error("Failed to start services", { error: e });
           }
         }));
-        (_b = server.httpServer) == null ? void 0 : _b.on("close", () => {
+        (_b2 = server.httpServer) == null ? void 0 : _b2.on("close", () => {
           log.debug("HTTP server closing");
           service.stop();
         });
@@ -149,6 +163,7 @@ function createOpenCodePlugin(options = {}) {
       const timer = log.timer("transformIndexHtml");
       const widget = injectWidget({
         webUrl: `http://${config.hostname}:${actualWebPort}`,
+        proxyUrl: `http://${config.hostname}:${actualProxyPort}`,
         serverUrl: `http://${config.hostname}:${actualWebPort}`,
         position: config.position,
         theme: config.theme,

package/lib/client/index.js

@@ -46,6 +46,16 @@ function utf8ToBase64(str) {
   const binString = Array.from(bytes, (byte) => String.fromCodePoint(byte)).join("");
   return btoa(binString);
 }
+let proxyUrl = "";
+function toProxyUrl(url) {
+  if (!url || !proxyUrl) return url;
+  try {
+    const urlObj = new URL(url, window.location.origin);
+    return `${proxyUrl}${urlObj.pathname}${urlObj.search}`;
+  } catch (e) {
+    return url;
+  }
+}
 let config = {};
 const scriptTag = document.querySelector(`script[${import_shared.CONFIG_DATA_ATTR}]`);
 if (scriptTag) {
@@ -74,15 +84,19 @@ const App = {
     const selectedElements = (0, import_vue.ref)([]);
     const widgetRef = (0, import_vue.ref)(null);
     const {
-      webUrl = "",
       position = "bottom-right",
-      theme = "auto",
+      theme: initialTheme = "auto",
       open: autoOpen = false,
       sessionUrl: initialSessionUrl = "",
+      proxyUrl: configProxyUrl = "",
       lazy = false,
       hotkey = "ctrl+k",
       cwd = ""
     } = config;
+    if (configProxyUrl) {
+      proxyUrl = configProxyUrl;
+    }
+    const theme = (0, import_vue.ref)(initialTheme);
     const isWaitingForSession = (0, import_vue.ref)(!initialSessionUrl);
     const computedLoading = (0, import_vue.computed)(() => loading.value || isWaitingForSession.value);
     let servicesStarted = !lazy;
@@ -93,7 +107,7 @@ const App = {
     };
     currentSessionId.value = extractSessionId(initialSessionUrl);
     if (servicesStarted && initialSessionUrl) {
-      iframeSrc.value = initialSessionUrl;
+      iframeSrc.value = toProxyUrl(initialSessionUrl);
     }
     try {
       const stored = sessionStorage.getItem("__opencode_selected_elements__");
@@ -140,7 +154,7 @@ const App = {
           updatedAt: Date.now()
         });
         currentSessionId.value = newSession.id;
-        iframeSrc.value = `${webUrl}/${utf8ToBase64(cwd)}/session/${newSession.id}`;
+        iframeSrc.value = `${proxyUrl}/${utf8ToBase64(cwd)}/session/${newSession.id}`;
         loadSessions();
       } catch (e) {
         showNotification("\u521B\u5EFA\u4F1A\u8BDD\u5931\u8D25");
@@ -155,7 +169,7 @@ const App = {
           if (sessions.value.length > 0) {
             const nextSession = sessions.value[0];
             currentSessionId.value = nextSession.id;
-            iframeSrc.value = `${webUrl}/${utf8ToBase64(cwd)}/session/${nextSession.id}`;
+            iframeSrc.value = `${proxyUrl}/${utf8ToBase64(cwd)}/session/${nextSession.id}`;
           } else {
             currentSessionId.value = null;
             iframeSrc.value = "";
@@ -169,7 +183,7 @@ const App = {
       if (currentSessionId.value === session.id) return;
       currentSessionId.value = session.id;
       loading.value = true;
-      iframeSrc.value = `${webUrl}/${utf8ToBase64(cwd)}/session/${session.id}`;
+      iframeSrc.value = `${proxyUrl}/${utf8ToBase64(cwd)}/session/${session.id}`;
       setTimeout(() => {
         loading.value = false;
       }, 500);
@@ -185,7 +199,7 @@ const App = {
             updateContext(true);
           } else if (data.type === "SESSION_READY") {
             if (data.sessionUrl && !iframeSrc.value) {
-              iframeSrc.value = data.sessionUrl;
+              iframeSrc.value = toProxyUrl(data.sessionUrl);
               currentSessionId.value = extractSessionId(data.sessionUrl);
             }
             isWaitingForSession.value = false;
@@ -225,7 +239,7 @@ const App = {
         if (data.success) {
           servicesStarted = true;
           if (data.sessionUrl) {
-            iframeSrc.value = data.sessionUrl;
+            iframeSrc.value = toProxyUrl(data.sessionUrl);
             currentSessionId.value = extractSessionId(data.sessionUrl);
             isWaitingForSession.value = false;
           }
@@ -300,7 +314,7 @@ const App = {
       return (0, import_vue.h)(import_components.OpenCodeWidget, {
         ref: widgetRef,
         position,
-        theme,
+        theme: theme.value,
         open: open.value,
         selectMode: selectMode.value,
         sessionListCollapsed: sessionListCollapsed.value,
@@ -319,6 +333,12 @@ const App = {
         "onUpdate:sessionListCollapsed": (val) => {
           sessionListCollapsed.value = val;
         },
+        "onUpdate:theme": (val) => {
+          theme.value = val;
+        },
+        "onToggle-theme": (val) => {
+          theme.value = val;
+        },
         "onCreate-session": createSession,
         "onDelete-session": deleteSession,
         "onSelect-session": selectSession,