vite-plugin-opencode-assistant 1.0.3 → 1.0.4

package/dist/vite/client.js

@@ -4,11 +4,11 @@
  * @description 用于在浏览器中显示 OpenCode AI 助手挂件
  */
 (function () {
-    'use strict';
+    "use strict";
     /** @type {string} 初始化标记 */
-    const INIT_MARKER = '__OPENCODE_INITIALIZED__';
+    const INIT_MARKER = "__OPENCODE_INITIALIZED__";
     /** @type {string} 选中元素存储键 */
-    const SELECTED_ELEMENTS_KEY = '__opencode_selected_elements__';
+    const SELECTED_ELEMENTS_KEY = "__opencode_selected_elements__";
     /** @type {number} 服务器同步间隔（毫秒） */
     const SERVER_SYNC_INTERVAL = 2000;
     /** @type {number} 检查 Vue Inspector 间隔（毫秒） */
@@ -50,11 +50,26 @@
         if (window[INIT_MARKER])
             return;
         window[INIT_MARKER] = true;
-        const { webUrl, position, theme, open, sessionUrl, lazy, hotkey, cwd } = config;
+        const { webUrl, position, theme, open, sessionUrl: initialSessionUrl, lazy, hotkey, cwd, } = config;
+        /** @type {string|undefined} 会话 URL */
+        let sessionUrl = initialSessionUrl;
+        /** @type {string|null} 当前会话 ID */
+        let currentSessionId = null;
+        /**
+         * 从 URL 中提取会话 ID
+         */
+        function extractSessionId(url) {
+            if (!url)
+                return null;
+            const match = url.match(/\/session\/([^/?]+)/);
+            return match ? match[1] : null;
+        }
+        // 从初始 URL 中提取会话 ID
+        currentSessionId = extractSessionId(sessionUrl);
         /** @type {string} 当前页面 URL */
-        let currentPageUrl = '';
+        let currentPageUrl = "";
         /** @type {string} 当前页面标题 */
-        let currentPageTitle = '';
+        let currentPageTitle = "";
         /** @type {boolean} 服务是否已启动 */
         let servicesStarted = !lazy;
         /** @type {boolean} 挂件是否打开 */
@@ -66,20 +81,22 @@
          */
         function parseHotkey(hotkeyStr) {
             if (!hotkeyStr)
-                return { ctrl: true, shift: false, alt: false, key: 'k' };
-            const parts = hotkeyStr.toLowerCase().split('+');
+                return { ctrl: true, shift: false, alt: false, key: "k" };
+            const parts = hotkeyStr.toLowerCase().split("+");
             const key = parts.pop();
             return {
-                ctrl: parts.includes('ctrl') || parts.includes('cmd') || parts.includes('meta'),
-                shift: parts.includes('shift'),
-                alt: parts.includes('alt'),
-                key: key || 'k'
+                ctrl: parts.includes("ctrl") ||
+                    parts.includes("cmd") ||
+                    parts.includes("meta"),
+                shift: parts.includes("shift"),
+                alt: parts.includes("alt"),
+                key: key || "k",
             };
         }
         /** @type {HotkeyConfig} 主快捷键配置 */
         const mainHotkey = parseHotkey(hotkey);
         /** @type {HotkeyConfig} 选择模式快捷键配置 */
-        const selectHotkey = parseHotkey('ctrl+p');
+        const selectHotkey = parseHotkey("ctrl+p");
         /**
          * 检查键盘事件是否匹配快捷键
          * @param {KeyboardEvent} e - 键盘事件
@@ -87,7 +104,9 @@
          * @returns {boolean} 是否匹配
          */
         function matchHotkey(e, hotkeyConfig) {
-            const ctrlMatch = hotkeyConfig.ctrl ? (e.ctrlKey || e.metaKey) : !(e.ctrlKey || e.metaKey);
+            const ctrlMatch = hotkeyConfig.ctrl
+                ? e.ctrlKey || e.metaKey
+                : !(e.ctrlKey || e.metaKey);
             const shiftMatch = hotkeyConfig.shift ? e.shiftKey : !e.shiftKey;
             const altMatch = hotkeyConfig.alt ? e.altKey : !e.altKey;
             const keyMatch = e.key.toLowerCase() === hotkeyConfig.key.toLowerCase();
@@ -131,18 +150,26 @@
             if (servicesStarted)
                 return true;
             try {
-                const res = await fetch('/__opencode_start__');
+                const res = await fetch("/__opencode_start__");
                 const data = await res.json();
                 if (data.success) {
                     servicesStarted = true;
-                    if (data.sessionUrl && iframe) {
-                        iframe.src = data.sessionUrl;
+                    if (data.sessionUrl) {
+                        sessionUrl = data.sessionUrl;
+                        currentSessionId = extractSessionId(sessionUrl);
+                        if (iframe)
+                            iframe.src = sessionUrl;
+                    }
+                    else {
+                        if (iframe)
+                            iframe.src = "about:blank";
+                        showLoading();
                     }
                     return true;
                 }
             }
             catch (e) {
-                console.error('[OpenCode Widget] Failed to start services:', e);
+                console.error("[OpenCode Widget] Failed to start services:", e);
             }
             return false;
         }
@@ -158,10 +185,14 @@
             if (force || newUrl !== currentPageUrl || newTitle !== currentPageTitle) {
                 currentPageUrl = newUrl;
                 currentPageTitle = newTitle;
-                fetch('/__opencode_context__', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ url: newUrl, title: newTitle, selectedElements })
+                fetch("/__opencode_context__", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({
+                        url: newUrl,
+                        title: newTitle,
+                        selectedElements,
+                    }),
                 }).catch(() => { });
             }
         }
@@ -176,8 +207,8 @@
             originalReplaceState.apply(this, args);
             setTimeout(updateContext, 0);
         };
-        window.addEventListener('popstate', () => setTimeout(updateContext, 0));
-        window.addEventListener('hashchange', () => setTimeout(updateContext, 0));
+        window.addEventListener("popstate", () => setTimeout(updateContext, 0));
+        window.addEventListener("hashchange", () => setTimeout(updateContext, 0));
         // 监听标题变化
         const titleObserver = new MutationObserver(() => {
             if (document.title !== currentPageTitle) {
@@ -187,113 +218,114 @@
         if (document.head) {
             titleObserver.observe(document.head, { childList: true, subtree: true });
         }
+        /** @type {EventSource|null} SSE 连接实例 */
+        let sseConnection = null;
         if (servicesStarted) {
             updateContext(true);
+            setupSSEConnection();
         }
-        /** @type {string} iframe URL */
-        const iframeUrl = sessionUrl || webUrl;
         // 创建样式
-        const style = document.createElement('style');
+        const style = document.createElement("style");
         style.textContent = buildWidgetStyles();
         document.head.appendChild(style);
         // 创建容器
-        const container = document.createElement('div');
+        const container = document.createElement("div");
         container.className = `opencode-widget ${position}`;
         // 创建按钮
-        const button = document.createElement('button');
-        button.className = 'opencode-button';
+        const button = document.createElement("button");
+        button.className = "opencode-button";
         button.innerHTML = `
       <svg t="1775402599580" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns=" http://www.w3.org/2000/svg " p-id="5390" xmlns:xlink=" http://www.w3.org/1999/xlink " width="100%" height="100%"><path d="M512 981.33H85.34c-15.85 0-30.38-8.77-37.77-22.81a42.624 42.624 0 0 1 2.6-44.02L135 791.08C75.25 710.5 42.67 612.6 42.67 512 42.67 253.21 253.21 42.67 512 42.67S981.34 253.21 981.34 512 770.8 981.33 512 981.33zM166.44 896H512c211.73 0 384-172.27 384-384S723.73 128 512 128 128 300.27 128 512c0 91.29 32.83 179.9 92.46 249.46 12.58 14.69 13.73 36 2.77 51.94L166.44 896z" fill="white" p-id="5391"></path><path d="M384 448m-64 0a64 64 0 1 0 128 0 64 64 0 1 0 -128 0Z" fill="white" p-id="5392"></path><path d="M640 448m-64 0a64 64 0 1 0 128 0 64 64 0 1 0 -128 0Z" fill="white" p-id="5393"></path></svg>
     `;
-        button.setAttribute('aria-label', '打开 AI 助手');
-        button.title = `AI 助手 (${hotkey || 'Ctrl+K'})`;
+        button.setAttribute("aria-label", "打开 AI 助手");
+        button.title = `AI 助手 (${hotkey || "Ctrl+K"})`;
         // 创建聊天面板
-        const chat = document.createElement('div');
-        chat.className = 'opencode-chat';
-        chat.setAttribute('role', 'dialog');
-        chat.setAttribute('aria-modal', 'true');
-        chat.setAttribute('aria-label', 'AI 助手对话窗口');
+        const chat = document.createElement("div");
+        chat.className = "opencode-chat";
+        chat.setAttribute("role", "dialog");
+        chat.setAttribute("aria-modal", "true");
+        chat.setAttribute("aria-label", "AI 助手对话窗口");
         // 创建面板头部操作栏
-        const chatHeader = document.createElement('div');
-        chatHeader.className = 'opencode-chat-header';
+        const chatHeader = document.createElement("div");
+        chatHeader.className = "opencode-chat-header";
         // 左侧操作区
-        const headerLeft = document.createElement('div');
-        headerLeft.className = 'opencode-chat-header-left';
+        const headerLeft = document.createElement("div");
+        headerLeft.className = "opencode-chat-header-left";
         // 会话列表折叠按钮
-        const toggleBtn = document.createElement('button');
-        toggleBtn.className = 'opencode-header-btn session-toggle';
+        const toggleBtn = document.createElement("button");
+        toggleBtn.className = "opencode-header-btn session-toggle";
         toggleBtn.innerHTML = `
       <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
         <path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round"/>
       </svg>
     `;
-        toggleBtn.title = '展开会话列表';
-        toggleBtn.setAttribute('aria-label', '展开会话列表');
-        toggleBtn.setAttribute('aria-expanded', 'false');
+        toggleBtn.title = "展开会话列表";
+        toggleBtn.setAttribute("aria-label", "展开会话列表");
+        toggleBtn.setAttribute("aria-expanded", "false");
         // 选择元素按钮
-        const selectButton = document.createElement('button');
-        selectButton.className = 'opencode-header-btn select-btn';
+        const selectButton = document.createElement("button");
+        selectButton.className = "opencode-header-btn select-btn";
         selectButton.innerHTML = `
       <svg viewBox="0 0 1024 1024" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
         <path fill="currentColor" d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896"></path><path fill="currentColor" d="M512 96a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V128a32 32 0 0 1 32-32m0 576a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V704a32 32 0 0 1 32-32M96 512a32 32 0 0 1 32-32h192a32 32 0 0 1 0 64H128a32 32 0 0 1-32-32m576 0a32 32 0 0 1 32-32h192a32 32 0 1 1 0 64H704a32 32 0 0 1-32-32"></path>
       </svg>
     `;
-        selectButton.title = '选择页面元素 (Ctrl+P)';
-        selectButton.setAttribute('aria-label', '选择页面元素');
-        selectButton.setAttribute('aria-pressed', 'false');
+        selectButton.title = "选择页面元素 (Ctrl+P)";
+        selectButton.setAttribute("aria-label", "选择页面元素");
+        selectButton.setAttribute("aria-pressed", "false");
         headerLeft.appendChild(toggleBtn);
         headerLeft.appendChild(selectButton);
         // 标题
-        const headerTitle = document.createElement('span');
-        headerTitle.className = 'opencode-chat-header-title';
-        headerTitle.textContent = 'AI 助手';
+        const headerTitle = document.createElement("span");
+        headerTitle.className = "opencode-chat-header-title";
+        headerTitle.textContent = "AI 助手";
         // 右侧操作区
-        const headerActions = document.createElement('div');
-        headerActions.className = 'opencode-chat-header-actions';
+        const headerActions = document.createElement("div");
+        headerActions.className = "opencode-chat-header-actions";
         // 关闭按钮
-        const closeBtn = document.createElement('button');
-        closeBtn.className = 'opencode-header-btn close';
+        const closeBtn = document.createElement("button");
+        closeBtn.className = "opencode-header-btn close";
         closeBtn.innerHTML = `
       <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
         <path d="M18 6L6 18M6 6l12 12"/>
       </svg>
     `;
-        closeBtn.title = '关闭';
-        closeBtn.setAttribute('aria-label', '关闭面板');
-        closeBtn.addEventListener('click', () => {
+        closeBtn.title = "关闭";
+        closeBtn.setAttribute("aria-label", "关闭面板");
+        closeBtn.addEventListener("click", () => {
             isOpen = false;
-            chat.classList.remove('open');
-            button.classList.remove('active');
+            chat.classList.remove("open");
+            button.classList.remove("active");
         });
         headerActions.appendChild(closeBtn);
         chatHeader.appendChild(headerLeft);
         chatHeader.appendChild(headerTitle);
         chatHeader.appendChild(headerActions);
         // 创建会话列表
-        const sessionList = document.createElement('div');
-        sessionList.className = 'opencode-session-list collapsed';
+        const sessionList = document.createElement("div");
+        sessionList.className = "opencode-session-list collapsed";
         // 创建会话列表头部
-        const sessionListHeader = document.createElement('div');
-        sessionListHeader.className = 'opencode-session-list-header';
+        const sessionListHeader = document.createElement("div");
+        sessionListHeader.className = "opencode-session-list-header";
         sessionListHeader.innerHTML = `
       <span id="opencode-session-list-title">会话列表</span>
       <button class="opencode-new-session-btn" title="新建会话" aria-label="新建会话">+</button>
     `;
         // 创建会话列表头部骨架屏
-        const sessionHeaderSkeleton = document.createElement('div');
-        sessionHeaderSkeleton.className = 'opencode-session-header-skeleton';
+        const sessionHeaderSkeleton = document.createElement("div");
+        sessionHeaderSkeleton.className = "opencode-session-header-skeleton";
         sessionHeaderSkeleton.innerHTML = `
       <div class="opencode-skeleton-header-title"></div>
       <div class="opencode-skeleton-header-btn"></div>
     `;
         // 创建会话列表内容
-        const sessionListContent = document.createElement('div');
-        sessionListContent.className = 'opencode-session-list-content';
-        sessionListContent.setAttribute('role', 'listbox');
-        sessionListContent.setAttribute('aria-labelledby', 'opencode-session-list-title');
+        const sessionListContent = document.createElement("div");
+        sessionListContent.className = "opencode-session-list-content";
+        sessionListContent.setAttribute("role", "listbox");
+        sessionListContent.setAttribute("aria-labelledby", "opencode-session-list-title");
         // 创建会话列表内容骨架屏
-        const sessionSkeleton = document.createElement('div');
-        sessionSkeleton.className = 'opencode-session-skeleton';
+        const sessionSkeleton = document.createElement("div");
+        sessionSkeleton.className = "opencode-session-skeleton";
         sessionSkeleton.innerHTML = `
       <div class="opencode-skeleton-item">
         <div class="opencode-skeleton-title"></div>
@@ -325,96 +357,126 @@
         function toggleSessionList() {
             isSessionListCollapsed = !isSessionListCollapsed;
             if (!isSessionListCollapsed) {
-                sessionHeaderSkeleton.classList.add('visible');
-                sessionListHeader.style.display = 'none';
-                sessionSkeleton.classList.add('visible');
-                sessionListContent.style.display = 'none';
+                sessionHeaderSkeleton.classList.add("visible");
+                sessionListHeader.style.display = "none";
+                sessionSkeleton.classList.add("visible");
+                sessionListContent.style.display = "none";
             }
-            sessionList.classList.toggle('collapsed', isSessionListCollapsed);
-            toggleBtn.title = isSessionListCollapsed ? '展开会话列表' : '折叠会话列表';
-            toggleBtn.setAttribute('aria-label', isSessionListCollapsed ? '展开会话列表' : '折叠会话列表');
-            toggleBtn.setAttribute('aria-expanded', String(!isSessionListCollapsed));
+            sessionList.classList.toggle("collapsed", isSessionListCollapsed);
+            toggleBtn.title = isSessionListCollapsed
+                ? "展开会话列表"
+                : "折叠会话列表";
+            toggleBtn.setAttribute("aria-label", isSessionListCollapsed ? "展开会话列表" : "折叠会话列表");
+            toggleBtn.setAttribute("aria-expanded", String(!isSessionListCollapsed));
             if (!isSessionListCollapsed) {
                 setTimeout(() => {
-                    sessionHeaderSkeleton.classList.remove('visible');
-                    sessionListHeader.style.display = '';
-                    sessionSkeleton.classList.remove('visible');
-                    sessionListContent.style.display = '';
+                    sessionHeaderSkeleton.classList.remove("visible");
+                    sessionListHeader.style.display = "";
+                    sessionSkeleton.classList.remove("visible");
+                    sessionListContent.style.display = "";
                 }, 200);
             }
         }
-        toggleBtn.addEventListener('click', toggleSessionList);
+        toggleBtn.addEventListener("click", toggleSessionList);
         // 创建 iframe 容器
-        const iframeContainer = document.createElement('div');
-        iframeContainer.className = 'opencode-iframe-container';
+        const iframeContainer = document.createElement("div");
+        iframeContainer.className = "opencode-iframe-container";
         // 创建加载指示器
-        const loadingOverlay = document.createElement('div');
-        loadingOverlay.className = 'opencode-loading-overlay';
+        const loadingOverlay = document.createElement("div");
+        loadingOverlay.className = "opencode-loading-overlay";
         loadingOverlay.innerHTML = `
       <div class="opencode-loading-spinner"></div>
       <div class="opencode-loading-text">加载中...</div>
     `;
+        // 创建空状态提示
+        const emptyStateOverlay = document.createElement("div");
+        emptyStateOverlay.className = "opencode-empty-state-overlay";
+        emptyStateOverlay.innerHTML = `
+      <div class="opencode-empty-state-icon">
+        <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+        </svg>
+      </div>
+      <div class="opencode-empty-state-text">当前项目暂无会话</div>
+      <button class="opencode-empty-state-btn">立即创建</button>
+    `;
+        emptyStateOverlay
+            .querySelector(".opencode-empty-state-btn")
+            .addEventListener("click", () => {
+            createNewSession();
+        });
         // 创建 iframe
-        const iframe = document.createElement('iframe');
-        iframe.className = 'opencode-iframe';
-        iframe.src = servicesStarted ? iframeUrl : 'about:blank';
-        iframe.allow = 'clipboard-write; clipboard-read';
-        iframe.referrerPolicy = 'origin';
+        const iframe = document.createElement("iframe");
+        iframe.className = "opencode-iframe";
+        iframe.src = servicesStarted && sessionUrl ? sessionUrl : "about:blank";
+        iframe.allow = "clipboard-write; clipboard-read";
+        iframe.referrerPolicy = "origin";
+        if (servicesStarted && !sessionUrl) {
+            showLoading();
+        }
         iframe.onload = function () {
-            if (servicesStarted) {
+            if (servicesStarted &&
+                iframe.src !== "about:blank" &&
+                iframe.src !== window.location.href) {
                 updateContext();
                 loadSessions();
-                setupSSEConnection();
             }
-            hideLoading();
+            if (iframe.src !== "about:blank" && iframe.src !== window.location.href) {
+                hideLoading();
+            }
         };
+        iframeContainer.appendChild(emptyStateOverlay);
         iframeContainer.appendChild(loadingOverlay);
         iframeContainer.appendChild(iframe);
         // 创建右侧工具栏
-        const rightToolbar = document.createElement('div');
-        rightToolbar.className = `opencode-right-toolbar${selectedElements.length === 0 ? ' collapsed' : ''}`;
+        const rightToolbar = document.createElement("div");
+        rightToolbar.className = `opencode-right-toolbar${selectedElements.length === 0 ? " collapsed" : ""}`;
         // 创建已选节点标题
-        const selectedNodesHeader = document.createElement('div');
-        selectedNodesHeader.className = 'opencode-selected-nodes-header';
+        const selectedNodesHeader = document.createElement("div");
+        selectedNodesHeader.className = "opencode-selected-nodes-header";
         selectedNodesHeader.innerHTML = `
       <div class="opencode-selected-nodes-title">已选节点</div>
       <div class="opencode-selected-nodes-desc">选中的节点会在对话时一起发送给助手</div>
     `;
         // 创建已选节点容器
-        const selectedNodesContainer = document.createElement('div');
-        selectedNodesContainer.className = 'opencode-selected-nodes';
-        selectedNodesContainer.setAttribute('role', 'list');
-        selectedNodesContainer.setAttribute('aria-label', '已选元素列表');
+        const selectedNodesContainer = document.createElement("div");
+        selectedNodesContainer.className = "opencode-selected-nodes";
+        selectedNodesContainer.setAttribute("role", "list");
+        selectedNodesContainer.setAttribute("aria-label", "已选元素列表");
         // 创建清空按钮
-        const clearAllButton = document.createElement('button');
-        clearAllButton.className = 'opencode-clear-all-btn';
-        clearAllButton.setAttribute('aria-label', '清空所有已选节点');
-        clearAllButton.innerHTML = '一键清空';
+        const clearAllButton = document.createElement("button");
+        clearAllButton.className = "opencode-clear-all-btn";
+        clearAllButton.setAttribute("aria-label", "清空所有已选节点");
+        clearAllButton.innerHTML = "一键清空";
         rightToolbar.appendChild(selectedNodesHeader);
         rightToolbar.appendChild(selectedNodesContainer);
         rightToolbar.appendChild(clearAllButton);
         // 创建选择模式常驻提示（固定到页面顶部）
-        const selectModeHint = document.createElement('div');
-        selectModeHint.className = 'opencode-select-mode-hint';
+        const selectModeHint = document.createElement("div");
+        selectModeHint.className = "opencode-select-mode-hint";
         selectModeHint.innerHTML = `
       <span>🎯 选择模式已开启 - 点击元素进行选择</span>
       <span class="opencode-hint-shortcut">按 ESC 或 Ctrl+P 退出</span>
     `;
         // 创建元素高亮覆盖层
-        const elementHighlight = document.createElement('div');
-        elementHighlight.className = 'opencode-element-highlight';
+        const elementHighlight = document.createElement("div");
+        elementHighlight.className = "opencode-element-highlight";
         // 创建元素信息提示框
-        const elementTooltip = document.createElement('div');
-        elementTooltip.className = 'opencode-element-tooltip';
+        const elementTooltip = document.createElement("div");
+        elementTooltip.className = "opencode-element-tooltip";
         // 创建已选节点气泡容器（气泡按钮上方）
-        const selectedBubbles = document.createElement('div');
-        selectedBubbles.className = 'opencode-selected-bubbles';
-        selectedBubbles.setAttribute('role', 'list');
-        selectedBubbles.setAttribute('aria-label', '已选元素列表');
-        chat.appendChild(sessionList);
+        const selectedBubbles = document.createElement("div");
+        selectedBubbles.className = "opencode-selected-bubbles";
+        selectedBubbles.setAttribute("role", "list");
+        selectedBubbles.setAttribute("aria-label", "已选元素列表");
+        // 创建内容容器
+        const chatContent = document.createElement("div");
+        chatContent.className = "opencode-chat-content";
         chat.appendChild(chatHeader);
-        chat.appendChild(iframeContainer);
-        chat.appendChild(rightToolbar);
+        chatContent.appendChild(sessionList);
+        chatContent.appendChild(iframeContainer);
+        chatContent.appendChild(rightToolbar);
+        chat.appendChild(chatContent);
         container.appendChild(button);
         container.appendChild(selectedBubbles);
         container.appendChild(chat);
@@ -427,81 +489,77 @@
         }
         /** @type {Array} 会话列表 */
         let sessions = [];
-        /** @type {string|null} 当前会话 ID */
-        let currentSessionId = null;
-        /**
-         * 从 URL 中提取会话 ID
-         */
-        function extractSessionId(url) {
-            if (!url)
-                return null;
-            const match = url.match(/\/session\/([^/?]+)/);
-            return match ? match[1] : null;
-        }
-        // 从初始 URL 中提取会话 ID
-        currentSessionId = extractSessionId(sessionUrl);
         /**
          * 显示加载状态
          */
         function showLoading() {
-            loadingOverlay.classList.add('visible');
+            loadingOverlay.classList.add("visible");
         }
         /**
          * 隐藏加载状态
          */
         function hideLoading() {
-            loadingOverlay.classList.remove('visible');
+            loadingOverlay.classList.remove("visible");
         }
         /**
          * 加载会话列表
          */
         async function loadSessions() {
             try {
-                const response = await fetch('/__opencode_sessions__');
+                const response = await fetch("/__opencode_sessions__");
                 sessions = await response.json();
                 renderSessionList();
             }
             catch (e) {
-                console.error('Failed to load sessions:', e);
+                console.error("Failed to load sessions:", e);
             }
         }
         /**
          * 渲染会话列表
          */
         function renderSessionList() {
-            sessionListContent.innerHTML = '';
-            const currentProjectSessions = sessions.filter(session => session.directory === cwd);
-            currentProjectSessions.forEach(session => {
-                const item = document.createElement('div');
-                item.className = 'opencode-session-item';
-                item.setAttribute('role', 'option');
-                item.setAttribute('aria-selected', String(session.id === currentSessionId));
+            sessionListContent.innerHTML = "";
+            const currentProjectSessions = sessions.filter((session) => session.directory === cwd);
+            if (currentProjectSessions.length === 0) {
+                emptyStateOverlay.classList.add("visible");
+                iframe.style.display = "none";
+            }
+            else {
+                emptyStateOverlay.classList.remove("visible");
+                iframe.style.display = "";
+            }
+            currentProjectSessions.forEach((session) => {
+                const item = document.createElement("div");
+                item.className = "opencode-session-item";
+                item.setAttribute("role", "option");
+                item.setAttribute("aria-selected", String(session.id === currentSessionId));
                 if (session.id === currentSessionId) {
-                    item.classList.add('active');
+                    item.classList.add("active");
                 }
-                const header = document.createElement('div');
-                header.className = 'opencode-session-header';
-                const title = document.createElement('div');
-                title.className = 'opencode-session-title';
-                title.textContent = session.title || '新会话';
-                const deleteBtn = document.createElement('button');
-                deleteBtn.className = 'opencode-session-delete-btn';
-                deleteBtn.innerHTML = '×';
-                deleteBtn.title = '删除会话';
-                deleteBtn.setAttribute('aria-label', `删除会话: ${session.title || '新会话'}`);
-                deleteBtn.addEventListener('click', (e) => {
+                const header = document.createElement("div");
+                header.className = "opencode-session-header";
+                const title = document.createElement("div");
+                title.className = "opencode-session-title";
+                title.textContent = session.title || "新会话";
+                const deleteBtn = document.createElement("button");
+                deleteBtn.className = "opencode-session-delete-btn";
+                deleteBtn.innerHTML = "×";
+                deleteBtn.title = "删除会话";
+                deleteBtn.setAttribute("aria-label", `删除会话: ${session.title || "新会话"}`);
+                deleteBtn.addEventListener("click", (e) => {
                     e.stopPropagation();
                     confirmDeleteSession(session);
                 });
                 header.appendChild(title);
                 header.appendChild(deleteBtn);
-                const meta = document.createElement('div');
-                meta.className = 'opencode-session-meta';
+                const meta = document.createElement("div");
+                meta.className = "opencode-session-meta";
                 const date = new Date(session.time.updated);
-                meta.textContent = date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
+                meta.textContent =
+                    date.toLocaleDateString() + " " + date.toLocaleTimeString();
                 item.appendChild(header);
                 item.appendChild(meta);
-                item.addEventListener('click', () => {
+                item.addEventListener("click", () => {
                     switchSession(session);
                 });
                 sessionListContent.appendChild(item);
@@ -516,7 +574,7 @@
             }
             currentSessionId = session.id;
             const encodedDir = btoa(cwd);
-            const baseUrl = iframeUrl.split('/').slice(0, 3).join('/');
+            const baseUrl = webUrl;
             showLoading();
             iframe.src = `${baseUrl}/${encodedDir}/session/${session.id}`;
             renderSessionList();
@@ -526,23 +584,23 @@
          */
         async function createNewSession() {
             try {
-                const response = await fetch('/__opencode_sessions__', {
-                    method: 'POST'
+                const response = await fetch("/__opencode_sessions__", {
+                    method: "POST",
                 });
                 const newSession = await response.json();
                 sessions.unshift(newSession);
                 switchSession(newSession);
             }
             catch (e) {
-                console.error('Failed to create session:', e);
-                showNotification('创建会话失败');
+                console.error("Failed to create session:", e);
+                showNotification("创建会话失败");
             }
         }
         /**
          * 确认删除会话
          */
         async function confirmDeleteSession(session) {
-            const confirmed = await showConfirmDialog(`确定要删除会话 "${session.title || '新会话'}" 吗？`);
+            const confirmed = await showConfirmDialog(`确定要删除会话 "${session.title || "新会话"}" 吗？`);
             if (confirmed) {
                 deleteSession(session);
             }
@@ -553,60 +611,65 @@
         async function deleteSession(session) {
             try {
                 const response = await fetch(`/__opencode_sessions__?id=${session.id}`, {
-                    method: 'DELETE'
+                    method: "DELETE",
                 });
                 if (!response.ok) {
-                    throw new Error('Delete failed');
+                    throw new Error("Delete failed");
                 }
-                sessions = sessions.filter(s => s.id !== session.id);
+                sessions = sessions.filter((s) => s.id !== session.id);
                 if (session.id === currentSessionId) {
-                    const remainingSessions = sessions.filter(s => s.directory === cwd);
+                    const remainingSessions = sessions.filter((s) => s.directory === cwd);
                     if (remainingSessions.length > 0) {
                         switchSession(remainingSessions[0]);
                     }
                     else {
                         currentSessionId = null;
-                        iframe.src = 'about:blank';
+                        iframe.src = "about:blank";
                     }
                 }
                 renderSessionList();
-                showNotification('会话已删除');
+                showNotification("会话已删除");
             }
             catch (e) {
-                console.error('Failed to delete session:', e);
-                showNotification('删除会话失败');
+                console.error("Failed to delete session:", e);
+                showNotification("删除会话失败");
             }
         }
         // 绑定新建会话按钮
-        sessionListHeader.querySelector('.opencode-new-session-btn').addEventListener('click', createNewSession);
+        sessionListHeader
+            .querySelector(".opencode-new-session-btn")
+            .addEventListener("click", createNewSession);
         /**
          * 应用主题
          */
         function applyTheme() {
-            if (theme === 'auto') {
-                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                container.classList.toggle('opencode-dark', prefersDark);
-            }
-            else {
-                container.classList.toggle('opencode-dark', theme === 'dark');
-            }
+            const resolvedTheme = theme === "auto"
+                ? window.matchMedia("(prefers-color-scheme: dark)").matches
+                    ? "dark"
+                    : "light"
+                : theme;
+            container.classList.toggle("opencode-dark", resolvedTheme === "dark");
+            container.style.colorScheme = resolvedTheme;
         }
         applyTheme();
-        if (theme === 'auto') {
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applyTheme);
+        if (theme === "auto") {
+            window
+                .matchMedia("(prefers-color-scheme: dark)")
+                .addEventListener("change", applyTheme);
         }
         /**
          * 切换挂件显示状态
          */
         async function toggle() {
             if (lazy && !servicesStarted) {
-                button.classList.add('loading');
+                button.classList.add("loading");
                 const started = await ensureServicesStarted();
-                button.classList.remove('loading');
+                button.classList.remove("loading");
                 if (!started) {
-                    showNotification('服务启动失败，请检查控制台');
+                    showNotification("服务启动失败，请检查控制台");
                     return;
                 }
+                setupSSEConnection();
             }
             if (isSelectMode) {
                 exitSelectMode();
@@ -614,14 +677,14 @@
                 return;
             }
             isOpen = !isOpen;
-            chat.classList.toggle('open', isOpen);
-            button.classList.toggle('active', isOpen);
+            chat.classList.toggle("open", isOpen);
+            button.classList.toggle("active", isOpen);
             if (isOpen) {
                 updateContext();
             }
         }
-        button.addEventListener('click', toggle);
-        document.addEventListener('keydown', (e) => {
+        button.addEventListener("click", toggle);
+        document.addEventListener("keydown", (e) => {
             if (matchHotkey(e, mainHotkey)) {
                 e.preventDefault();
                 toggle();
@@ -632,7 +695,7 @@
                     toggleSelectMode();
                 }
                 else {
-                    showNotification('Vue Inspector 未加载，无法使用元素选择功能');
+                    showNotification("Vue Inspector 未加载，无法使用元素选择功能");
                 }
             }
         });
@@ -648,14 +711,14 @@
          */
         function showConfirmDialog(message) {
             return new Promise((resolve) => {
-                const overlay = document.createElement('div');
-                overlay.className = 'opencode-dialog-overlay';
-                const dialog = document.createElement('div');
-                dialog.className = 'opencode-dialog';
-                dialog.setAttribute('role', 'alertdialog');
-                dialog.setAttribute('aria-modal', 'true');
-                dialog.setAttribute('aria-labelledby', 'opencode-dialog-title');
-                dialog.setAttribute('aria-describedby', 'opencode-dialog-desc');
+                const overlay = document.createElement("div");
+                overlay.className = "opencode-dialog-overlay";
+                const dialog = document.createElement("div");
+                dialog.className = "opencode-dialog";
+                dialog.setAttribute("role", "alertdialog");
+                dialog.setAttribute("aria-modal", "true");
+                dialog.setAttribute("aria-labelledby", "opencode-dialog-title");
+                dialog.setAttribute("aria-describedby", "opencode-dialog-desc");
                 dialog.innerHTML = `
           <div class="opencode-dialog-content">
             <div id="opencode-dialog-desc" class="opencode-dialog-message">${message}</div>
@@ -673,22 +736,24 @@
                     overlay.remove();
                     resolve(false);
                 };
-                dialog.querySelector('.confirm').addEventListener('click', handleConfirm);
-                dialog.querySelector('.cancel').addEventListener('click', handleCancel);
-                overlay.addEventListener('click', (e) => {
+                dialog
+                    .querySelector(".confirm")
+                    .addEventListener("click", handleConfirm);
+                dialog.querySelector(".cancel").addEventListener("click", handleCancel);
+                overlay.addEventListener("click", (e) => {
                     if (e.target === overlay) {
                         handleCancel();
                     }
                 });
-                document.addEventListener('keydown', function handleEscape(e) {
-                    if (e.key === 'Escape') {
-                        document.removeEventListener('keydown', handleEscape);
+                document.addEventListener("keydown", function handleEscape(e) {
+                    if (e.key === "Escape") {
+                        document.removeEventListener("keydown", handleEscape);
                         handleCancel();
                     }
                 });
                 overlay.appendChild(dialog);
-                document.body.appendChild(overlay);
-                dialog.querySelector('.confirm').focus();
+                container.appendChild(overlay);
+                dialog.querySelector(".confirm").focus();
             });
         }
         /**
@@ -696,8 +761,8 @@
          * @param {string} message - 通知消息
          */
         function showNotification(message) {
-            const notification = document.createElement('div');
-            notification.className = 'opencode-notification';
+            const notification = document.createElement("div");
+            notification.className = "opencode-notification";
             notification.textContent = message;
             chat.appendChild(notification);
             setTimeout(() => {
@@ -712,10 +777,11 @@
             const key = elementInfo.filePath && elementInfo.line
                 ? `${elementInfo.filePath}:${elementInfo.line}`
                 : null;
-            const exists = key && selectedElements.some(el => {
-                const elKey = el.filePath && el.line ? `${el.filePath}:${el.line}` : null;
-                return elKey === key;
-            });
+            const exists = key &&
+                selectedElements.some((el) => {
+                    const elKey = el.filePath && el.line ? `${el.filePath}:${el.line}` : null;
+                    return elKey === key;
+                });
             if (!exists) {
                 selectedElements.push(elementInfo);
                 saveSelectedElements(selectedElements);
@@ -726,7 +792,7 @@
                 showNotification(`已选中元素 (${selectedElements.length}个)`);
             }
             else {
-                showNotification('该元素已选中');
+                showNotification("该元素已选中");
             }
         }
         /**
@@ -749,17 +815,17 @@
             renderSelectedNodes();
             updateToolbarState();
             sendSelectedElements();
-            showNotification('已清除所有选中元素');
+            showNotification("已清除所有选中元素");
         }
         /**
          * 更新工具栏状态
          */
         function updateToolbarState() {
             if (selectedElements.length > 0) {
-                rightToolbar.classList.remove('collapsed');
+                rightToolbar.classList.remove("collapsed");
             }
             else {
-                rightToolbar.classList.add('collapsed');
+                rightToolbar.classList.add("collapsed");
             }
         }
         /** @type {boolean} 是否处于元素选择模式 */
@@ -777,14 +843,14 @@
             const { targetNode, params } = inspector.getTargetNode(e);
             if (targetNode && params) {
                 const rect = targetNode.getBoundingClientRect();
-                elementHighlight.style.display = 'block';
+                elementHighlight.style.display = "block";
                 elementHighlight.style.top = `${rect.top}px`;
                 elementHighlight.style.left = `${rect.left}px`;
                 elementHighlight.style.width = `${rect.width}px`;
                 elementHighlight.style.height = `${rect.height}px`;
                 const description = getElementDescription(targetNode);
-                const fileName = params.file ? params.file.split('/').pop() : '';
-                let lineInfo = '';
+                const fileName = params.file ? params.file.split("/").pop() : "";
+                let lineInfo = "";
                 if (params.line) {
                     lineInfo = `:${params.line}`;
                     if (params.column) {
@@ -793,9 +859,9 @@
                 }
                 elementTooltip.innerHTML = `
           <div class="opencode-tooltip-tag">${description}</div>
-          ${fileName ? `<div class="opencode-tooltip-file">${fileName}${lineInfo}</div>` : ''}
+          ${fileName ? `<div class="opencode-tooltip-file">${fileName}${lineInfo}</div>` : ""}
         `;
-                elementTooltip.style.display = 'block';
+                elementTooltip.style.display = "block";
                 const tooltipRect = elementTooltip.getBoundingClientRect();
                 let tooltipTop = rect.top - tooltipRect.height - 8;
                 let tooltipLeft = rect.left;
@@ -809,8 +875,8 @@
                 elementTooltip.style.left = `${tooltipLeft}px`;
             }
             else {
-                elementHighlight.style.display = 'none';
-                elementTooltip.style.display = 'none';
+                elementHighlight.style.display = "none";
+                elementTooltip.style.display = "none";
             }
         }
         /**
@@ -819,34 +885,34 @@
         function toggleSelectMode() {
             const inspector = window.__VUE_INSPECTOR__;
             if (!inspector) {
-                showNotification('Vue Inspector 未加载，无法使用元素选择功能');
+                showNotification("Vue Inspector 未加载，无法使用元素选择功能");
                 return;
             }
             isSelectMode = !isSelectMode;
-            selectButton.classList.toggle('active', isSelectMode);
-            selectButton.setAttribute('aria-pressed', String(isSelectMode));
-            selectModeHint.classList.toggle('visible', isSelectMode);
-            selectedBubbles.classList.toggle('visible', isSelectMode);
+            selectButton.classList.toggle("active", isSelectMode);
+            selectButton.setAttribute("aria-pressed", String(isSelectMode));
+            selectModeHint.classList.toggle("visible", isSelectMode);
+            selectedBubbles.classList.toggle("visible", isSelectMode);
             if (isSelectMode) {
                 if (isOpen) {
                     isOpen = false;
-                    chat.classList.remove('open');
-                    button.classList.remove('active');
+                    chat.classList.remove("open");
+                    button.classList.remove("active");
                 }
-                chat.style.display = 'none';
+                chat.style.display = "none";
                 inspector.enable();
                 renderSelectedBubbles();
-                document.addEventListener('mousemove', handleMouseMove);
+                document.addEventListener("mousemove", handleMouseMove);
             }
             else {
-                chat.style.display = '';
+                chat.style.display = "";
                 isOpen = true;
-                chat.classList.add('open');
-                button.classList.add('active');
+                chat.classList.add("open");
+                button.classList.add("active");
                 inspector.disable();
-                document.removeEventListener('mousemove', handleMouseMove);
-                elementHighlight.style.display = 'none';
-                elementTooltip.style.display = 'none';
+                document.removeEventListener("mousemove", handleMouseMove);
+                elementHighlight.style.display = "none";
+                elementTooltip.style.display = "none";
             }
         }
         /**
@@ -860,20 +926,20 @@
                 inspector.disable();
             }
             isSelectMode = false;
-            selectButton.classList.remove('active');
-            selectModeHint.classList.remove('visible');
-            selectedBubbles.classList.remove('visible');
-            chat.style.display = '';
+            selectButton.classList.remove("active");
+            selectModeHint.classList.remove("visible");
+            selectedBubbles.classList.remove("visible");
+            chat.style.display = "";
             isOpen = true;
-            chat.classList.add('open');
-            button.classList.add('active');
-            document.removeEventListener('mousemove', handleMouseMove);
-            elementHighlight.style.display = 'none';
-            elementTooltip.style.display = 'none';
+            chat.classList.add("open");
+            button.classList.add("active");
+            document.removeEventListener("mousemove", handleMouseMove);
+            elementHighlight.style.display = "none";
+            elementTooltip.style.display = "none";
         }
         // ESC 键退出选择模式（使用捕获阶段确保优先处理）
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape' && isSelectMode) {
+        document.addEventListener("keydown", (e) => {
+            if (e.key === "Escape" && isSelectMode) {
                 e.preventDefault();
                 e.stopPropagation();
                 exitSelectMode();
@@ -883,32 +949,41 @@
          * 建立 SSE 连接监听服务端事件
          */
         function setupSSEConnection() {
-            if (!servicesStarted)
+            if (!servicesStarted || sseConnection)
                 return;
-            const eventSource = new EventSource('/__opencode_events__');
-            eventSource.onopen = () => {
-                console.log('[OpenCode] SSE connected');
+            sseConnection = new EventSource("/__opencode_events__");
+            sseConnection.onopen = () => {
+                console.log("[OpenCode] SSE connected");
             };
-            eventSource.onmessage = (event) => {
+            sseConnection.onmessage = (event) => {
                 try {
                     const data = JSON.parse(event.data);
-                    console.log('[OpenCode] SSE message:', data);
-                    if (data.type === 'CONNECTED') {
+                    console.log("[OpenCode] SSE message:", data);
+                    if (data.type === "CONNECTED") {
                         // 连接成功后，主动同步当前节点到服务端
                         if (selectedElements.length > 0) {
-                            fetch('/__opencode_context__', {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
+                            fetch("/__opencode_context__", {
+                                method: "POST",
+                                headers: { "Content-Type": "application/json" },
                                 body: JSON.stringify({
                                     url: window.location.href,
                                     title: document.title,
-                                    selectedElements: selectedElements
-                                })
+                                    selectedElements: selectedElements,
+                                }),
                             }).catch(() => { });
                         }
                     }
-                    if (data.type === 'CLEAR_ELEMENTS' && selectedElements.length > 0) {
-                        console.log('[OpenCode] Clearing elements');
+                    if (data.type === "SESSION_READY") {
+                        if (data.sessionUrl && !sessionUrl) {
+                            sessionUrl = data.sessionUrl;
+                            currentSessionId = extractSessionId(sessionUrl);
+                            if (iframe) {
+                                iframe.src = sessionUrl;
+                            }
+                        }
+                    }
+                    if (data.type === "CLEAR_ELEMENTS" && selectedElements.length > 0) {
+                        console.log("[OpenCode] Clearing elements");
                         selectedElements = [];
                         saveSelectedElements(selectedElements);
                         renderSelectedNodes();
@@ -919,13 +994,16 @@
                     }
                 }
                 catch (e) {
-                    console.error('[OpenCode] SSE parse error:', e);
+                    console.error("[OpenCode] SSE parse error:", e);
                 }
             };
-            eventSource.onerror = (e) => {
-                console.error('[OpenCode] SSE error:', e);
+            sseConnection.onerror = (e) => {
+                console.error("[OpenCode] SSE error:", e);
                 // 连接失败时自动重连
-                eventSource.close();
+                if (sseConnection) {
+                    sseConnection.close();
+                    sseConnection = null;
+                }
                 setTimeout(setupSSEConnection, 3000);
             };
         }
@@ -933,24 +1011,31 @@
          * 渲染已选节点气泡
          */
         function renderSelectedBubbles() {
-            selectedBubbles.innerHTML = '';
+            selectedBubbles.innerHTML = "";
             if (selectedElements.length === 0) {
-                selectedBubbles.innerHTML = '<div class="opencode-bubble-empty">暂无选中元素</div>';
+                selectedBubbles.innerHTML =
+                    '<div class="opencode-bubble-empty">暂无选中元素</div>';
                 return;
             }
             selectedElements.forEach((element, index) => {
-                const bubble = document.createElement('div');
-                bubble.className = 'opencode-selected-bubble';
-                bubble.setAttribute('role', 'listitem');
-                const description = element.description || '未知元素';
-                const fileName = element.filePath ? element.filePath.split('/').pop() : '';
-                const lineInfo = element.line ? `:${element.line}${element.column ? `:${element.column}` : ''}` : '';
+                const bubble = document.createElement("div");
+                bubble.className = "opencode-selected-bubble";
+                bubble.setAttribute("role", "listitem");
+                const description = element.description || "未知元素";
+                const fileName = element.filePath
+                    ? element.filePath.split("/").pop()
+                    : "";
+                const lineInfo = element.line
+                    ? `:${element.line}${element.column ? `:${element.column}` : ""}`
+                    : "";
                 bubble.innerHTML = `
           <span class="opencode-bubble-text">${description}</span>
-          ${fileName ? `<span class="opencode-bubble-file">${fileName}${lineInfo}</span>` : ''}
+          ${fileName ? `<span class="opencode-bubble-file">${fileName}${lineInfo}</span>` : ""}
           <button class="opencode-bubble-remove" data-index="${index}" aria-label="移除元素: ${description}">×</button>
         `;
-                bubble.querySelector('.opencode-bubble-remove').addEventListener('click', (e) => {
+                bubble
+                    .querySelector(".opencode-bubble-remove")
+                    .addEventListener("click", (e) => {
                     e.stopPropagation();
                     removeElement(index);
                     renderSelectedBubbles();
@@ -959,42 +1044,50 @@
             });
         }
         function renderSelectedNodes() {
-            selectedNodesContainer.innerHTML = '';
+            selectedNodesContainer.innerHTML = "";
             if (selectedElements.length === 0) {
-                rightToolbar.classList.add('collapsed');
-                clearAllButton.style.display = 'none';
+                rightToolbar.classList.add("collapsed");
+                clearAllButton.style.display = "none";
             }
             else {
-                rightToolbar.classList.remove('collapsed');
-                clearAllButton.style.display = 'block';
+                rightToolbar.classList.remove("collapsed");
+                clearAllButton.style.display = "block";
             }
             selectedElements.forEach((element, index) => {
-                const node = document.createElement('div');
-                node.className = 'opencode-selected-node';
-                node.setAttribute('role', 'listitem');
-                const description = element.description || '未知元素';
-                const textPreview = element.innerText ? element.innerText.substring(0, 30) : '';
-                const fileName = element.filePath ? element.filePath.split('/').pop() : '未知文件';
-                const lineInfo = element.line ? `:${element.line}${element.column ? `:${element.column}` : ''}` : '';
+                const node = document.createElement("div");
+                node.className = "opencode-selected-node";
+                node.setAttribute("role", "listitem");
+                const description = element.description || "未知元素";
+                const textPreview = element.innerText
+                    ? element.innerText.substring(0, 30)
+                    : "";
+                const fileName = element.filePath
+                    ? element.filePath.split("/").pop()
+                    : "未知文件";
+                const lineInfo = element.line
+                    ? `:${element.line}${element.column ? `:${element.column}` : ""}`
+                    : "";
                 node.innerHTML = `
           <div class="opencode-node-content">
             <span class="opencode-node-text">${description}</span>
-            <span class="opencode-node-file">${textPreview ? textPreview + ' · ' : ''}${fileName}${lineInfo}</span>
+            <span class="opencode-node-file">${textPreview ? textPreview + " · " : ""}${fileName}${lineInfo}</span>
           </div>
           <button class="opencode-node-remove" data-index="${index}" aria-label="移除元素: ${description}">×</button>
         `;
-                node.querySelector('.opencode-node-remove').addEventListener('click', (e) => {
+                node
+                    .querySelector(".opencode-node-remove")
+                    .addEventListener("click", (e) => {
                     e.stopPropagation();
                     removeElement(index);
                 });
-                node.addEventListener('click', () => {
+                node.addEventListener("click", () => {
                     highlightElement(element);
                 });
                 selectedNodesContainer.appendChild(node);
             });
         }
         // 绑定清空按钮点击事件
-        clearAllButton.addEventListener('click', async () => {
+        clearAllButton.addEventListener("click", async () => {
             if (selectedElements.length === 0)
                 return;
             const confirmed = await showConfirmDialog(`确定要清空所有 ${selectedElements.length} 个已选节点吗？`);
@@ -1003,7 +1096,7 @@
             }
         });
         // 绑定选择按钮点击事件
-        selectButton.addEventListener('click', toggleSelectMode);
+        selectButton.addEventListener("click", toggleSelectMode);
         /**
          * 高亮页面元素
          * @param {SelectedElement} element - 元素信息
@@ -1014,18 +1107,18 @@
                 if (!description)
                     return;
                 let targetElement = null;
-                if (description.includes('#')) {
+                if (description.includes("#")) {
                     const idMatch = description.match(/#([^\.\[\s]+)/);
                     if (idMatch) {
                         targetElement = document.getElementById(idMatch[1]);
                     }
                 }
-                if (!targetElement && description.includes('.')) {
+                if (!targetElement && description.includes(".")) {
                     const classMatch = description.match(/^([a-z]+)\.([^\[\s]+)/i);
                     if (classMatch) {
                         const tagName = classMatch[1];
-                        const classes = classMatch[2].split('.').filter(Boolean);
-                        const selector = `${tagName}.${classes.join('.')}`;
+                        const classes = classMatch[2].split(".").filter(Boolean);
+                        const selector = `${tagName}.${classes.join(".")}`;
                         targetElement = document.querySelector(selector);
                     }
                 }
@@ -1037,9 +1130,9 @@
                     }
                 }
                 if (targetElement) {
-                    targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                    const highlightOverlay = document.createElement('div');
-                    highlightOverlay.className = 'opencode-element-highlight-temp';
+                    targetElement.scrollIntoView({ behavior: "smooth", block: "center" });
+                    const highlightOverlay = document.createElement("div");
+                    highlightOverlay.className = "opencode-element-highlight-temp";
                     const rect = targetElement.getBoundingClientRect();
                     highlightOverlay.style.top = `${rect.top + window.scrollY}px`;
                     highlightOverlay.style.left = `${rect.left + window.scrollX}px`;
@@ -1052,7 +1145,7 @@
                 }
             }
             catch (e) {
-                console.error('Failed to highlight element:', e);
+                console.error("Failed to highlight element:", e);
             }
         }
         /**
@@ -1060,22 +1153,24 @@
          */
         function sendSelectedElements() {
             if (!servicesStarted) {
-                console.log('[OpenCode] sendSelectedElements: services not started');
+                console.log("[OpenCode] sendSelectedElements: services not started");
                 return;
             }
-            console.log('[OpenCode] Sending selected elements:', selectedElements);
-            fetch('/__opencode_context__', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
+            console.log("[OpenCode] Sending selected elements:", selectedElements);
+            fetch("/__opencode_context__", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
                 body: JSON.stringify({
                     url: currentPageUrl,
                     title: currentPageTitle,
-                    selectedElements: selectedElements
-                })
-            }).then(() => {
-                console.log('[OpenCode] Selected elements sent successfully');
-            }).catch((e) => {
-                console.error('[OpenCode] Failed to send selected elements:', e);
+                    selectedElements: selectedElements,
+                }),
+            })
+                .then(() => {
+                console.log("[OpenCode] Selected elements sent successfully");
+            })
+                .catch((e) => {
+                console.error("[OpenCode] Failed to send selected elements:", e);
             });
         }
         /**
@@ -1086,8 +1181,8 @@
          */
         function truncate(str, maxLength) {
             if (!str)
-                return '';
-            return str.length > maxLength ? str.substring(0, maxLength) + '...' : str;
+                return "";
+            return str.length > maxLength ? str.substring(0, maxLength) + "..." : str;
         }
         /**
          * 获取元素的直接文本内容
@@ -1095,10 +1190,10 @@
          * @returns {string} 直接文本内容
          */
         function getDirectText(element) {
-            let text = '';
+            let text = "";
             for (const child of element.childNodes) {
                 if (child.nodeType === Node.TEXT_NODE) {
-                    text += child.textContent || '';
+                    text += child.textContent || "";
                 }
             }
             return text.trim();
@@ -1114,24 +1209,29 @@
             const id = element.id;
             if (id)
                 parts.push(`#${id}`);
-            const className = element.className && typeof element.className === 'string'
-                ? element.className.trim().split(/\s+/).filter(Boolean).slice(0, 2).join('.')
-                : '';
+            const className = element.className && typeof element.className === "string"
+                ? element.className
+                    .trim()
+                    .split(/\s+/)
+                    .filter(Boolean)
+                    .slice(0, 2)
+                    .join(".")
+                : "";
             if (className)
                 parts.push(`.${className}`);
-            const name = element.getAttribute('name');
+            const name = element.getAttribute("name");
             if (name)
                 parts.push(`[name="${name}"]`);
-            const placeholder = element.getAttribute('placeholder');
+            const placeholder = element.getAttribute("placeholder");
             if (placeholder)
                 parts.push(`[placeholder="${placeholder.substring(0, 20)}"]`);
-            const src = element.getAttribute('src');
+            const src = element.getAttribute("src");
             if (src)
                 parts.push(`[src]`);
-            const href = element.getAttribute('href');
-            if (href && href !== '#')
+            const href = element.getAttribute("href");
+            if (href && href !== "#")
                 parts.push(`[href]`);
-            return parts.join('');
+            return parts.join("");
         }
         /**
          * 设置 Vue Inspector 钩子
@@ -1151,7 +1251,7 @@
                                 line: params.line,
                                 column: params.column,
                                 innerText: truncate(innerText, 200),
-                                description
+                                description,
                             };
                             addElement(elementInfo);
                             sendSelectedElements();
@@ -1175,10 +1275,14 @@
         }
         // 导出全局 API
         window.OpenCodeWidget = {
-            open: () => { if (!isOpen)
-                toggle(); },
-            close: () => { if (isOpen)
-                toggle(); },
+            open: () => {
+                if (!isOpen)
+                    toggle();
+            },
+            close: () => {
+                if (isOpen)
+                    toggle();
+            },
             toggle,
             showNotification,
             updateContext,
@@ -1284,6 +1388,13 @@
         transform: translateY(20px) scale(0.95);
         transition: all 0.3s ease;
         display: flex;
+        flex-direction: column;
+      }
+
+      .opencode-chat-content {
+        display: flex;
+        flex: 1;
+        overflow: hidden;
       }
 
       .opencode-widget.bottom-right .opencode-chat {
@@ -1313,17 +1424,15 @@
       }
 
       .opencode-chat-header {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
+        position: relative;
+        flex-shrink: 0;
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 0 12px;
         height: 40px;
         background: #f8f9fa;
-        border-bottom: 1px solid #e5e7eb;
+        border-bottom: 1px solid #282828;
         z-index: 5;
       }
 
@@ -1336,7 +1445,7 @@
       .opencode-chat-header-title {
         font-size: 14px;
         font-weight: 600;
-        color: #374151;
+        color: #282828;
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
@@ -1362,8 +1471,8 @@
       }
 
       .opencode-header-btn:hover {
-        background: #e5e7eb;
-        color: #374151;
+        background: #282828;
+        color: #282828;
       }
 
       .opencode-header-btn.close:hover {
@@ -1377,8 +1486,8 @@
       }
 
       .opencode-dark .opencode-chat-header {
-        background: #111827;
-        border-bottom-color: #374151;
+        background: #121212;
+        border-bottom-color: #282828;
       }
 
       .opencode-dark .opencode-chat-header-title {
@@ -1390,7 +1499,7 @@
       }
 
       .opencode-dark .opencode-header-btn:hover {
-        background: #374151;
+        background: #282828;
         color: #f3f4f6;
       }
 
@@ -1400,10 +1509,9 @@
       }
 
       .opencode-session-list {
-        margin-top: 40px;
         width: 240px;
         background: #f8f9fa;
-        border-right: 1px solid #e5e7eb;
+        border-right: 1px solid #282828;
         display: flex;
         flex-direction: column;
         flex-shrink: 0;
@@ -1422,13 +1530,13 @@
 
       .opencode-session-list-header {
         padding: 16px;
-        border-bottom: 1px solid #e5e7eb;
+        border-bottom: 1px solid #282828;
         display: flex;
         justify-content: space-between;
         align-items: center;
         font-weight: 600;
         font-size: 14px;
-        color: #374151;
+        color: #282828;
       }
 
       .opencode-new-session-btn {
@@ -1466,7 +1574,7 @@
       }
 
       .opencode-session-item:hover {
-        background: #e5e7eb;
+        background: #282828;
       }
 
       .opencode-session-item.active {
@@ -1532,7 +1640,7 @@
 
       .opencode-session-header-skeleton {
         padding: 16px;
-        border-bottom: 1px solid #e5e7eb;
+        border-bottom: 1px solid #282828;
         display: none;
         justify-content: space-between;
         align-items: center;
@@ -1545,7 +1653,7 @@
       .opencode-skeleton-header-title {
         height: 18px;
         width: 80px;
-        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+        background: #151515;
         background-size: 200% 100%;
         animation: skeleton-loading 1.5s ease-in-out infinite;
         border-radius: 4px;
@@ -1554,7 +1662,7 @@
       .opencode-skeleton-header-btn {
         width: 28px;
         height: 28px;
-        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+        background: #151515;
         background-size: 200% 100%;
         animation: skeleton-loading 1.5s ease-in-out infinite;
         border-radius: 6px;
@@ -1580,7 +1688,7 @@
 
       .opencode-skeleton-title {
         height: 16px;
-        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+        background: #151515;
         background-size: 200% 100%;
         animation: skeleton-loading 1.5s ease-in-out infinite;
         border-radius: 4px;
@@ -1590,7 +1698,7 @@
 
       .opencode-skeleton-meta {
         height: 12px;
-        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+        background: #151515;
         background-size: 200% 100%;
         animation: skeleton-loading 1.5s ease-in-out infinite;
         border-radius: 4px;
@@ -1607,22 +1715,22 @@
       }
 
       .opencode-dark .opencode-skeleton-item {
-        background: #1f2937;
+        background: #1e1e1e;
       }
 
       .opencode-dark .opencode-skeleton-title,
       .opencode-dark .opencode-skeleton-meta {
-        background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
+        background: linear-gradient(90deg, #282828 25%, #4b5563 50%, #282828 75%);
         background-size: 200% 100%;
       }
 
       .opencode-dark .opencode-session-header-skeleton {
-        border-bottom-color: #374151;
+        border-bottom-color: #282828;
       }
 
       .opencode-dark .opencode-skeleton-header-title,
       .opencode-dark .opencode-skeleton-header-btn {
-        background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
+        background: linear-gradient(90deg, #282828 25%, #4b5563 50%, #282828 75%);
         background-size: 200% 100%;
       }
 
@@ -1633,7 +1741,6 @@
         display: flex;
         flex-direction: column;
         margin-top: -42px;
-        padding-top: 40px;
       }
 
       .opencode-loading-overlay {
@@ -1658,7 +1765,7 @@
       .opencode-loading-spinner {
         width: 40px;
         height: 40px;
-        border: 3px solid #e5e7eb;
+        border: 3px solid #282828;
         border-top-color: #3b82f6;
         border-radius: 50%;
         animation: spin 0.8s linear infinite;
@@ -1674,6 +1781,61 @@
         color: #6b7280;
       }
 
+      .opencode-empty-state-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: #f8f9fa;
+        display: none;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        z-index: 5;
+        transition: opacity 0.3s ease;
+        margin-top: 42px;
+      }
+
+      .opencode-empty-state-overlay.visible {
+        display: flex;
+      }
+
+      .opencode-empty-state-icon {
+        color: #9ca3af;
+        margin-bottom: 16px;
+      }
+
+      .opencode-empty-state-text {
+        color: #4b5563;
+        font-size: 16px;
+        font-weight: 500;
+        margin-bottom: 24px;
+      }
+
+      .opencode-empty-state-btn {
+        padding: 10px 24px;
+        border-radius: 8px;
+        border: none;
+        background: #3b82f6;
+        color: white;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
+      }
+
+      .opencode-empty-state-btn:hover {
+        background: #2563eb;
+        transform: translateY(-1px);
+        box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
+      }
+
+      .opencode-empty-state-btn:active {
+        transform: translateY(0);
+      }
+
       .opencode-iframe {
         width: 100%;
         height: 100%;
@@ -1685,31 +1847,36 @@
       }
 
       .opencode-dark .opencode-session-list {
-        background: #111827;
-        border-right-color: #374151;
+        background: #121212;
+        border-right-color: #282828;
       }
 
       .opencode-dark .opencode-session-toggle {
         color: #9ca3af;
-        border-bottom-color: #374151;
+        border-bottom-color: #282828;
       }
 
       .opencode-dark .opencode-session-toggle:hover {
-        background: #374151;
+        background: #282828;
         color: #f3f4f6;
       }
 
       .opencode-dark .opencode-session-list-header {
-        border-bottom-color: #374151;
+        border-bottom-color: #282828;
         color: #f3f4f6;
       }
 
       .opencode-dark .opencode-session-item:hover {
-        background: #374151;
+        background: #282828;
+      }
+
+      .opencode-dark .opencode-session-item {
+        color: #d1d5db;
       }
 
       .opencode-dark .opencode-session-item.active {
         background: #3b82f6;
+        color: white;
       }
 
       .opencode-dark .opencode-loading-overlay {
@@ -1717,7 +1884,7 @@
       }
 
       .opencode-dark .opencode-loading-spinner {
-        border-color: #374151;
+        border-color: #282828;
         border-top-color: #3b82f6;
       }
 
@@ -1725,15 +1892,26 @@
         color: #9ca3af;
       }
 
+      .opencode-dark .opencode-empty-state-overlay {
+        background: #1a1a1a;
+      }
+
+      .opencode-dark .opencode-empty-state-icon {
+        color: #4b5563;
+      }
+
+      .opencode-dark .opencode-empty-state-text {
+        color: #d1d5db;
+      }
+
       .opencode-right-toolbar {
         width: 140px;
         background: #f8f9fa;
-        border-left: 1px solid #e5e7eb;
+        border-left: 1px solid #282828;
         display: flex;
         flex-direction: column;
         flex-shrink: 0;
         transition: width 0.2s ease;
-        margin-top: 40px;
         overflow: hidden;
       }
 
@@ -1750,13 +1928,13 @@
 
       .opencode-selected-nodes-header {
         padding: 12px 8px 8px;
-        border-bottom: 1px solid #e5e7eb;
+        border-bottom: 1px solid #282828;
       }
 
       .opencode-selected-nodes-title {
         font-size: 14px;
         font-weight: 600;
-        color: #374151;
+        color: #282828;
         margin-bottom: 4px;
       }
 
@@ -1790,7 +1968,7 @@
         gap: 8px;
         padding: 8px 10px;
         background: white;
-        border: 1px solid #e5e7eb;
+        border: 1px solid #282828;
         border-radius: 6px;
         font-size: 12px;
         transition: all 0.2s;
@@ -1810,7 +1988,7 @@
       }
 
       .opencode-node-text {
-        color: #374151;
+        color: #282828;
         font-weight: 500;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -1870,12 +2048,12 @@
       }
 
       .opencode-dark .opencode-right-toolbar {
-        background: #111827;
-        border-left-color: #374151;
+        background: #121212;
+        border-left-color: #282828;
       }
 
       .opencode-dark .opencode-selected-nodes-header {
-        border-bottom-color: #374151;
+        border-bottom-color: #282828;
       }
 
       .opencode-dark .opencode-selected-nodes-title {
@@ -1891,8 +2069,8 @@
       }
 
       .opencode-dark .opencode-selected-node {
-        background: #1f2937;
-        border-color: #374151;
+        background: #1e1e1e;
+        border-color: #282828;
       }
 
       .opencode-dark .opencode-selected-node:hover {
@@ -1985,7 +2163,7 @@
 
       .opencode-dialog-message {
         font-size: 15px;
-        color: #374151;
+        color: #282828;
         line-height: 1.5;
       }
 
@@ -2007,11 +2185,12 @@
 
       .opencode-dialog-btn.cancel {
         background: #f3f4f6;
-        color: #374151;
+        color: #282828;
       }
 
       .opencode-dialog-btn.cancel:hover {
-        background: #e5e7eb;
+        background: #282828;
+        color: white;
       }
 
       .opencode-dialog-btn.confirm {
@@ -2024,7 +2203,7 @@
       }
 
       .opencode-dark .opencode-dialog {
-        background: #1f2937;
+        background: #1e1e1e;
       }
 
       .opencode-dark .opencode-dialog-message {
@@ -2032,7 +2211,7 @@
       }
 
       .opencode-dark .opencode-dialog-btn.cancel {
-        background: #374151;
+        background: #282828;
         color: #f3f4f6;
       }
 
@@ -2097,7 +2276,7 @@
 
       .opencode-element-tooltip {
         position: fixed;
-        background: #1f2937;
+        background: #1e1e1e;
         color: white;
         padding: 8px 12px;
         border-radius: 6px;
@@ -2143,7 +2322,7 @@
         gap: 2px;
         padding: 8px 10px;
         background: white;
-        border: 1px solid #e5e7eb;
+        border: 1px solid #282828;
         border-radius: 8px;
         font-size: 12px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@@ -2151,7 +2330,7 @@
       }
 
       .opencode-bubble-text {
-        color: #374151;
+        color: #282828;
         font-weight: 500;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -2200,8 +2379,8 @@
       }
 
       .opencode-dark .opencode-selected-bubble {
-        background: #1f2937;
-        border-color: #374151;
+        background: #1e1e1e;
+        border-color: #282828;
       }
 
       .opencode-dark .opencode-bubble-text {
@@ -2217,8 +2396,8 @@
       }
 
       .opencode-dark .opencode-bubble-empty {
-        background: #1f2937;
-        border-color: #374151;
+        background: #1e1e1e;
+        border-color: #282828;
         color: #6b7280;
       }
 
@@ -2259,14 +2438,15 @@
      * 自动初始化挂件
      */
     function autoInit() {
-        const script = document.currentScript || document.querySelector('script[data-opencode-config]');
+        const script = document.currentScript ||
+            document.querySelector("script[data-opencode-config]");
         if (script) {
-            const configBase64 = script.getAttribute('data-opencode-config');
+            const configBase64 = script.getAttribute("data-opencode-config");
             if (configBase64) {
                 try {
                     const config = JSON.parse(atob(configBase64));
-                    if (document.readyState === 'loading') {
-                        document.addEventListener('DOMContentLoaded', function () {
+                    if (document.readyState === "loading") {
+                        document.addEventListener("DOMContentLoaded", function () {
                             initOpenCodeWidget(config);
                         });
                     }
@@ -2275,7 +2455,7 @@
                     }
                 }
                 catch (e) {
-                    console.error('[OpenCode Widget] Failed to parse config:', e);
+                    console.error("[OpenCode Widget] Failed to parse config:", e);
                 }
             }
         }