vite-plugin-aipanel 1.2.0-beta.0

package/es/index.mjs

@@ -0,0 +1,342 @@
+import crypto from "crypto";
+import fs from "fs";
+import Inspector from "unplugin-vue-inspector/vite";
+import {
+  CONTEXT_API_PATH,
+  DEFAULT_PROXY_PORT,
+  MCP_API_PATH,
+  resolvePluginConfig,
+  setVerbose
+} from "@aipanel/core";
+import { createLogger, initProcessLogCapture } from "@aipanel/core/node";
+import { setupMiddlewares, LOGS_API_PATH, VUE_DEVTOOLS_API_PATH } from "./endpoints/index.mjs";
+import { injectWidget } from "./core/injector.mjs";
+import { loadProvider } from "./core/provider-loader.mjs";
+import { AIPanelService } from "./core/service.mjs";
+import { McpProxy } from "./core/mcp-proxy.mjs";
+import {
+  resolveWidgetPath,
+  resolveWidgetStylePath,
+  resolveVueDevtoolsBridgePath
+} from "./utils/paths.mjs";
+import { findGitRoot } from "./utils/system.mjs";
+const DEVTOOLS_BRIDGE_IMPORTEE = "virtual:aipanel-vue-devtools-bridge";
+const DEVTOOLS_BRIDGE_QUERY = "aipanel_vue_devtools_bridge";
+const BRIDGE_SOURCE_PATH = resolveVueDevtoolsBridgePath();
+const SILENT_CONTEXT_SCRIPT = `<script>
+(function () {
+  var API = "/__aipanel_context__";
+  var last = "";
+  function report(force) {
+    if (document.visibilityState !== "visible") return;
+    var url = location.href;
+    var title = document.title;
+    var key = url + "|" + title;
+    if (!force && key === last) return;
+    last = key;
+    var sessionId = "";
+    try { sessionId = sessionStorage.getItem("_aipanel_pk") || ""; } catch (e) {}
+    fetch(API, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ url: url, title: title, sessionId: sessionId }),
+    }).catch(function () {});
+  }
+  var push = history.pushState.bind(history);
+  var replace = history.replaceState.bind(history);
+  history.pushState = function () { push.apply(this, arguments); setTimeout(function () { report(false); }, 0); };
+  history.replaceState = function () { replace.apply(this, arguments); setTimeout(function () { report(false); }, 0); };
+  window.addEventListener("popstate", function () { report(false); });
+  window.addEventListener("hashchange", function () { report(false); });
+  document.addEventListener("visibilitychange", function () {
+    // \u5207\u56DE\u672C\u6807\u7B7E\u65F6\u5F3A\u5236\u4E0A\u62A5\uFF1A\u672C\u9875 url/title \u672A\u53D8\uFF0C\u4F46\u670D\u52A1\u7AEF\u4E0A\u4E0B\u6587\u53EF\u80FD\u5DF2\u88AB\u5176\u4ED6\u6807\u7B7E\u8986\u76D6
+    if (document.visibilityState === "visible") report(true);
+  });
+  window.addEventListener("focus", function () {
+    // \u591A\u7A97\u53E3\uFF08\u5206\u5C4F/\u591A\u663E\u793A\u5668\uFF09\u4E0B\u6240\u6709\u6807\u7B7E\u9875\u90FD visible\uFF0Cvisibilitychange \u4E0D\u89E6\u53D1\uFF1B
+    // \u7A97\u53E3\u83B7\u5F97\u7126\u70B9\u662F"\u7528\u6237\u6B63\u5728\u770B\u8FD9\u4E2A\u9875\u9762"\u7684\u6700\u51C6\u786E\u4FE1\u53F7
+    report(true);
+  });
+  try {
+    new MutationObserver(function () { report(false); })
+      .observe(document.head, { childList: true, subtree: true });
+  } catch (e) {}
+  report(false);
+})();
+</script>`;
+function aipanelPlugin(options = {}) {
+  const plugins = [];
+  plugins.push(
+    ...Inspector({
+      enabled: false,
+      toggleButtonVisibility: "never",
+      toggleComboKey: false
+    })
+  );
+  plugins.push(createAIPanelPlugin(options));
+  return plugins;
+}
+function createAIPanelPlugin(options = {}) {
+  const config = resolvePluginConfig(options);
+  setVerbose(config.verbose);
+  initProcessLogCapture({ maxSize: 500 });
+  const log = createLogger("Plugin");
+  let actualWebPort = config.webPort;
+  let actualProxyPort = config.proxyPort ?? DEFAULT_PROXY_PORT;
+  let projectRoot = "";
+  let vueDevtoolsApiUrl = "";
+  const pageContext = { url: "", title: "" };
+  const DEFAULT_TAB = "default";
+  const pageContexts = /* @__PURE__ */ new Map([[DEFAULT_TAB, pageContext]]);
+  let activeTabId = DEFAULT_TAB;
+  const serviceInstanceId = crypto.randomUUID();
+  const sseClients = /* @__PURE__ */ new Set();
+  const mcpProxy = new McpProxy({ idleTimeout: 5 * 60 * 1e3 });
+  let provider = null;
+  const service = new AIPanelService(
+    config,
+    sseClients,
+    (port) => {
+      actualWebPort = port;
+    },
+    (port) => {
+      actualProxyPort = port;
+    }
+  );
+  service.workspaceRoot = findGitRoot(process.cwd());
+  return {
+    name: "vite-plugin-aipanel",
+    apply(_viteConfig, env) {
+      if (!config.enabled) return false;
+      return env.command === "serve" && process.env.NODE_ENV !== "test";
+    },
+    async configureServer(server) {
+      const timer = log.timer("configureServer");
+      projectRoot = server.config.root;
+      let viteOrigin = "";
+      setupMiddlewares(
+        server,
+        {
+          get webUrl() {
+            return actualWebPort ? `http://${config.hostname}:${actualWebPort}` : null;
+          },
+          get sseClients() {
+            return sseClients;
+          },
+          getPageContext() {
+            return pageContexts.get(activeTabId) || pageContexts.get(DEFAULT_TAB) || { url: "", title: "" };
+          },
+          setPageContext(tabId, ctx) {
+            pageContexts.set(tabId || DEFAULT_TAB, ctx);
+          },
+          setActiveTabId(tabId) {
+            activeTabId = tabId;
+          },
+          clearSelectedElements() {
+            const ctx = pageContexts.get(activeTabId);
+            if (ctx) {
+              ctx.selectedElements = [];
+              pageContexts.set(activeTabId, ctx);
+            }
+            const defaultCtx = pageContexts.get(DEFAULT_TAB);
+            if (defaultCtx) {
+              defaultCtx.selectedElements = [];
+            }
+          },
+          get isServiceStarted() {
+            return service.isStarted;
+          },
+          get currentTask() {
+            return service.currentTask;
+          },
+          get actualProxyPort() {
+            return actualProxyPort;
+          },
+          get actualWebPort() {
+            return actualWebPort;
+          },
+          get serviceInstanceId() {
+            return serviceInstanceId;
+          },
+          getSessions: () => {
+            if (!provider) return Promise.reject(new Error("Provider \u672A\u521D\u59CB\u5316"));
+            return provider.listSessions(service.workspaceRoot);
+          },
+          createSession: () => {
+            if (!provider) return Promise.reject(new Error("Provider \u672A\u521D\u59CB\u5316"));
+            return provider.createSession(service.workspaceRoot);
+          },
+          deleteSession: (id) => {
+            if (!provider) return Promise.reject(new Error("Provider \u672A\u521D\u59CB\u5316"));
+            return provider.deleteSession ? provider.deleteSession(id) : Promise.reject(new Error("\u5F53\u524D Provider \u4E0D\u652F\u6301\u5220\u9664\u4F1A\u8BDD"));
+          },
+          getCapabilities: () => provider?.capabilities ?? {},
+          resolveWidgetPath,
+          resolveWidgetStylePath,
+          retryWarmupChromeMcp: () => service.retryWarmupChromeMcp()
+        },
+        mcpProxy,
+        config.logFiles
+      );
+      if (!config.mcpOnly) {
+        try {
+          provider = await loadProvider(config.provider, {
+            hostname: config.hostname,
+            chromeDevtoolsPort: config.chromeDevtoolsPort,
+            getWebPort: () => actualWebPort,
+            getProxyPort: () => actualProxyPort,
+            options: config
+          });
+        } catch (e) {
+          log.error("\u52A0\u8F7D Web Provider \u5931\u8D25", {
+            provider: config.provider,
+            error: e instanceof Error ? e.message : String(e)
+          });
+          service.currentTask = {
+            task: "provider_not_installed",
+            data: { error: e instanceof Error ? e.message : String(e) }
+          };
+          timer.end("\u274C Provider \u52A0\u8F7D\u5931\u8D25");
+          return;
+        }
+        provider.applyConfig?.({ theme: config.theme });
+        service.setProvider(provider);
+      }
+      server.httpServer?.on("listening", async () => {
+        log.debug("Vite server listening event fired");
+        const address = server.httpServer?.address();
+        let vitePort;
+        let viteHost;
+        if (address && typeof address === "object") {
+          vitePort = address.port;
+          const addr = address.address;
+          if (addr === "::" || addr === "::1" || addr === "0.0.0.0" || !addr) {
+            viteHost = "localhost";
+          } else {
+            viteHost = addr;
+          }
+        } else {
+          const host = server.config.server.host;
+          vitePort = server.config.server.port || 5173;
+          viteHost = typeof host === "string" && host !== "0.0.0.0" && host !== "::" && host !== "::1" ? host : "localhost";
+        }
+        viteOrigin = `http://${viteHost}:${vitePort}`;
+        const contextApiUrl = `http://${viteHost}:${vitePort}${CONTEXT_API_PATH}`;
+        const logsApiUrl = `http://${viteHost}:${vitePort}${LOGS_API_PATH}`;
+        vueDevtoolsApiUrl = `http://${viteHost}:${vitePort}${VUE_DEVTOOLS_API_PATH}`;
+        const mcpApiUrl = `http://${viteHost}:${vitePort}${MCP_API_PATH}`;
+        log.debug("Vite server ready", {
+          vitePort,
+          viteHost,
+          viteOrigin,
+          contextApiUrl,
+          logsApiUrl,
+          vueDevtoolsApiUrl,
+          mcpApiUrl
+        });
+        log.info(`MCP endpoint: ${mcpApiUrl}`);
+        try {
+          await mcpProxy.start();
+          if (config.warmupChromeMcp) {
+            const warmup = await mcpProxy.verify();
+            if (!warmup.ok) {
+              log.debug("Chrome MCP warmup failed", { error: warmup.error });
+            }
+          }
+          if (config.mcpOnly) {
+            return;
+          }
+          await service.start(
+            vitePort,
+            [viteOrigin],
+            contextApiUrl,
+            logsApiUrl,
+            viteOrigin,
+            mcpProxy,
+            vueDevtoolsApiUrl
+          );
+        } catch (e) {
+          log.error("Failed to start services", { error: e });
+        }
+      });
+      server.httpServer?.on("close", () => {
+        log.debug("HTTP server closing");
+        service.stop();
+        mcpProxy.stop();
+      });
+      const cleanup = async () => {
+        log.debug("Process cleanup triggered");
+        mcpProxy.stop();
+        await service.stop();
+        process.exit(0);
+      };
+      process.on("SIGINT", cleanup);
+      process.on("SIGTERM", cleanup);
+      timer.end("\u2713 Server configured");
+    },
+    resolveId(id) {
+      if (id === DEVTOOLS_BRIDGE_IMPORTEE) {
+        return `${BRIDGE_SOURCE_PATH}?${DEVTOOLS_BRIDGE_QUERY}`;
+      }
+      return void 0;
+    },
+    load(id) {
+      const [filePath, query] = id.split("?", 2);
+      if (query === DEVTOOLS_BRIDGE_QUERY) {
+        return fs.readFileSync(filePath, "utf-8");
+      }
+      return void 0;
+    },
+    transformIndexHtml(html) {
+      const timer = log.timer("transformIndexHtml");
+      const tags = [
+        {
+          tag: "script",
+          injectTo: "head-prepend",
+          attrs: {
+            type: "module",
+            src: `/@id/${DEVTOOLS_BRIDGE_IMPORTEE}`
+          }
+        }
+      ];
+      const titleInject = `<script>
+        (function () {
+          var KEY = "_aipanel_pk";
+          if (!sessionStorage.getItem(KEY)) {
+            sessionStorage.setItem(KEY, "[" + Math.random().toString(36).slice(2, 10) + "]");
+          }
+        })();
+      </script>`;
+      if (config.mcpOnly) {
+        timer.end("\u2713 mcp-only (skip widget bubble, keep vue-devtools bridge + context report)");
+        return {
+          html: html.replace("</body>", `${titleInject}
+${SILENT_CONTEXT_SCRIPT}</body>`),
+          tags
+        };
+      }
+      const widget = injectWidget({
+        theme: config.theme,
+        open: config.open,
+        hotkey: config.hotkey,
+        proxyPort: actualProxyPort,
+        proxyHost: config.hostname,
+        displayMode: config.displayMode === "extension" ? "extension-selector" : config.displayMode,
+        splitMode: config.splitMode,
+        serviceInstanceId,
+        webPort: actualWebPort,
+        projectRoot,
+        verbose: config.verbose
+      });
+      timer.end();
+      return {
+        html: html.replace("</body>", `${titleInject}
+${widget}</body>`),
+        tags
+      };
+    }
+  };
+}
+export {
+  aipanelPlugin as default
+};

package/es/utils/format-bridge.d.ts

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+/**
+ * OpenCode VS Code 格式化桥接脚本
+ *
+ * VS Code 扩展可用时通过 HTTP API 格式化，不可用时直接返回（由 OpenCode 内置 prettier 兜底）。
+ *
+ * 用法: node format-bridge.cjs <filePath>
+ */
+export {};

package/es/utils/format-bridge.mjs

@@ -0,0 +1,80 @@
+#!/usr/bin/env node
+import fs from "fs";
+import http from "http";
+import path from "path";
+const filePath = process.argv[2];
+if (!filePath) {
+  console.error("Usage: node format-bridge.cjs <filePath>");
+  process.exit(1);
+}
+const absPath = path.resolve(filePath);
+const PORT = parseInt(process.env.AIPANEL_VSCODE_PORT || "", 10) || 51939;
+function touchFile() {
+  const now = /* @__PURE__ */ new Date();
+  fs.utimesSync(absPath, now, now);
+}
+function probeHealth() {
+  return new Promise((resolve) => {
+    const req = http.get(`http://127.0.0.1:${PORT}/health`, (res) => {
+      res.resume();
+      resolve(res.statusCode === 200);
+    });
+    req.setTimeout(500, () => {
+      req.destroy();
+      resolve(false);
+    });
+    req.on("error", () => resolve(false));
+  });
+}
+function formatViaExtension() {
+  return new Promise((resolve, reject) => {
+    const body = JSON.stringify({ filePath: absPath });
+    const req = http.request(
+      {
+        hostname: "127.0.0.1",
+        port: PORT,
+        path: "/format",
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        timeout: 5e3
+      },
+      (res) => {
+        const chunks = [];
+        res.on("data", (c) => chunks.push(c));
+        res.on("end", () => {
+          try {
+            const result = JSON.parse(Buffer.concat(chunks).toString());
+            if (result.error) {
+              reject(new Error(result.error));
+            } else {
+              resolve(result);
+            }
+          } catch (e) {
+            reject(e);
+          }
+        });
+      }
+    );
+    req.on("error", reject);
+    req.on("timeout", () => {
+      req.destroy();
+      reject(new Error("Timeout"));
+    });
+    req.write(body);
+    req.end();
+  });
+}
+async function main() {
+  const healthy = await probeHealth();
+  if (!healthy) {
+    touchFile();
+    process.exit(0);
+  }
+  try {
+    await formatViaExtension();
+  } catch {
+  }
+  touchFile();
+  process.exit(0);
+}
+main();

package/es/utils/paths.d.ts

@@ -0,0 +1,3 @@
+export declare function resolveWidgetPath(): string;
+export declare function resolveWidgetStylePath(): string;
+export declare function resolveVueDevtoolsBridgePath(): string;

package/es/utils/paths.mjs

@@ -0,0 +1,45 @@
+import fs from "fs";
+import path from "path";
+import { resolvePackageDir } from "@aipanel/core/node";
+const packageDir = resolvePackageDir("vite-plugin-aipanel");
+function resolveWidgetPath() {
+  const candidatePaths = [
+    path.join(packageDir, "es", "client.js"),
+    path.join(packageDir, "lib", "client.js")
+  ];
+  for (const candidatePath of candidatePaths) {
+    if (fs.existsSync(candidatePath)) {
+      return candidatePath;
+    }
+  }
+  return candidatePaths[0];
+}
+function resolveWidgetStylePath() {
+  const candidatePaths = [
+    path.join(packageDir, "es", "client.css"),
+    path.join(packageDir, "lib", "client.css")
+  ];
+  for (const candidatePath of candidatePaths) {
+    if (fs.existsSync(candidatePath)) {
+      return candidatePath;
+    }
+  }
+  return candidatePaths[0];
+}
+function resolveVueDevtoolsBridgePath() {
+  const candidatePaths = [
+    path.join(packageDir, "es", "client", "vue-devtools-bridge.mjs"),
+    path.join(packageDir, "lib", "client", "vue-devtools-bridge.cjs")
+  ];
+  for (const candidatePath of candidatePaths) {
+    if (fs.existsSync(candidatePath)) {
+      return candidatePath;
+    }
+  }
+  return candidatePaths[0];
+}
+export {
+  resolveVueDevtoolsBridgePath,
+  resolveWidgetPath,
+  resolveWidgetStylePath
+};

package/es/utils/system.d.ts

@@ -0,0 +1,3 @@
+import type { ResultPromise } from "execa";
+export declare function waitForServer(url: string, timeout?: number, process?: ResultPromise): Promise<void>;
+export declare function findGitRoot(startDir: string, maxDepth?: number): string;

package/es/utils/system.mjs

@@ -0,0 +1,76 @@
+import fs from "fs";
+import http from "http";
+import path from "path";
+import { SERVER_CHECK_INTERVAL } from "@aipanel/core";
+import { PerformanceTimer, createLogger } from "@aipanel/core/node";
+const log = createLogger("Utils");
+function waitForServer(url, timeout = 1e4, process) {
+  const timer = new PerformanceTimer("waitForServer", { url, timeout });
+  return new Promise((resolve, reject) => {
+    const startTime = Date.now();
+    let attempts = 0;
+    const check = () => {
+      attempts++;
+      log.debug(`Checking server availability (attempt ${attempts})`, { url });
+      if (process?.exitCode !== null && process?.exitCode !== void 0) {
+        timer.end(`\u274C Process exited with code ${process.exitCode}`);
+        reject(new Error(`Process exited with code ${process.exitCode}`));
+        return;
+      }
+      const req = http.get(url, (res) => {
+        if (res.statusCode && res.statusCode < 500) {
+          timer.end(`\u2713 Server ready after ${attempts} attempts`);
+          resolve();
+        } else {
+          log.debug(`Server returned status ${res.statusCode}, retrying...`);
+          retryOrReject();
+        }
+      });
+      req.on("error", (err) => {
+        log.debug(`Server check failed: ${err.message}`);
+        retryOrReject();
+      });
+    };
+    const retryOrReject = () => {
+      const elapsed = Date.now() - startTime;
+      if (elapsed < timeout) {
+        setTimeout(check, SERVER_CHECK_INTERVAL);
+      } else {
+        timer.end("\u274C Timeout");
+        reject(new Error(`Server not ready after ${timeout}ms (${attempts} attempts)`));
+      }
+    };
+    check();
+  });
+}
+function findGitRoot(startDir, maxDepth = 10) {
+  const timer = log.timer("findGitRoot", { startDir, maxDepth });
+  let currentDir = startDir;
+  let depth = 0;
+  while (depth < maxDepth) {
+    const gitDir = path.join(currentDir, ".git");
+    try {
+      if (fs.existsSync(gitDir)) {
+        timer.end(`\u2713 Found git root at depth ${depth}: ${currentDir}`);
+        return currentDir;
+      }
+    } catch (err) {
+      log.debug(`Error checking .git directory at ${currentDir}`, {
+        error: err.message
+      });
+    }
+    const parentDir = path.dirname(currentDir);
+    if (parentDir === currentDir) {
+      log.debug("Reached filesystem root");
+      break;
+    }
+    currentDir = parentDir;
+    depth++;
+  }
+  timer.end(`\u274C No git root found after ${depth} levels, using start directory`);
+  return startDir;
+}
+export {
+  findGitRoot,
+  waitForServer
+};