vite-plugin-aipanel 1.2.0-beta.0

package/es/endpoints/sessions.mjs

@@ -0,0 +1,62 @@
+import { SESSIONS_API_PATH } from "@aipanel/core";
+import { RequestContext, createLogger } from "@aipanel/core/node";
+const log = createLogger("Endpoints:Sessions");
+function setupSessionsEndpoint(server, ctx) {
+  server.middlewares.use(SESSIONS_API_PATH, async (req, res) => {
+    const reqCtx = new RequestContext(req.method || "GET", SESSIONS_API_PATH);
+    res.setHeader("Content-Type", "application/json");
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    res.setHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, OPTIONS");
+    res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+    if (req.method === "OPTIONS") {
+      res.writeHead(200);
+      res.end();
+      reqCtx.end(200);
+      return;
+    }
+    try {
+      if (req.method === "GET") {
+        reqCtx.checkpoint("Fetching sessions");
+        const [sessions, capabilities] = await Promise.all([
+          ctx.getSessions(),
+          ctx.getCapabilities()
+        ]);
+        res.writeHead(200);
+        res.end(JSON.stringify({ sessions, capabilities }));
+        reqCtx.end(200);
+      } else if (req.method === "POST") {
+        reqCtx.checkpoint("Creating session");
+        const newSession = await ctx.createSession();
+        res.writeHead(200);
+        res.end(JSON.stringify(newSession));
+        reqCtx.end(200);
+      } else if (req.method === "DELETE") {
+        const url = new URL(req.url || "", `http://${req.headers.host}`);
+        const sessionId = url.searchParams.get("id");
+        if (!sessionId) {
+          res.writeHead(400);
+          res.end(JSON.stringify({ error: "Session ID is required" }));
+          reqCtx.end(400);
+          return;
+        }
+        reqCtx.checkpoint(`Deleting session: ${sessionId}`);
+        await ctx.deleteSession(sessionId);
+        res.writeHead(200);
+        res.end(JSON.stringify({ success: true }));
+        reqCtx.end(200);
+      } else {
+        res.writeHead(405);
+        res.end(JSON.stringify({ error: "Method not allowed" }));
+        reqCtx.end(405);
+      }
+    } catch (e) {
+      log.error("Session API error", { error: e, method: req.method });
+      res.writeHead(500);
+      res.end(JSON.stringify({ error: String(e) }));
+      reqCtx.error(e);
+    }
+  });
+}
+export {
+  setupSessionsEndpoint
+};

package/es/endpoints/sse.d.ts

@@ -0,0 +1,3 @@
+import type { ViteDevServer } from "vite";
+import type { EndpointContext } from "./types";
+export declare function setupSseEndpoint(server: ViteDevServer, ctx: EndpointContext): void;

package/es/endpoints/sse.mjs

@@ -0,0 +1,44 @@
+import { SSE_EVENTS_PATH } from "@aipanel/core";
+import { RequestContext, createLogger } from "@aipanel/core/node";
+const log = createLogger("Endpoints:SSE");
+function setupSseEndpoint(server, ctx) {
+  server.middlewares.use(SSE_EVENTS_PATH, async (req, res) => {
+    const reqCtx = new RequestContext("GET", SSE_EVENTS_PATH);
+    res.writeHead(200, {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache",
+      Connection: "keep-alive",
+      "Access-Control-Allow-Origin": "*"
+    });
+    ctx.sseClients.add(res);
+    log.debug("SSE client connected", { totalClients: ctx.sseClients.size });
+    res.write(`data: ${JSON.stringify({ type: "CONNECTED" })}
+
+`);
+    const statusPayload = { type: "STATUS_SYNC" };
+    if (ctx.isServiceStarted !== void 0) {
+      statusPayload.isStarted = ctx.isServiceStarted;
+    }
+    if (ctx.currentTask) {
+      statusPayload.task = ctx.currentTask.task;
+      Object.keys(ctx.currentTask).forEach((key) => {
+        if (key !== "task") {
+          statusPayload[key] = ctx.currentTask[key];
+        }
+      });
+    }
+    res.write(`data: ${JSON.stringify(statusPayload)}
+
+`);
+    req.on("close", () => {
+      ctx.sseClients.delete(res);
+      log.debug("SSE client disconnected", {
+        totalClients: ctx.sseClients.size
+      });
+    });
+    reqCtx.end(200);
+  });
+}
+export {
+  setupSseEndpoint
+};

package/es/endpoints/start.d.ts

@@ -0,0 +1,3 @@
+import type { ViteDevServer } from "vite";
+import type { EndpointContext } from "./types";
+export declare function setupStartEndpoint(server: ViteDevServer, ctx: EndpointContext): void;

package/es/endpoints/start.mjs

@@ -0,0 +1,21 @@
+import { START_API_PATH } from "@aipanel/core";
+import { RequestContext } from "@aipanel/core/node";
+function setupStartEndpoint(server, ctx) {
+  server.middlewares.use(START_API_PATH, async (_req, res) => {
+    const reqCtx = new RequestContext("GET", START_API_PATH);
+    res.setHeader("Content-Type", "application/json");
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    res.writeHead(200);
+    res.end(JSON.stringify({
+      success: true,
+      proxyPort: ctx.actualProxyPort,
+      webPort: ctx.actualWebPort,
+      projectRoot: server.config.root,
+      serviceInstanceId: ctx.serviceInstanceId
+    }));
+    reqCtx.end(200);
+  });
+}
+export {
+  setupStartEndpoint
+};

package/es/endpoints/types.d.ts

@@ -0,0 +1,34 @@
+import type { ChatSession, PageContext, ProviderCapabilities, ServiceStartupTask } from "@aipanel/core";
+import type http from "http";
+export interface EndpointContext {
+    get webUrl(): string | null;
+    get sseClients(): Set<http.ServerResponse>;
+    /** 获取当前活跃 Tab 的上下文（扩展模式）或默认上下文（非扩展模式） */
+    getPageContext(): PageContext;
+    /** 写入某个 Tab 的上下文 */
+    setPageContext(tabId: string, ctx: PageContext): void;
+    /** 设置当前活跃 Tab ID */
+    setActiveTabId(tabId: string): void;
+    /** 清除选中元素（活跃 Tab） */
+    clearSelectedElements(): void;
+    get isServiceStarted(): boolean;
+    get currentTask(): {
+        task: ServiceStartupTask;
+        data?: Record<string, unknown>;
+    } | null;
+    get actualProxyPort(): number;
+    get actualWebPort(): number;
+    get serviceInstanceId(): string;
+    getSessions: () => Promise<ChatSession[]>;
+    createSession: () => Promise<ChatSession>;
+    deleteSession: (id: string) => Promise<void>;
+    /** 获取当前 Provider 能力描述（客户端自适应行为依据） */
+    getCapabilities: () => ProviderCapabilities;
+    resolveWidgetPath: () => string;
+    resolveWidgetStylePath: () => string;
+    retryWarmupChromeMcp: () => Promise<{
+        success: boolean;
+        errorType?: string;
+        errorMessage?: string;
+    }>;
+}

package/es/endpoints/vue-devtools.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Vue DevTools API 端点
+ * 接收 aipanel 插件的请求，通过 MCP 代理在浏览器中执行 window.__aipanel_vue
+ */
+import type { ViteDevServer } from "vite";
+import type { McpProxy } from "../core/mcp-proxy";
+export declare const VUE_DEVTOOLS_API_PATH = "/__aipanel_vue_devtools__";
+export declare function setupVueDevtoolsEndpoint(server: ViteDevServer, mcp: McpProxy): void;
+export declare function executeAction(action: string, args: Record<string, unknown> | undefined, mcp: McpProxy, projectOrigins: string[]): Promise<unknown>;

package/es/endpoints/vue-devtools.mjs

@@ -0,0 +1,107 @@
+import { createLogger } from "@aipanel/core/node";
+import { VUE_DEVTOOLS_ACTIONS } from "@aipanel/core";
+import { getProjectOrigins, validatePageId } from "../core/mcp-chrome.mjs";
+const log = createLogger("Endpoints:VueDevtools");
+const VUE_DEVTOOLS_API_PATH = "/__aipanel_vue_devtools__";
+function setupVueDevtoolsEndpoint(server, mcp) {
+  server.middlewares.use(VUE_DEVTOOLS_API_PATH, async (req, res) => {
+    res.setHeader("Content-Type", "application/json");
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    res.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
+    res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+    if (req.method === "OPTIONS") {
+      res.writeHead(200);
+      res.end();
+      return;
+    }
+    if (req.method !== "POST") {
+      res.writeHead(405);
+      res.end(JSON.stringify({ error: "Method not allowed" }));
+      return;
+    }
+    try {
+      const body = await readBody(req);
+      const { action, args } = JSON.parse(body);
+      const result = await executeAction(action, args, mcp, getProjectOrigins(server));
+      res.writeHead(200);
+      res.end(JSON.stringify({ success: true, data: result }));
+    } catch (e) {
+      log.error("Vue DevTools API error", { error: e.message });
+      res.writeHead(500);
+      res.end(JSON.stringify({ success: false, error: e.message }));
+    }
+  });
+}
+async function executeAction(action, args, mcp, projectOrigins) {
+  const pageId = args?.pageId;
+  if (typeof pageId !== "number") {
+    throw new Error("\u7F3A\u5C11 pageId \u53C2\u6570\uFF0C\u8BF7\u5148\u83B7\u53D6\u9875\u9762 ID");
+  }
+  const validation = await validatePageId(mcp, pageId, projectOrigins);
+  if (!validation.valid) {
+    log.error("pageId \u65E0\u6548\u6216\u975E\u9879\u76EE\u9875\u9762", {
+      pageId,
+      projectPageIds: validation.projectPages.map((p) => p.pageId)
+    });
+    throw new Error(validation.error);
+  }
+  await mcp.callChromeDevTool("select_page", { pageId, bringToFront: false });
+  const callExpr = buildCallExpr(action, args);
+  const result = await mcp.callChromeDevTool("evaluate_script", {
+    function: callExpr
+  });
+  const parsed = parseEvalResult(result);
+  return parsed;
+}
+function buildCallExpr(action, args) {
+  switch (action) {
+    case VUE_DEVTOOLS_ACTIONS.GET_COMPONENT_TREE:
+      return `async () => { return await window.__aipanel_vue.api.getInspectorTree({ inspectorId: "components", filter: ${JSON.stringify(args?.filter ?? "")} }) }`;
+    case VUE_DEVTOOLS_ACTIONS.GET_COMPONENT_STATE:
+      return `async () => { return await window.__aipanel_vue.api.getInspectorState({ inspectorId: "components", nodeId: ${JSON.stringify(args?.nodeId)} }) }`;
+    case VUE_DEVTOOLS_ACTIONS.GET_COMPONENT_RENDER_CODE:
+      return `async () => { return await window.__aipanel_vue.api.getComponentRenderCode(${JSON.stringify(args?.nodeId)}) }`;
+    case VUE_DEVTOOLS_ACTIONS.GET_APPS:
+      return `async () => { return window.__aipanel_vue.ctx.state.appRecords.map(r => ({ id: r.id, name: r.name })) }`;
+    case VUE_DEVTOOLS_ACTIONS.TOGGLE_APP:
+      return `async () => { await window.__aipanel_vue.api.toggleApp(${JSON.stringify(args?.appId)}); return "ok" }`;
+    case VUE_DEVTOOLS_ACTIONS.GET_ROUTER_INFO:
+      return `async () => { const r = window.__aipanel_vue.router.value; return window.__aipanel_vue.safeStringify({ currentRoute: r?.currentRoute?.value ?? null, routes: r?.getRoutes?.() ?? [] }) }`;
+    default:
+      throw new Error(`Unknown action: ${action}`);
+  }
+}
+function parseEvalResult(result) {
+  const r = result;
+  const text = r?.result?.content?.[0]?.text;
+  if (!text) return null;
+  let jsonText = text;
+  const mdMatch = text.match(/```(?:json)?\s*\n([\s\S]*?)\n\s*```/);
+  if (mdMatch) {
+    jsonText = mdMatch[1];
+  }
+  try {
+    return JSON.parse(jsonText);
+  } catch {
+    return text;
+  }
+}
+function readBody(req) {
+  return new Promise((resolve, reject) => {
+    let body = "";
+    req.on("data", (chunk) => {
+      body += chunk.toString();
+      if (body.length > 1024 * 1024) {
+        req.destroy();
+        reject(new Error("Request body too large"));
+      }
+    });
+    req.on("end", () => resolve(body));
+    req.on("error", reject);
+  });
+}
+export {
+  VUE_DEVTOOLS_API_PATH,
+  executeAction,
+  setupVueDevtoolsEndpoint
+};

package/es/endpoints/warmup.d.ts

@@ -0,0 +1,3 @@
+import type { ViteDevServer } from "vite";
+import type { EndpointContext } from "./types";
+export declare function setupWarmupEndpoint(server: ViteDevServer, ctx: EndpointContext): void;

package/es/endpoints/warmup.mjs

@@ -0,0 +1,42 @@
+import { createLogger } from "@aipanel/core/node";
+import { WARMUP_API_PATH } from "@aipanel/core";
+const log = createLogger("Endpoints:Warmup");
+function setupWarmupEndpoint(server, ctx) {
+  server.middlewares.use(WARMUP_API_PATH, async (req, res) => {
+    if (req.method !== "POST") {
+      res.writeHead(405);
+      res.end("Method not allowed");
+      return;
+    }
+    try {
+      const result = await ctx.retryWarmupChromeMcp();
+      res.setHeader("Content-Type", "application/json");
+      res.writeHead(200);
+      if (result.success) {
+        res.end(JSON.stringify({ success: true }));
+      } else {
+        res.end(
+          JSON.stringify({
+            success: false,
+            errorType: result.errorType,
+            error: result.errorMessage
+          })
+        );
+      }
+    } catch (e) {
+      log.error("Failed to retry warmup", { error: e });
+      res.setHeader("Content-Type", "application/json");
+      res.writeHead(500);
+      res.end(
+        JSON.stringify({
+          success: false,
+          errorType: "UNKNOWN",
+          error: String(e)
+        })
+      );
+    }
+  });
+}
+export {
+  setupWarmupEndpoint
+};

package/es/endpoints/widget.d.ts

@@ -0,0 +1,3 @@
+import type { ViteDevServer } from "vite";
+import type { EndpointContext } from "./types";
+export declare function setupWidgetEndpoints(server: ViteDevServer, ctx: EndpointContext): void;

package/es/endpoints/widget.mjs

@@ -0,0 +1,36 @@
+import fs from "fs";
+import { WIDGET_SCRIPT_PATH, WIDGET_STYLE_PATH } from "@aipanel/core";
+import { RequestContext } from "@aipanel/core/node";
+function setupWidgetEndpoints(server, ctx) {
+  server.middlewares.use(WIDGET_SCRIPT_PATH, async (_req, res) => {
+    const reqCtx = new RequestContext("GET", WIDGET_SCRIPT_PATH);
+    const widgetPath = ctx.resolveWidgetPath();
+    if (fs.existsSync(widgetPath)) {
+      res.setHeader("Content-Type", "application/javascript");
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      fs.createReadStream(widgetPath).pipe(res);
+      reqCtx.end(200);
+    } else {
+      res.writeHead(404);
+      res.end("Widget script not found");
+      reqCtx.end(404);
+    }
+  });
+  server.middlewares.use(WIDGET_STYLE_PATH, async (_req, res) => {
+    const reqCtx = new RequestContext("GET", WIDGET_STYLE_PATH);
+    const stylePath = ctx.resolveWidgetStylePath();
+    if (fs.existsSync(stylePath)) {
+      res.setHeader("Content-Type", "text/css");
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      fs.createReadStream(stylePath).pipe(res);
+      reqCtx.end(200);
+    } else {
+      res.writeHead(404);
+      res.end("Widget style not found");
+      reqCtx.end(404);
+    }
+  });
+}
+export {
+  setupWidgetEndpoints
+};

package/es/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="chrome" />

package/es/index.d.ts

@@ -0,0 +1,22 @@
+import type { Plugin } from "vite";
+import type { PluginOptions } from "@aipanel/core";
+import { type ProviderId } from "./core/provider-loader";
+import type { OpenCodeProviderOptions } from "@aipanel/provider-opencode";
+import type { DeepSeekProviderOptions } from "@aipanel/provider-deepseek";
+export type { PluginOptions } from "@aipanel/core";
+export type { OpenCodeProviderOptions } from "@aipanel/provider-opencode";
+export type { DeepSeekProviderOptions } from "@aipanel/provider-deepseek";
+export type { ProviderId };
+/**
+ * 编译期映射：provider id → providerOptions schema
+ * 与 provider-loader 的运行时包名映射对应；未知 provider 回退为宽松对象。
+ */
+type ProviderOptionsSchema<ID extends ProviderId> = ID extends "default" | "opencode" ? OpenCodeProviderOptions : ID extends "deepseek" ? DeepSeekProviderOptions : Record<string, unknown>;
+/**
+ * AIPanel Vite 插件
+ * provider 字段收窄为已登记的 ProviderId 联合类型（拼写错误在编译期报错）；
+ * providerOptions 的类型根据 options.provider 自动推断（未配置时默认 "default" → opencode）。
+ */
+export default function aipanelPlugin<const P extends ProviderId = "default">(options?: Omit<PluginOptions<ProviderOptionsSchema<P>>, "provider"> & {
+    provider?: P;
+}): Plugin[];