vite-plugin-opencode-assistant 1.0.36 → 1.0.38

package/README.md

@@ -4,14 +4,16 @@
 
 ## 它能做什么
 
-- **悬浮 AI 面板** - 在页面右下角注入悬浮按钮，点击展开 OpenCode 对话界面
+- **悬浮 AI 面板** - 在页面右下角注入悬浮按钮，支持拖拽定位和边缘磁吸
 - **自动启动服务** - 自动启动本地 OpenCode Web 服务，无需手动操作
-- **智能会话管理** - 自动复用当前项目的会话，或创建新会话
+- **智能会话管理** - 自动复用当前项目的会话，支持创建、切换、删除会话
+- **实时状态显示** - 会话列表显示思考状态指示器，了解 AI 当前工作状态
 - **页面上下文同步** - 自动同步当前页面 URL、标题给 AI，SPA 路由切换时实时更新
 - **元素选择器** - 通过快捷键在页面上点选元素，将组件源码位置信息传给 AI
 - **主题同步** - 挂件主题与 OpenCode Web 主题实时同步
 - **代理服务** - 内置代理服务器解决 iframe 跨域限制，确保 OpenCode Web 功能完整
 - **Chrome DevTools 预热** - 启动时自动预热浏览器工具链，减少首次使用等待
+- **日志查看** - 提供日志接口，方便 Agent 获取开发服务器输出
 
 ## 效果演示
 
@@ -77,10 +79,8 @@ export default defineConfig({
       webPort: 5097, // OpenCode Web 服务端口
       proxyPort: 6097, // 代理服务端口
       hostname: "127.0.0.1", // 服务绑定地址
-      position: "bottom-right", // 悬浮按钮位置
       theme: "auto", // 主题: light | dark | auto
       open: false, // 是否自动展开面板
-      autoReload: true, // 是否启用自动重载提示
       verbose: false, // 是否输出详细日志
       hotkey: "ctrl+k", // 切换面板的快捷键
       warmupChromeMcp: true, // 是否预热 Chrome DevTools MCP
@@ -111,21 +111,19 @@ npm run dev
 
 ## 配置项
 
-| 配置项            | 类型      | 默认值           | 说明                                                                       |
-| ----------------- | --------- | ---------------- | -------------------------------------------------------------------------- |
-| `enabled`         | `boolean` | `true`           | 是否启用插件                                                               |
-| `webPort`         | `number`  | `5097`           | OpenCode Web 服务端口，被占用时自动向后寻找可用端口                        |
-| `proxyPort`       | `number`  | `6097`           | 代理服务端口，用于解决 iframe 跨域限制                                     |
-| `hostname`        | `string`  | `"127.0.0.1"`    | 服务绑定地址                                                               |
-| `position`        | `string`  | `"bottom-right"` | 悬浮按钮位置：`bottom-right` \| `bottom-left` \| `top-right` \| `top-left` |
-| `theme`           | `string`  | `"auto"`         | 挂件主题：`light` \| `dark` \| `auto`（跟随系统）                          |
-| `open`            | `boolean` | `false`          | 页面加载后是否自动展开面板                                                 |
-| `autoReload`      | `boolean` | `true`           | 是否显示自动重载提示                                                       |
-| `verbose`         | `boolean` | `false`          | 是否输出详细调试日志                                                       |
-| `hotkey`          | `string`  | `"ctrl+k"`       | 切换面板的快捷键，macOS 支持 `cmd+k`                                       |
-| `warmupChromeMcp` | `boolean` | `true`           | 启动后是否预热 Chrome DevTools MCP                                         |
-| `language`        | `string`  | -                | OpenCode 界面语言，如 `zh`、`en`、`ja` 等                                  |
-| `settings`        | `object`  | -                | OpenCode 内部设置，详见下方说明                                            |
+| 配置项            | 类型      | 默认值        | 说明                                                |
+| ----------------- | --------- | ------------- | --------------------------------------------------- |
+| `enabled`         | `boolean` | `true`        | 是否启用插件                                        |
+| `webPort`         | `number`  | `5097`        | OpenCode Web 服务端口，被占用时自动向后寻找可用端口 |
+| `proxyPort`       | `number`  | `6097`        | 代理服务端口，用于解决 iframe 跨域限制              |
+| `hostname`        | `string`  | `"127.0.0.1"` | 服务绑定地址                                        |
+| `theme`           | `string`  | `"auto"`      | 挂件主题：`light` \| `dark` \| `auto`（跟随系统）   |
+| `open`            | `boolean` | `false`       | 页面加载后是否自动展开面板                          |
+| `verbose`         | `boolean` | `false`       | 是否输出详细调试日志                                |
+| `hotkey`          | `string`  | `"ctrl+k"`    | 切换面板的快捷键，macOS 支持 `cmd+k`                |
+| `warmupChromeMcp` | `boolean` | `true`        | 启动后是否预热 Chrome DevTools MCP                  |
+| `language`        | `string`  | -             | OpenCode 界面语言，如 `zh`、`en`、`ja` 等           |
+| `settings`        | `object`  | -             | OpenCode 内部设置，详见下方说明                     |
 
 ### OpenCode 设置
 
@@ -205,38 +203,18 @@ npm run dev
 
 **注意**：元素选择依赖 Vue Inspector，如果页面中没有可用的 Inspector，会提示无法使用该功能。
 
-## 浏览器端 API
-
-挂件在全局暴露 `window.OpenCodeWidget` 对象：
-
-```js
-// 打开面板
-window.OpenCodeWidget.open();
-
-// 关闭面板
-window.OpenCodeWidget.close();
-
-// 切换面板
-window.OpenCodeWidget.toggle();
-
-// 显示通知
-window.OpenCodeWidget.showNotification("代码已更新！");
-
-// 手动同步上下文
-window.OpenCodeWidget.updateContext();
-```
-
 ## 内部接口
 
 插件在 Vite 开发服务器上注册以下内部接口：
 
-| 路径                      | 说明                               |
-| ------------------------- | ---------------------------------- |
-| `/__opencode_widget__.js` | 浏览器端挂件脚本                   |
-| `/__opencode_start__`     | 服务启动状态与会话地址             |
-| `/__opencode_context__`   | 页面上下文读写                     |
-| `/__opencode_sessions__`  | 会话查询、创建、删除               |
-| `/__opencode_events__`    | SSE 事件流（会话就绪、节点清空等） |
+| 路径                      | 说明                                       |
+| ------------------------- | ------------------------------------------ |
+| `/__opencode_widget__.js` | 浏览器端挂件脚本                           |
+| `/__opencode_start__`     | 服务启动状态与会话地址                     |
+| `/__opencode_context__`   | 页面上下文读写                             |
+| `/__opencode_sessions__`  | 会话查询、创建、删除                       |
+| `/__opencode_events__`    | SSE 事件流（会话就绪、节点清空等）         |
+| `/__opencode_logs__`      | 日志查询（OpenCode 进程输出、Vite 日志等） |
 
 ## 常见问题
 

package/es/client/App.vue.js

@@ -56,6 +56,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
     config: { type: Object, required: true }
   },
   setup(__props, { expose: __expose }) {
+    var _a;
     __expose();
     const props = __props;
     const open = ref(false);
@@ -69,15 +70,18 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
       open: autoOpen = false,
       hotkey = "ctrl+k",
       proxyPort = 4098,
-      proxyHost = "localhost"
+      proxyHost = "localhost",
+      displayMode = "bubble",
+      splitMode
     } = props.config;
     const widgetTheme = initialTheme;
+    const splitPanelWidth = ref((_a = splitMode == null ? void 0 : splitMode.width) != null ? _a : 500);
     const proxyBaseUrl = computed(() => {
       return `http://${proxyHost}:${proxyPort}`;
     });
     const showNotification = (msg, options) => {
-      var _a, _b;
-      (_b = (_a = widgetRef.value) == null ? void 0 : _a.showNotification) == null ? void 0 : _b.call(_a, msg, options);
+      var _a2, _b;
+      (_b = (_a2 = widgetRef.value) == null ? void 0 : _a2.showNotification) == null ? void 0 : _b.call(_a2, msg, options);
     };
     const {
       serviceStatus,
@@ -216,8 +220,8 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
         }, 1e3);
       }
       const handleIframeMessage = (event) => {
-        var _a;
-        if (((_a = event.data) == null ? void 0 : _a.type) === "OPENCODE_READY") {
+        var _a2;
+        if (((_a2 = event.data) == null ? void 0 : _a2.type) === "OPENCODE_READY") {
           sendThemeToIframe();
         }
       };
@@ -240,12 +244,12 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
       }
     });
     const handleSelectNode = (element) => {
-      var _a;
+      var _a2;
       const elementWithContext = __spreadProps(__spreadValues({}, element), {
         previewPageUrl: window.location.href,
         previewPageTitle: document.title
       });
-      (_a = widgetRef.value) == null ? void 0 : _a.sendMessageToIframe("OPENCODE_INSERT_FILE_PART", {
+      (_a2 = widgetRef.value) == null ? void 0 : _a2.sendMessageToIframe("OPENCODE_INSERT_FILE_PART", {
         element: elementWithContext
       });
       showNotification(`\u8282\u70B9\u5DF2\u6DFB\u52A0\u5230\u5BF9\u8BDD\u6846`, { mode: "page" });
@@ -267,6 +271,9 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
     const handleThemeChange = (val) => {
       theme.value = val;
     };
+    const handleSplitPanelWidthChange = (val) => {
+      splitPanelWidth.value = val;
+    };
     const handleRemoveSelectedNode = ({ index }) => {
       removeElement(index);
       updateContext(true);
@@ -274,7 +281,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
     const handleFrameLoaded = () => {
       iframeLoading.value = false;
     };
-    const __returned__ = { props, open, selectMode, sessionListCollapsed, loading, widgetRef, retryingWarmup, initialTheme, autoOpen, hotkey, proxyPort, proxyHost, widgetTheme, proxyBaseUrl, showNotification, serviceStatus, chromeMcpFailed, chromeMcpErrorType, chromeMcpErrorMessage, loadingText, updateStatusFromTask, setStarting, selectedElements, removeElement, clearElements, theme, sendThemeToIframe, sessions, loadingSessionList, currentSessionId, iframeSrc, iframeLoading, loadSessions, createSession, deleteSession, selectSession, updateSessionInfo, updateContext, serverSSE, opencodeSSE, thinking, sessionStates, showSessionListSkeleton, computedLoading, displayLoadingText, retryWarmup, ensureServicesStarted, handleToggle, handleSelectNode, handleClearSelected, handleSelectModeChange, handleSessionListCollapsedChange, handleThemeChange, handleRemoveSelectedNode, handleFrameLoaded, get OpenCodeWidget() {
+    const __returned__ = { props, open, selectMode, sessionListCollapsed, loading, widgetRef, retryingWarmup, initialTheme, autoOpen, hotkey, proxyPort, proxyHost, displayMode, splitMode, widgetTheme, splitPanelWidth, proxyBaseUrl, showNotification, serviceStatus, chromeMcpFailed, chromeMcpErrorType, chromeMcpErrorMessage, loadingText, updateStatusFromTask, setStarting, selectedElements, removeElement, clearElements, theme, sendThemeToIframe, sessions, loadingSessionList, currentSessionId, iframeSrc, iframeLoading, loadSessions, createSession, deleteSession, selectSession, updateSessionInfo, updateContext, serverSSE, opencodeSSE, thinking, sessionStates, showSessionListSkeleton, computedLoading, displayLoadingText, retryWarmup, ensureServicesStarted, handleToggle, handleSelectNode, handleClearSelected, handleSelectModeChange, handleSessionListCollapsedChange, handleThemeChange, handleSplitPanelWidthChange, handleRemoveSelectedNode, handleFrameLoaded, get OpenCodeWidget() {
       return OpenCodeWidget;
     }, LoadingContent, ChromeWarmupError };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
@@ -300,10 +307,14 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
     "session-key": "id",
     "hotkey-label": $setup.hotkey,
     thinking: $setup.thinking,
+    "display-mode": $setup.displayMode,
+    "split-mode": $setup.splitMode,
+    "split-panel-width": $setup.splitPanelWidth,
     "onUpdate:open": $setup.handleToggle,
     "onUpdate:selectMode": $setup.handleSelectModeChange,
     "onUpdate:sessionListCollapsed": $setup.handleSessionListCollapsedChange,
     "onUpdate:theme": $setup.handleThemeChange,
+    "onUpdate:splitPanelWidth": $setup.handleSplitPanelWidthChange,
     onToggleTheme: $setup.handleThemeChange,
     onCreateSession: $setup.createSession,
     onDeleteSession: $setup.deleteSession,
@@ -328,7 +339,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     _: 1
     /* STABLE */
-  }, 8, ["theme", "open", "select-mode", "session-list-collapsed", "frame-loading", "loading-session-list", "show-session-list-skeleton", "show-error", "iframe-src", "current-session-id", "sessions", "session-states", "hotkey-label", "thinking", "onCreateSession", "onDeleteSession", "onSelectSession", "onEmptyAction"]);
+  }, 8, ["theme", "open", "select-mode", "session-list-collapsed", "frame-loading", "loading-session-list", "show-session-list-skeleton", "show-error", "iframe-src", "current-session-id", "sessions", "session-states", "hotkey-label", "thinking", "display-mode", "split-mode", "split-panel-width", "onCreateSession", "onDeleteSession", "onSelectSession", "onEmptyAction"]);
 }
 __vue_sfc__.render = __vue_render__;
 var App_vue_default = __vue_sfc__;

package/es/core/api.js

@@ -119,10 +119,7 @@ class OpenCodeAPI {
           const sessions = yield this.createHttpRequest({
             hostname: this.hostname,
             port: this.getPort(),
-            path: "/session",
-            headers: {
-              "x-opencode-directory": encodeURIComponent(projectDir)
-            }
+            path: `/session?directory=${encodeURIComponent(projectDir)}`
           });
           const sessionsWithUrl = sessions.map((s) => __spreadProps(__spreadValues({}, s), {
             url: `http://${this.hostname}:${this.getProxyPort()}/${base64Encode(s.directory)}/session/${s.id}`
@@ -164,9 +161,7 @@ class OpenCodeAPI {
               port: this.getPort(),
               path: "/session",
               method: "POST",
-              headers: __spreadProps(__spreadValues({}, requestBody ? { "Content-Type": "application/json" } : {}), {
-                "x-opencode-directory": encodeURIComponent(projectDir)
-              })
+              headers: __spreadValues({}, requestBody ? { "Content-Type": "application/json" } : {})
             },
             requestBody
           );

package/es/index.js

@@ -181,7 +181,9 @@ function createOpenCodePlugin(options = {}) {
         open: config.open,
         hotkey: config.hotkey,
         proxyPort: actualProxyPort,
-        proxyHost: config.hostname
+        proxyHost: config.hostname,
+        displayMode: config.displayMode,
+        splitMode: config.splitMode
       });
       timer.end();
       return html.replace("</body>", `${widget}</body>`);

package/lib/client/App.vue.js

@@ -87,6 +87,7 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
     config: { type: Object, required: true }
   },
   setup(__props, { expose: __expose }) {
+    var _a;
     __expose();
     const props = __props;
     const open = (0, import_vue2.ref)(false);
@@ -100,15 +101,18 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
       open: autoOpen = false,
       hotkey = "ctrl+k",
       proxyPort = 4098,
-      proxyHost = "localhost"
+      proxyHost = "localhost",
+      displayMode = "bubble",
+      splitMode
     } = props.config;
     const widgetTheme = initialTheme;
+    const splitPanelWidth = (0, import_vue2.ref)((_a = splitMode == null ? void 0 : splitMode.width) != null ? _a : 500);
     const proxyBaseUrl = (0, import_vue2.computed)(() => {
       return `http://${proxyHost}:${proxyPort}`;
     });
     const showNotification = (msg, options) => {
-      var _a, _b;
-      (_b = (_a = widgetRef.value) == null ? void 0 : _a.showNotification) == null ? void 0 : _b.call(_a, msg, options);
+      var _a2, _b;
+      (_b = (_a2 = widgetRef.value) == null ? void 0 : _a2.showNotification) == null ? void 0 : _b.call(_a2, msg, options);
     };
     const {
       serviceStatus,
@@ -247,8 +251,8 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
         }, 1e3);
       }
       const handleIframeMessage = (event) => {
-        var _a;
-        if (((_a = event.data) == null ? void 0 : _a.type) === "OPENCODE_READY") {
+        var _a2;
+        if (((_a2 = event.data) == null ? void 0 : _a2.type) === "OPENCODE_READY") {
           sendThemeToIframe();
         }
       };
@@ -271,12 +275,12 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
       }
     });
     const handleSelectNode = (element) => {
-      var _a;
+      var _a2;
       const elementWithContext = __spreadProps(__spreadValues({}, element), {
         previewPageUrl: window.location.href,
         previewPageTitle: document.title
       });
-      (_a = widgetRef.value) == null ? void 0 : _a.sendMessageToIframe("OPENCODE_INSERT_FILE_PART", {
+      (_a2 = widgetRef.value) == null ? void 0 : _a2.sendMessageToIframe("OPENCODE_INSERT_FILE_PART", {
         element: elementWithContext
       });
       showNotification(`\u8282\u70B9\u5DF2\u6DFB\u52A0\u5230\u5BF9\u8BDD\u6846`, { mode: "page" });
@@ -298,6 +302,9 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
     const handleThemeChange = (val) => {
       theme.value = val;
     };
+    const handleSplitPanelWidthChange = (val) => {
+      splitPanelWidth.value = val;
+    };
     const handleRemoveSelectedNode = ({ index }) => {
       removeElement(index);
       updateContext(true);
@@ -305,7 +312,7 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
     const handleFrameLoaded = () => {
       iframeLoading.value = false;
     };
-    const __returned__ = { props, open, selectMode, sessionListCollapsed, loading, widgetRef, retryingWarmup, initialTheme, autoOpen, hotkey, proxyPort, proxyHost, widgetTheme, proxyBaseUrl, showNotification, serviceStatus, chromeMcpFailed, chromeMcpErrorType, chromeMcpErrorMessage, loadingText, updateStatusFromTask, setStarting, selectedElements, removeElement, clearElements, theme, sendThemeToIframe, sessions, loadingSessionList, currentSessionId, iframeSrc, iframeLoading, loadSessions, createSession, deleteSession, selectSession, updateSessionInfo, updateContext, serverSSE, opencodeSSE, thinking, sessionStates, showSessionListSkeleton, computedLoading, displayLoadingText, retryWarmup, ensureServicesStarted, handleToggle, handleSelectNode, handleClearSelected, handleSelectModeChange, handleSessionListCollapsedChange, handleThemeChange, handleRemoveSelectedNode, handleFrameLoaded, get OpenCodeWidget() {
+    const __returned__ = { props, open, selectMode, sessionListCollapsed, loading, widgetRef, retryingWarmup, initialTheme, autoOpen, hotkey, proxyPort, proxyHost, displayMode, splitMode, widgetTheme, splitPanelWidth, proxyBaseUrl, showNotification, serviceStatus, chromeMcpFailed, chromeMcpErrorType, chromeMcpErrorMessage, loadingText, updateStatusFromTask, setStarting, selectedElements, removeElement, clearElements, theme, sendThemeToIframe, sessions, loadingSessionList, currentSessionId, iframeSrc, iframeLoading, loadSessions, createSession, deleteSession, selectSession, updateSessionInfo, updateContext, serverSSE, opencodeSSE, thinking, sessionStates, showSessionListSkeleton, computedLoading, displayLoadingText, retryWarmup, ensureServicesStarted, handleToggle, handleSelectNode, handleClearSelected, handleSelectModeChange, handleSessionListCollapsedChange, handleThemeChange, handleSplitPanelWidthChange, handleRemoveSelectedNode, handleFrameLoaded, get OpenCodeWidget() {
       return import_components.OpenCodeWidget;
     }, LoadingContent: import_LoadingContent_vue.default, ChromeWarmupError: import_ChromeWarmupError_vue.default };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
@@ -330,10 +337,14 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
     "session-key": "id",
     "hotkey-label": $setup.hotkey,
     thinking: $setup.thinking,
+    "display-mode": $setup.displayMode,
+    "split-mode": $setup.splitMode,
+    "split-panel-width": $setup.splitPanelWidth,
     "onUpdate:open": $setup.handleToggle,
     "onUpdate:selectMode": $setup.handleSelectModeChange,
     "onUpdate:sessionListCollapsed": $setup.handleSessionListCollapsedChange,
     "onUpdate:theme": $setup.handleThemeChange,
+    "onUpdate:splitPanelWidth": $setup.handleSplitPanelWidthChange,
     onToggleTheme: $setup.handleThemeChange,
     onCreateSession: $setup.createSession,
     onDeleteSession: $setup.deleteSession,
@@ -358,7 +369,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     _: 1
     /* STABLE */
-  }, 8, ["theme", "open", "select-mode", "session-list-collapsed", "frame-loading", "loading-session-list", "show-session-list-skeleton", "show-error", "iframe-src", "current-session-id", "sessions", "session-states", "hotkey-label", "thinking", "onCreateSession", "onDeleteSession", "onSelectSession", "onEmptyAction"]);
+  }, 8, ["theme", "open", "select-mode", "session-list-collapsed", "frame-loading", "loading-session-list", "show-session-list-skeleton", "show-error", "iframe-src", "current-session-id", "sessions", "session-states", "hotkey-label", "thinking", "display-mode", "split-mode", "split-panel-width", "onCreateSession", "onDeleteSession", "onSelectSession", "onEmptyAction"]);
 }
 __vue_sfc__.render = __vue_render__;
 var App_vue_default = __vue_sfc__;