vite-plugin-opencode-assistant 1.0.91 → 1.0.93

package/lib/core/proxy-server.cjs

@@ -75,6 +75,29 @@ function generateBridgeScript(options) {
   const mergedSettings = mergeSettings(import_shared.DEFAULT_OPENCODE_SETTINGS, settings);
   return `
 (function() {
+  // === \u52AB\u6301 matchMedia\uFF0C\u5F3A\u5236\u684C\u9762\u7AEF\u5E03\u5C40\u4EE5\u6E32\u67D3\u5BA1\u67E5\u9762\u677F ===
+  // \u53EA\u52AB\u6301 opencode \u5224\u65AD\u684C\u9762\u7AEF\u7684\u5A92\u4F53\u67E5\u8BE2 (min-width: 768px)\uFF0C\u4E0D\u5F71\u54CD\u5176\u4ED6\u67E5\u8BE2
+  (function() {
+    var _origMatchMedia = window.matchMedia.bind(window);
+    var DESKTOP_QUERY = '(min-width: 768px)';
+    window.matchMedia = function(query) {
+      var result = _origMatchMedia(query);
+      if (query === DESKTOP_QUERY) {
+        return {
+          get matches() { return true; },
+          get media() { return result.media; },
+          onchange: null,
+          addListener: function(cb) { result.addListener(cb); },
+          removeListener: function(cb) { result.removeListener(cb); },
+          addEventListener: function(t, cb) { result.addEventListener(t, cb); },
+          removeEventListener: function(t, cb) { result.removeEventListener(t, cb); },
+          dispatchEvent: function(e) { return result.dispatchEvent(e); }
+        };
+      }
+      return result;
+    };
+  })();
+
   const STORAGE_KEYS = ${JSON.stringify(import_shared.OPENCODE_STORAGE_KEYS)};
   const THEME_KEY = STORAGE_KEYS.COLOR_SCHEME;
   const SETTINGS_KEY = STORAGE_KEYS.SETTINGS;
@@ -93,7 +116,27 @@ function generateBridgeScript(options) {
   }
 
   // \u521D\u59CB\u5316\u8BBE\u7F6E
-  localStorage.setItem(SETTINGS_KEY, JSON.stringify(initialConfig.settings));
+  // \u6DF1\u5EA6\u5408\u5E76 initialConfig.settings \u5230\u5DF2\u6709\u914D\u7F6E\uFF1A\u53EA\u8986\u76D6\u63D2\u4EF6\u58F0\u660E\u7684\u5B57\u6BB5\uFF0C
+  // opencode \u81EA\u5DF1\u7BA1\u7406\u7684\u5176\u4ED6\u914D\u7F6E\u4E0D\u53D7\u5F71\u54CD
+  function deepMerge(target, source) {
+    for (var key in source) {
+      if (!{}.hasOwnProperty.call(source, key)) continue;
+      if (source[key] && typeof source[key] === "object" && !Array.isArray(source[key])) {
+        if (!target[key] || typeof target[key] !== "object") target[key] = {};
+        deepMerge(target[key], source[key]);
+      } else {
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+
+  try {
+    var existing = JSON.parse(localStorage.getItem(SETTINGS_KEY) || "{}");
+    localStorage.setItem(SETTINGS_KEY, JSON.stringify(deepMerge(existing, initialConfig.settings)));
+  } catch {
+    localStorage.setItem(SETTINGS_KEY, JSON.stringify(initialConfig.settings));
+  }
 
   // === \u4E3B\u9898\u540C\u6B65\u51FD\u6570 ===
   function getTheme() {
@@ -151,6 +194,10 @@ function generateBridgeScript(options) {
     if (event.data && event.data.type === ${JSON.stringify(import_shared.WIDGET_MSG.SELECT_MODE_CHANGE)}) {
       handleSelectModeChange(event.data.selectMode);
     }
+
+    if (event.data && event.data.type === ${JSON.stringify(import_shared.WIDGET_MSG.REVIEW_PANEL_TOGGLE)}) {
+      handleReviewPanelToggle(event.data.visible);
+    }
   });
 
   // === \u952E\u76D8\u4E8B\u4EF6\u8F6C\u53D1\uFF08\u7528\u4E8E\u9000\u51FA\u9009\u62E9\u6A21\u5F0F\uFF09 ===
@@ -204,6 +251,85 @@ function generateBridgeScript(options) {
     button[data-slot="dropdown-menu-trigger"][icon="dot-grid"] {
       display: none !important;
     }
+    [data-component="icon-button-v2"][aria-label="\u66F4\u591A\u9009\u9879"],
+    [data-component="icon-button-v2"][aria-label="More options"] {
+      display: none !important;
+    }
+  \`;
+
+  // === \u5BA1\u67E5\u9762\u677F\u8986\u76D6\u6837\u5F0F ===
+  // \u5BA1\u67E5\u9762\u677F\u5168\u5C4F\uFF0C\u4F1A\u8BDD\u9762\u677F\u6D6E\u5728\u53F3\u4E0B\u89D2\uFF08\u7C7B\u4F3C\u63D2\u4EF6\u6700\u5C0F\u5316\u72B6\u6001\uFF09
+  const reviewPanelStyles = \`
+    .opencode-review-panel-overlay [data-ref="panel-row"] {
+      flex-direction: column !important;
+      gap: 8px !important;
+      padding: 8px !important;
+    }
+
+    /* \u5BA1\u67E5\u9762\u677F\u5360\u6EE1\u5269\u4F59\u7A7A\u95F4 */
+    .opencode-review-panel-overlay [data-ref="side-panel-container"] {
+      flex: 1 !important;
+      width: 100% !important;
+      transition: none !important;
+      min-height: 0 !important;
+    }
+
+    /* \u4F1A\u8BDD\u9762\u677F\u6D6E\u5728\u53F3\u4E0B\u89D2 */
+    .opencode-review-panel-overlay [data-ref="session-panel"] {
+      position: fixed !important;
+      bottom: 16px !important;
+      right: 16px !important;
+      width: 380px !important;
+      max-height: 70vh !important;
+      display: flex !important;
+      flex-direction: column !important;
+      z-index: 600 !important;
+      border-radius: 12px !important;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
+      overflow: hidden !important;
+      transition: none;
+    }
+    .opencode-review-panel-overlay [data-ref="session-panel"] * {
+      max-width: none !important;
+    }
+
+    /* \u9690\u85CF\u4F1A\u8BDD\u9762\u677F\u5185\u7684\u6807\u9898 */
+    .opencode-review-panel-overlay [data-ref="session-panel"] [data-session-title] {
+      display: none !important;
+    }
+
+    /* \u9690\u85CF\u6D6E\u52A8\u4F1A\u8BDD\uFF08\u7528 visibility+opacity \u907F\u514D\u5207\u6362\u95EA\u70C1\uFF09 */
+    .opencode-review-panel-overlay.hide-chat [data-ref="session-panel"] {
+      visibility: hidden !important;
+      opacity: 0 !important;
+      pointer-events: none !important;
+    }
+
+    /* \u5BA1\u67E5\u9762\u677F\u53F3\u4E0A\u89D2\u60AC\u6D6E\u5207\u6362\u6309\u94AE */
+    .opencode-chat-toggle-btn {
+      position: fixed !important;
+      top: 16px !important;
+      right: 16px !important;
+      z-index: 700 !important;
+      width: 36px !important;
+      height: 36px !important;
+      border-radius: 8px !important;
+      border: none !important;
+      background: var(--v2-background-bg-base, #1e1e1e) !important;
+      color: var(--v2-icon-icon-base, #ccc) !important;
+      cursor: pointer !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
+      transition: background 0.15s !important;
+    }
+    .opencode-chat-toggle-btn:hover {
+      background: var(--v2-overlay-simple-overlay-hover, #333) !important;
+    }
+    .opencode-chat-toggle-btn.active {
+      background: var(--v2-overlay-simple-overlay-pressed, #444) !important;
+    }
   \`;
 
   function injectMinimizeStyles() {
@@ -214,9 +340,18 @@ function generateBridgeScript(options) {
     document.head.appendChild(style);
   }
 
+  function injectReviewPanelStyles() {
+    if (document.getElementById('opencode-review-panel-styles')) return;
+    const style = document.createElement('style');
+    style.id = 'opencode-review-panel-styles';
+    style.textContent = reviewPanelStyles;
+    document.head.appendChild(style);
+  }
+
   // === \u6700\u5C0F\u5316\u72B6\u6001\u5904\u7406 ===
   let savedMinimizedState = null;
   let savedPromptDockVisibleState = null;
+  let savedReviewPanelState = null;
 
   function handleMinimizeStateChange(minimized) {
     savedMinimizedState = minimized;
@@ -236,6 +371,106 @@ function generateBridgeScript(options) {
       document.documentElement.classList.remove('opencode-prompt-dock-hidden');
     }
   }
+
+  // === \u5BA1\u67E5\u9762\u677F\u8986\u76D6\u72B6\u6001\u5904\u7406 ===
+  // \u7B56\u7565\uFF1A\u7EAF CSS class \u63A7\u5236\u3002\u9996\u6B21\u6253\u5F00\u65F6\u7ED9\u5173\u952E\u5143\u7D20\u6253 data-ref \u6807\u8BB0\uFF0C
+  // \u540E\u7EED\u53EA\u9700 toggle class\u3002\u5173\u95ED\u65F6\u79FB\u9664 class\uFF0CCSS \u89C4\u5219\u81EA\u52A8\u6062\u590D\u539F\u59CB\u5E03\u5C40\u3002
+  // \u4E0D\u4FEE\u6539\u4EFB\u4F55 inline style\uFF0C\u907F\u514D\u4FDD\u5B58/\u6062\u590D\u7684\u65F6\u673A\u548C DOM \u5F15\u7528\u95EE\u9898\u3002
+
+  function ensureReviewPanelRefs() {
+    var reviewPanel = document.querySelector('[data-component="session-review-v2"]')
+      || document.querySelector('[data-component="session-review"]');
+    if (!reviewPanel) return false;
+
+    // \u5411\u4E0A\u904D\u5386\u627E\u5230 panelRow
+    var panelRow = reviewPanel.parentElement;
+    while (panelRow) {
+      var cls = panelRow.className || '';
+      if (cls.indexOf('flex-col') !== -1 && cls.indexOf('md:flex-row') !== -1) break;
+      panelRow = panelRow.parentElement;
+    }
+    if (!panelRow) return false;
+    panelRow.setAttribute('data-ref', 'panel-row');
+
+    // \u627E\u5230\u4F1A\u8BDD\u9762\u677F\u548C\u4FA7\u8FB9\u9762\u677F\u5BB9\u5668
+    for (var i = 0; i < panelRow.children.length; i++) {
+      var child = panelRow.children[i];
+      if (child.nodeType !== 1) continue;
+      var c = child.className || '';
+      if (c.indexOf('@container') !== -1) {
+        child.setAttribute('data-ref', 'session-panel');
+      } else if (c.indexOf('min-w-0') !== -1 && c.indexOf('flex-col') !== -1) {
+        child.setAttribute('data-ref', 'side-panel-container');
+      }
+    }
+
+    return true;
+  }
+
+  function injectChatToggleBtn() {
+    if (document.getElementById('opencode-chat-toggle-btn')) return;
+    var btn = document.createElement('button');
+    btn.id = 'opencode-chat-toggle-btn';
+    btn.className = 'opencode-chat-toggle-btn';
+    btn.innerHTML = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>';
+    btn.title = '\u5C55\u5F00\u804A\u5929\u9762\u677F';
+    btn.onclick = function() {
+      document.documentElement.classList.toggle('hide-chat');
+      btn.classList.toggle('active');
+      btn.title = btn.classList.contains('active') ? '\u9690\u85CF\u804A\u5929\u9762\u677F' : '\u5C55\u5F00\u804A\u5929\u9762\u677F';
+    };
+    document.body.appendChild(btn);
+  }
+
+  function removeChatToggleBtn() {
+    var btn = document.getElementById('opencode-chat-toggle-btn');
+    if (btn) btn.remove();
+  }
+
+  function handleReviewPanelToggle(visible) {
+    // \u5982\u679C\u72B6\u6001\u6CA1\u6709\u53D8\u5316\uFF0C\u8DF3\u8FC7\uFF08\u907F\u514D MutationObserver \u91CD\u590D\u89E6\u53D1\uFF09
+    if (savedReviewPanelState === visible) return;
+    savedReviewPanelState = visible;
+
+    if (visible) {
+      // \u5148\u70B9\u51FB\u539F\u751F\u6309\u94AE\u6253\u5F00\u9762\u677F\uFF0C\u8BA9 DOM \u6E32\u67D3\u51FA\u6765
+      var reviewBtn = document.querySelector('[aria-controls="review-panel"]');
+      if (reviewBtn && reviewBtn.getAttribute('aria-expanded') !== 'true') {
+        reviewBtn.click();
+      }
+
+      // \u7B49 DOM \u5C31\u7EEA\u540E\u6253\u6807\u8BB0\u5E76\u5E94\u7528 CSS
+      var attempts = 0;
+      function tryApply() {
+        if (ensureReviewPanelRefs()) {
+          document.documentElement.classList.add('opencode-review-panel-overlay', 'hide-chat');
+          injectChatToggleBtn();
+          return;
+        }
+        attempts++;
+        if (attempts < 20) requestAnimationFrame(tryApply);
+      }
+      requestAnimationFrame(tryApply);
+    } else {
+      // \u5173\u95ED\u524D\u5148\u5C06\u4F1A\u8BDD\u9762\u677F\u5BBD\u5EA6\u8BBE\u4E3A 100%\uFF0C\u907F\u514D SolidJS \u5F02\u6B65\u6E32\u67D3\u7684\u5BBD\u5EA6\u8DF3\u53D8
+      var sessionPanel = document.querySelector('[data-ref="session-panel"]');
+      if (sessionPanel) sessionPanel.style.width = '100%';
+      document.body.offsetHeight; // \u5F3A\u5236\u56DE\u6D41
+
+      document.documentElement.classList.remove('opencode-review-panel-overlay');
+      document.documentElement.classList.remove('hide-chat');
+      removeChatToggleBtn();
+
+      // \u7B49\u4E00\u5E27\u8BA9 CSS \u5E03\u5C40\u53D8\u5316\u5148\u6E32\u67D3\uFF0C\u518D\u5173\u95ED\u539F\u751F\u9762\u677F
+      // \u907F\u514D SolidJS \u5F02\u6B65 DOM \u53D8\u5316\u548C CSS \u5E03\u5C40\u53D8\u5316\u53D1\u751F\u5728\u540C\u4E00\u5E27\u5BFC\u81F4\u89C6\u89C9\u8DF3\u52A8
+      requestAnimationFrame(function() {
+        var reviewBtn = document.querySelector('[aria-controls="review-panel"]');
+        if (reviewBtn && reviewBtn.getAttribute('aria-expanded') === 'true') {
+          reviewBtn.click();
+        }
+      });
+    }
+  }
   
   // === \u5E94\u7528\u4FDD\u5B58\u7684\u72B6\u6001 ===
   function applySavedStates() {
@@ -245,6 +480,9 @@ function generateBridgeScript(options) {
     if (savedPromptDockVisibleState !== null) {
       handlePromptDockVisibilityChange(savedPromptDockVisibleState);
     }
+    if (savedReviewPanelState !== null) {
+      handleReviewPanelToggle(savedReviewPanelState);
+    }
   }
 
   // === \u4FDD\u5B58\u8F93\u5165\u6846\u5149\u6807\u4F4D\u7F6E ===
@@ -390,6 +628,7 @@ function generateBridgeScript(options) {
   // === \u5C31\u7EEA\u901A\u77E5 ===
   function init() {
     injectMinimizeStyles();
+    injectReviewPanelStyles();
     if (window.parent !== window) {
       window.parent.postMessage({ type: ${JSON.stringify(import_shared.WIDGET_MSG.READY)} }, "*");
     }

package/lib/core/service.cjs

@@ -183,7 +183,8 @@ Please install OpenCode first:
           if (((_a = this.webProcess) == null ? void 0 : _a.exitCode) !== null && ((_b = this.webProcess) == null ? void 0 : _b.exitCode) !== void 0) {
             throw new Error(`OpenCode process exited with code ${this.webProcess.exitCode}`);
           }
-          log.info(`OpenCode Web started at ${webUrl}`);
+          const version = yield (0, import_system.getOpenCodeVersion)();
+          log.info(`OpenCode Web started at ${webUrl}${version ? ` (opencode ${version})` : ""}`);
         } catch (e) {
           log.error("OpenCode Web failed to start", { error: e });
           this.sendTaskUpdate("web_start_timeout");

package/lib/endpoints/context.cjs

@@ -89,19 +89,21 @@ function setupContextEndpoint(server, ctx) {
       let body = "";
       req.on("data", (chunk) => body += chunk);
       req.on("end", () => {
-        var _a;
+        var _a, _b, _c;
         try {
           const data = JSON.parse(body);
           ctx.pageContext = {
             url: data.url || "",
             title: data.title || "",
-            tabId: data.tabId,
+            // 保留已有的 tabId/tabIndex（避免页内 widget 覆盖 Side Panel 写入的值）
+            tabId: (_a = data.tabId) != null ? _a : ctx.pageContext.tabId,
+            tabIndex: (_b = data.tabIndex) != null ? _b : ctx.pageContext.tabIndex,
             selectedElements: data.selectedElements || []
           };
           log.debug("Context updated", {
             url: ctx.pageContext.url,
             title: ctx.pageContext.title,
-            selectedElementsCount: ((_a = ctx.pageContext.selectedElements) == null ? void 0 : _a.length) || 0
+            selectedElementsCount: ((_c = ctx.pageContext.selectedElements) == null ? void 0 : _c.length) || 0
           });
           if (ctx.pageContext.selectedElements && ctx.pageContext.selectedElements.length > 0) {
             log.debug("Selected elements details", {

package/lib/utils/system.cjs

@@ -50,6 +50,7 @@ __export(system_exports, {
   checkOpenCodeInstalled: () => checkOpenCodeInstalled,
   findAvailablePort: () => findAvailablePort,
   findGitRoot: () => findGitRoot,
+  getOpenCodeVersion: () => getOpenCodeVersion,
   isPortAvailable: () => isPortAvailable,
   killOrphanOpenCodeProcesses: () => killOrphanOpenCodeProcesses,
   waitForServer: () => waitForServer
@@ -121,6 +122,26 @@ function checkOpenCodeInstalled() {
     });
   });
 }
+function getOpenCodeVersion() {
+  return new Promise((resolve) => {
+    var _a;
+    const proc = (0, import_child_process.spawn)("opencode", ["--version"], { stdio: "pipe" });
+    let output = "";
+    (_a = proc.stdout) == null ? void 0 : _a.on("data", (data) => {
+      output += data.toString();
+    });
+    proc.on("close", (code) => {
+      if (code === 0 && output.trim()) {
+        resolve(output.trim());
+      } else {
+        resolve(null);
+      }
+    });
+    proc.on("error", () => {
+      resolve(null);
+    });
+  });
+}
 function isPortAvailable(port, hostname) {
   return __async(this, null, function* () {
     return new Promise((resolve) => {
@@ -302,6 +323,7 @@ function killOrphanProcessesOnUnix(resolve, timer) {
   checkOpenCodeInstalled,
   findAvailablePort,
   findGitRoot,
+  getOpenCodeVersion,
   isPortAvailable,
   killOrphanOpenCodeProcesses,
   waitForServer

package/lib/utils/system.d.ts

@@ -1,6 +1,7 @@
 import type { ResultPromise } from "execa";
 export declare function waitForServer(url: string, timeout?: number, process?: ResultPromise): Promise<void>;
 export declare function checkOpenCodeInstalled(): Promise<boolean>;
+export declare function getOpenCodeVersion(): Promise<string | null>;
 export declare function isPortAvailable(port: number, hostname?: string): Promise<boolean>;
 export declare function findAvailablePort(startPort: number, hostname?: string, maxTries?: number): Promise<number>;
 export declare function killOrphanOpenCodeProcesses(): Promise<number>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-opencode-assistant",
-  "version": "1.0.91",
+  "version": "1.0.93",
   "description": "Embed OpenCode Web UI in your Vite dev server for real-time code modification and preview",
   "type": "module",
   "main": "lib/index.cjs",
@@ -37,15 +37,15 @@
   "dependencies": {
     "unplugin-vue-inspector": "^3.0.0",
     "execa": "^9.6.1",
-    "@vite-plugin-opencode-assistant/shared": "1.0.91",
-    "@vite-plugin-opencode-assistant/opencode": "1.0.91",
-    "@vite-plugin-opencode-assistant/components": "1.0.91"
+    "@vite-plugin-opencode-assistant/opencode": "1.0.93",
+    "@vite-plugin-opencode-assistant/components": "1.0.93",
+    "@vite-plugin-opencode-assistant/shared": "1.0.93"
   },
   "peerDependencies": {
     "vite": ">=5.0.0"
   },
   "devDependencies": {
-    "@vite-plugin-opencode-assistant/client": "1.0.91"
+    "@vite-plugin-opencode-assistant/client": "1.0.93"
   },
   "scripts": {
     "build": "pagoda-cli build && vite build -c vite.client.config.ts",