vite-plugin-opencode-assistant 1.0.13 → 1.0.15

package/es/client/index.js

@@ -40,7 +40,10 @@ var __async = (__this, __arguments, generator) => {
 import { createApp, ref, watch, onMounted, h, computed } from "vue";
 import { OpenCodeWidget } from "@vite-plugin-opencode-assistant/components";
 import "@vite-plugin-opencode-assistant/components/style.css";
-import { CONFIG_DATA_ATTR } from "@vite-plugin-opencode-assistant/shared";
+import {
+  CONFIG_DATA_ATTR,
+  SERVICE_STARTUP_TASKS
+} from "@vite-plugin-opencode-assistant/shared";
 function parseHotkey(hotkeyStr) {
   if (!hotkeyStr) return { ctrl: true, shift: false, alt: false, key: "k" };
   const parts = hotkeyStr.toLowerCase().split("+");
@@ -101,13 +104,40 @@ const App = {
     const sessions = ref([]);
     const selectedElements = ref([]);
     const widgetRef = ref(null);
+    const chromeMcpFailed = ref(false);
+    const currentTask = ref("");
+    const serviceStatus = ref("idle");
+    const loadingText = computed(() => {
+      if (iframeLoading.value) return "\u52A0\u8F7D\u4E2D...";
+      if (!currentTask.value) return "\u52A0\u8F7D\u4E2D...";
+      return SERVICE_STARTUP_TASKS[currentTask.value] || "\u52A0\u8F7D\u4E2D...";
+    });
+    const retryingWarmup = ref(false);
+    const retryWarmup = () => __async(null, null, function* () {
+      retryingWarmup.value = true;
+      try {
+        const res = yield fetch("/__opencode_warmup__", { method: "POST" });
+        const data = yield res.json();
+        if (data.success) {
+          chromeMcpFailed.value = false;
+          serviceStatus.value = "ready";
+          showNotification("Chrome DevTools MCP \u8FDE\u63A5\u6210\u529F");
+        } else {
+          showNotification(data.error || "\u91CD\u8BD5\u5931\u8D25\uFF0C\u8BF7\u786E\u8BA4 Chrome \u8FDC\u7A0B\u8C03\u8BD5\u5DF2\u5F00\u542F");
+        }
+      } catch (e) {
+        console.error("[OpenCode] Retry warmup failed:", e);
+        showNotification("\u91CD\u8BD5\u5931\u8D25\uFF0C\u8BF7\u7A0D\u540E\u518D\u8BD5");
+      } finally {
+        retryingWarmup.value = false;
+      }
+    });
     const {
       position = "bottom-right",
       theme: initialTheme = "auto",
       open: autoOpen = false,
-      sessionUrl: initialSessionUrl = "",
+      // sessionUrl 不再从配置读取，完全依赖 SSE 状态同步
       proxyUrl: configProxyUrl = "",
-      lazy = false,
       hotkey = "ctrl+k",
       cwd = ""
     } = config;
@@ -115,18 +145,16 @@ const App = {
       proxyUrl = configProxyUrl;
     }
     const theme = ref(initialTheme);
-    const isWaitingForSession = ref(!initialSessionUrl);
-    const computedLoading = computed(() => loading.value || isWaitingForSession.value);
-    let servicesStarted = !lazy;
+    const showSessionListSkeleton = computed(() => serviceStatus.value === "starting");
+    const iframeLoading = ref(false);
+    const computedLoading = computed(() => {
+      return serviceStatus.value === "starting" || iframeLoading.value;
+    });
     const extractSessionId = (url) => {
       if (!url) return null;
       const match = url.match(/\/session\/([^/?]+)/);
       return match ? match[1] : null;
     };
-    currentSessionId.value = extractSessionId(initialSessionUrl);
-    if (servicesStarted && initialSessionUrl) {
-      iframeSrc.value = toProxyUrl(initialSessionUrl);
-    }
     try {
       const stored = sessionStorage.getItem("__opencode_selected_elements__");
       if (stored) {
@@ -200,38 +228,96 @@ const App = {
     const selectSession = (session) => {
       if (currentSessionId.value === session.id) return;
       currentSessionId.value = session.id;
-      loading.value = true;
+      iframeLoading.value = true;
       iframeSrc.value = `${proxyUrl}/${utf8ToBase64(cwd)}/session/${session.id}`;
-      setTimeout(() => {
-        loading.value = false;
-      }, 500);
     };
     let sseConnection = null;
+    let sseRetryCount = 0;
+    const MAX_SSE_RETRIES = 10;
+    const SSE_RETRY_DELAY = 1e3;
     const setupSSE = () => {
-      if (!servicesStarted || sseConnection) return;
-      sseConnection = new EventSource("/__opencode_events__");
-      sseConnection.onmessage = (event) => {
-        try {
-          const data = JSON.parse(event.data);
-          if (data.type === "CONNECTED") {
-            updateContext(true);
-          } else if (data.type === "SESSION_READY") {
-            if (data.sessionUrl && !iframeSrc.value) {
-              iframeSrc.value = toProxyUrl(data.sessionUrl);
-              currentSessionId.value = extractSessionId(data.sessionUrl);
+      if (sseConnection) return;
+      try {
+        sseConnection = new EventSource("/__opencode_events__");
+        sseConnection.onmessage = (event) => {
+          try {
+            const data = JSON.parse(event.data);
+            if (data.type === "CONNECTED") {
+              updateContext(true);
+              sseRetryCount = 0;
+            } else if (data.type === "STATUS_SYNC") {
+              if (data.isStarted !== void 0) {
+                if (data.isStarted && serviceStatus.value === "idle") {
+                  serviceStatus.value = "starting";
+                }
+              }
+              if (data.task) {
+                currentTask.value = data.task;
+                if (data.task === "ready") {
+                  serviceStatus.value = "ready";
+                  chromeMcpFailed.value = false;
+                  if (data.sessionUrl && !iframeSrc.value) {
+                    iframeSrc.value = toProxyUrl(data.sessionUrl);
+                    currentSessionId.value = extractSessionId(data.sessionUrl);
+                  }
+                } else if (data.task === "chrome_mcp_failed") {
+                  serviceStatus.value = "partial";
+                  chromeMcpFailed.value = true;
+                } else if (data.task === "session_creation_failed" || data.task === "opencode_not_installed" || data.task === "web_start_timeout") {
+                  serviceStatus.value = "failed";
+                } else if (serviceStatus.value === "idle") {
+                  serviceStatus.value = "starting";
+                }
+              }
+              if (serviceStatus.value !== "idle") {
+                loadSessions();
+              }
+            } else if (data.type === "TASK_UPDATE") {
+              currentTask.value = data.task;
+              if (data.task === "ready") {
+                serviceStatus.value = "ready";
+                chromeMcpFailed.value = false;
+                if (data.sessionUrl && !iframeSrc.value) {
+                  iframeSrc.value = toProxyUrl(data.sessionUrl);
+                  currentSessionId.value = extractSessionId(data.sessionUrl);
+                }
+              } else if (data.task === "chrome_mcp_failed") {
+                serviceStatus.value = "partial";
+                chromeMcpFailed.value = true;
+              } else if (data.task === "session_creation_failed" || data.task === "opencode_not_installed" || data.task === "web_start_timeout") {
+                serviceStatus.value = "failed";
+              } else if (serviceStatus.value === "idle") {
+                serviceStatus.value = "starting";
+              }
+            } else if (data.type === "CLEAR_ELEMENTS") {
+              selectedElements.value = [];
             }
-            isWaitingForSession.value = false;
-          } else if (data.type === "CLEAR_ELEMENTS") {
-            selectedElements.value = [];
+          } catch (e) {
+          }
+        };
+        sseConnection.onerror = () => {
+          sseConnection == null ? void 0 : sseConnection.close();
+          sseConnection = null;
+          if (serviceStatus.value === "ready" || serviceStatus.value === "partial") {
+            serviceStatus.value = "starting";
           }
-        } catch (e) {
+          if (sseRetryCount < MAX_SSE_RETRIES) {
+            sseRetryCount++;
+            setTimeout(setupSSE, SSE_RETRY_DELAY * sseRetryCount);
+          }
+        };
+      } catch (e) {
+        sseConnection = null;
+        if (sseRetryCount < MAX_SSE_RETRIES) {
+          sseRetryCount++;
+          setTimeout(setupSSE, SSE_RETRY_DELAY * sseRetryCount);
         }
-      };
+      }
     };
     let currentPageUrl = "";
     let currentPageTitle = "";
     const updateContext = (force = false) => {
-      if (!servicesStarted) return;
+      if (serviceStatus.value === "idle") return;
       const newUrl = window.location.href;
       const newTitle = document.title;
       if (force || newUrl !== currentPageUrl || newTitle !== currentPageTitle) {
@@ -250,17 +336,12 @@ const App = {
       }
     };
     const ensureServicesStarted = () => __async(null, null, function* () {
-      if (servicesStarted) return true;
+      if (serviceStatus.value !== "idle") return true;
       try {
         const res = yield fetch("/__opencode_start__");
         const data = yield res.json();
         if (data.success) {
-          servicesStarted = true;
-          if (data.sessionUrl) {
-            iframeSrc.value = toProxyUrl(data.sessionUrl);
-            currentSessionId.value = extractSessionId(data.sessionUrl);
-            isWaitingForSession.value = false;
-          }
+          serviceStatus.value = "starting";
           setupSSE();
           return true;
         }
@@ -271,28 +352,31 @@ const App = {
     const mainHotkey = parseHotkey(hotkey);
     const selectHotkey = parseHotkey("ctrl+p");
     onMounted(() => {
-      if (servicesStarted) {
+      if (serviceStatus.value !== "idle") {
         loadSessions();
         setupSSE();
         updateContext(true);
       }
-      if (autoOpen && servicesStarted) {
+      if (autoOpen && serviceStatus.value !== "idle") {
         setTimeout(() => {
           open.value = true;
         }, 1e3);
       }
       const originalPushState = history.pushState;
       const originalReplaceState = history.replaceState;
+      const scheduleContextUpdate = () => {
+        requestAnimationFrame(() => updateContext());
+      };
       history.pushState = function(...args) {
         originalPushState.apply(this, args);
-        setTimeout(updateContext, 0);
+        scheduleContextUpdate();
       };
       history.replaceState = function(...args) {
         originalReplaceState.apply(this, args);
-        setTimeout(updateContext, 0);
+        scheduleContextUpdate();
       };
-      window.addEventListener("popstate", () => setTimeout(updateContext, 0));
-      window.addEventListener("hashchange", () => setTimeout(updateContext, 0));
+      window.addEventListener("popstate", scheduleContextUpdate);
+      window.addEventListener("hashchange", scheduleContextUpdate);
       const titleObserver = new MutationObserver(() => {
         if (document.title !== currentPageTitle) updateContext();
       });
@@ -320,7 +404,7 @@ const App = {
       };
     });
     const handleToggle = (val) => __async(null, null, function* () {
-      if (lazy && !servicesStarted && val) {
+      if (serviceStatus.value === "idle" && val) {
         loading.value = true;
         const started = yield ensureServicesStarted();
         loading.value = false;
@@ -331,6 +415,9 @@ const App = {
       }
       open.value = val;
       if (val) updateContext();
+      if (val) {
+        iframeLoading.value = false;
+      }
     });
     const handleSelectNode = (element) => {
       const exists = selectedElements.value.some(
@@ -350,48 +437,116 @@ const App = {
       showNotification("\u5DF2\u6E05\u9664\u6240\u6709\u9009\u4E2D\u5143\u7D20");
     };
     return () => {
-      return h(OpenCodeWidget, {
-        ref: widgetRef,
-        position,
-        theme: theme.value,
-        open: open.value,
-        selectMode: selectMode.value,
-        sessionListCollapsed: sessionListCollapsed.value,
-        loading: computedLoading.value,
-        loadingSessionList: loadingSessionList.value,
-        iframeSrc: iframeSrc.value,
-        currentSessionId: currentSessionId.value,
-        sessions: sessions.value,
-        sessionKey: "id",
-        selectedElements: selectedElements.value,
-        hotkeyLabel: hotkey,
-        "onUpdate:open": handleToggle,
-        "onUpdate:selectMode": (val) => {
-          selectMode.value = val;
-          if (!val && !open.value) {
-            open.value = true;
+      return h(
+        OpenCodeWidget,
+        {
+          ref: widgetRef,
+          position,
+          theme: theme.value,
+          open: open.value,
+          selectMode: selectMode.value,
+          sessionListCollapsed: sessionListCollapsed.value,
+          frameLoading: computedLoading.value,
+          loadingSessionList: loadingSessionList.value,
+          showSessionListSkeleton: showSessionListSkeleton.value,
+          showError: chromeMcpFailed.value,
+          iframeSrc: iframeSrc.value,
+          currentSessionId: currentSessionId.value,
+          sessions: sessions.value,
+          sessionKey: "id",
+          selectedElements: selectedElements.value,
+          hotkeyLabel: hotkey,
+          "onUpdate:open": handleToggle,
+          "onUpdate:selectMode": (val) => {
+            selectMode.value = val;
+            if (!val && !open.value) {
+              open.value = true;
+            }
+          },
+          "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,
+          "onClick-selected-node": handleSelectNode,
+          "onClear-selected-nodes": handleClearSelected,
+          "onRemove-selected-node": ({ index }) => {
+            selectedElements.value.splice(index, 1);
+            updateContext(true);
+          },
+          "onEmpty-action": createSession,
+          "onFrame-loaded": () => {
+            iframeLoading.value = false;
           }
         },
-        "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,
-        "onClick-selected-node": handleSelectNode,
-        "onClear-selected-nodes": handleClearSelected,
-        "onRemove-selected-node": ({ index }) => {
-          selectedElements.value.splice(index, 1);
-          updateContext(true);
-        },
-        "onEmpty-action": createSession
-      });
+        {
+          loading: () => h("div", { class: "opencode-custom-loading" }, [
+            h("div", { class: "opencode-loading-spinner" }),
+            h("div", { class: "opencode-loading-text" }, loadingText.value)
+          ]),
+          error: () => chromeMcpFailed.value ? h("div", { class: "opencode-chrome-warmup-failed" }, [
+            h("div", { class: "opencode-chrome-warmup-failed-icon" }, [
+              h(
+                "svg",
+                {
+                  viewBox: "0 0 24 24",
+                  width: "48",
+                  height: "48",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5"
+                },
+                [
+                  h("path", {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+                  })
+                ]
+              )
+            ]),
+            h(
+              "div",
+              { class: "opencode-chrome-warmup-failed-title" },
+              "Chrome DevTools MCP \u8FDE\u63A5\u5931\u8D25"
+            ),
+            h("div", { class: "opencode-chrome-warmup-failed-text" }, [
+              h("p", {}, "\u8BF7\u6309\u4EE5\u4E0B\u6B65\u9AA4\u5F00\u542F Chrome \u8FDC\u7A0B\u8C03\u8BD5\uFF1A"),
+              h("ol", { class: "opencode-chrome-warmup-steps" }, [
+                h("li", {}, [
+                  "\u5728 Chrome \u5730\u5740\u680F\u8F93\u5165 ",
+                  h(
+                    "code",
+                    { class: "opencode-chrome-warmup-code" },
+                    "chrome://inspect/#remote-debugging"
+                  )
+                ]),
+                h("li", {}, "\u52FE\u9009 'Allow remote debugging for this browser instance' \u9009\u9879"),
+                h("li", {}, "\u91CD\u65B0\u542F\u52A8\u6D4F\u89C8\u5668"),
+                h("li", {}, "\u5B8C\u6210\u540E\u70B9\u51FB\u4E0B\u65B9\u6309\u94AE\u91CD\u8BD5")
+              ])
+            ]),
+            h("div", { class: "opencode-chrome-warmup-failed-actions" }, [
+              h(
+                "button",
+                {
+                  class: "opencode-chrome-warmup-failed-btn primary",
+                  disabled: retryingWarmup.value,
+                  onClick: retryWarmup
+                },
+                retryingWarmup.value ? "\u8FDE\u63A5\u4E2D..." : "\u91CD\u8BD5\u8FDE\u63A5"
+              )
+            ])
+          ]) : null
+        }
+      );
     };
   }
 };
@@ -400,5 +555,148 @@ if (!window[INIT_MARKER]) {
   window[INIT_MARKER] = true;
   const container = document.createElement("div");
   document.body.appendChild(container);
-  createApp(App).mount(container);
+  const app = createApp(App);
+  app.mount(container);
+  window.__OPENCODE_CLEANUP__ = () => {
+    app.unmount();
+    container.remove();
+    window[INIT_MARKER] = false;
+  };
+}
+const style = document.createElement("style");
+style.textContent = `
+.opencode-custom-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.opencode-loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--oc-border);
+  border-top-color: var(--oc-primary);
+  border-radius: 50%;
+  animation: opencode-spin 0.8s linear infinite;
+}
+
+@keyframes opencode-spin {
+  to { transform: rotate(360deg); }
+}
+
+.opencode-loading-text {
+  margin-top: 12px;
+  color: var(--oc-text-secondary);
+  font-size: 14px;
+}
+
+.opencode-chrome-warmup-failed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--oc-bg-secondary);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 15;
+}
+
+.opencode-chrome-warmup-failed-icon {
+  color: var(--oc-warning, #f59e0b);
+  margin-bottom: 16px;
+}
+
+.opencode-chrome-warmup-failed-title {
+  color: var(--oc-text-primary);
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.opencode-chrome-warmup-failed-text {
+  color: var(--oc-text-secondary);
+  font-size: 14px;
+  margin-bottom: 24px;
+  text-align: left;
+  max-width: 400px;
+  line-height: 1.6;
+  text-align: center;
+}
+
+.opencode-chrome-warmup-failed-text p {
+  margin: 0 0 12px 0;
+  font-weight: 500;
+  color: var(--oc-text-primary);
+}
+
+.opencode-chrome-warmup-steps {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.opencode-chrome-warmup-steps li {
+  margin-bottom: 8px;
+  color: var(--oc-text-secondary);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.opencode-chrome-warmup-steps li:last-child {
+  margin-bottom: 0;
+}
+
+.opencode-chrome-warmup-code {
+  display: inline-block;
+  background: var(--oc-bg-tertiary);
+  color: var(--oc-primary);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 12px;
+  font-weight: 500;
+  word-break: break-all;
+  margin: 0 2px;
+}
+
+.opencode-chrome-warmup-failed-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.opencode-chrome-warmup-failed-btn {
+  padding: 10px 24px;
+  border-radius: 8px;
+  border: none;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.opencode-chrome-warmup-failed-btn.primary {
+  background: var(--oc-primary);
+  color: white;
+  box-shadow: var(--oc-shadow-primary);
+}
+
+.opencode-chrome-warmup-failed-btn.primary:hover:not(:disabled) {
+  background: var(--oc-primary-hover);
+  transform: translateY(-1px);
+  box-shadow: var(--oc-shadow-primary-hover);
+}
+
+.opencode-chrome-warmup-failed-btn.primary:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.opencode-chrome-warmup-failed-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
 }
+`;
+document.head.appendChild(style);

package/es/core/api.d.ts

@@ -11,4 +11,5 @@ export declare class OpenCodeAPI {
     getToolIds(retries?: number): Promise<string[]>;
     warmupChromeMcp(viteOrigin?: string): Promise<void>;
     getOrCreateSession(): Promise<string>;
+    retryWarmupChromeMcp(viteOrigin?: string): Promise<boolean>;
 }