@xiaou66/vite-plugin-vue-mcp-next 1.1.1 → 1.2.0

package/dist/index.js

@@ -35,6 +35,11 @@ var MCP_TOOL_NAMES = {
   getNetworkRequests: "get_network_requests",
   getNetworkRequestDetail: "get_network_request_detail",
   clearNetworkRequests: "clear_network_requests",
+  listStorage: "list_storage",
+  getStorageItem: "get_storage_item",
+  setStorageItem: "set_storage_item",
+  deleteStorageItem: "delete_storage_item",
+  clearStorage: "clear_storage",
   recordPerformance: "record_performance",
   startPerformanceRecording: "start_performance_recording",
   stopPerformanceRecording: "stop_performance_recording",
@@ -57,11 +62,6 @@ var RESOLVED_VIRTUAL_SNAPDOM_LOADER_ID = `\0${VIRTUAL_SNAPDOM_LOADER_ID}`;
 var DEFAULT_MCP_CLIENT_SERVER_NAME = "vite-mcp-next";
 var LEGACY_MCP_CLIENT_SERVER_NAMES = ["vue-mcp-next"];
 var RUNTIME_PAGE_RECONNECTED_EVENT = "vite-plugin-vue-mcp-next:page-reconnected";
-var RUNTIME_PAGE_CONNECTED_EVENT = "vite-plugin-vue-mcp-next:page-connected";
-var RUNTIME_PAGE_DISCONNECTED_EVENT = "vite-plugin-vue-mcp-next:page-disconnected";
-var RUNTIME_PAGE_HEARTBEAT_EVENT = "vite-plugin-vue-mcp-next:heartbeat";
-var DEFAULT_RUNTIME_PAGE_HEARTBEAT_TIMEOUT_MS = 45e3;
-var DEFAULT_RUNTIME_PAGE_HEARTBEAT_SCAN_INTERVAL_MS = 45e3;
 var DEFAULT_OPTIONS = {
   mcpPath: DEFAULT_MCP_PATH,
   host: "localhost",
@@ -1511,9 +1511,431 @@ function getPathname(url) {
   }
 }
 
-// src/mcp/tools/screenshot.ts
+// src/mcp/tools/storage.ts
 import { z as z7 } from "zod";
 
+// src/cdp/cdpStorage.ts
+function createCdpStorageAdapter(client) {
+  return {
+    async manageStorage(request) {
+      try {
+        return await manageCdpStorage(client, request);
+      } catch (error) {
+        return createCdpStorageError(
+          request,
+          error instanceof Error ? error.message : String(error)
+        );
+      }
+    }
+  };
+}
+async function manageCdpStorage(client, request) {
+  if (request.scope === "cookie") {
+    return manageCdpCookies(client, request);
+  }
+  if (request.scope === "indexedDB") {
+    return manageCdpIndexedDb(client, request);
+  }
+  return manageCdpDomStorage(client, request);
+}
+async function manageCdpCookies(client, request) {
+  if (request.action === "list" || request.action === "get") {
+    const result2 = await client.Storage.getCookies();
+    const cookies2 = result2.cookies.filter(
+      (cookie) => isCookieInOrigin(cookie, request.origin)
+    );
+    return createCdpStorageSuccess(request, {
+      origin: request.origin,
+      cookies: request.action === "get" && request.cookie?.name ? cookies2.filter((cookie) => cookie.name === request.cookie?.name) : cookies2
+    });
+  }
+  if (request.action === "set") {
+    if (!request.cookie?.name) {
+      throw new Error("Cookie name is required for set operation");
+    }
+    await client.Storage.setCookies({
+      cookies: [
+        {
+          name: request.cookie.name,
+          value: request.cookie.value ?? request.value ?? "",
+          url: request.cookie.url ?? request.origin,
+          domain: request.cookie.domain,
+          path: request.cookie.path,
+          httpOnly: request.cookie.httpOnly,
+          secure: request.cookie.secure,
+          sameSite: normalizeCookieSameSite(request.cookie.sameSite),
+          expires: request.cookie.expires
+        }
+      ]
+    });
+    return createCdpStorageSuccess(request, { ok: true });
+  }
+  const result = await client.Storage.getCookies();
+  const cookies = result.cookies.filter(
+    (cookie) => isCookieInOrigin(cookie, request.origin)
+  );
+  const candidates = request.action === "delete" && request.cookie?.name ? cookies.filter((cookie) => cookie.name === request.cookie?.name) : cookies;
+  const deletable = candidates.filter((cookie) => !cookie.httpOnly);
+  const skippedHttpOnlyCount = candidates.length - deletable.length;
+  for (const cookie of deletable) {
+    await client.Network.deleteCookies({
+      name: cookie.name,
+      domain: cookie.domain,
+      path: cookie.path
+    });
+  }
+  return createCdpStorageSuccess(request, {
+    deletedCount: deletable.length,
+    skippedHttpOnlyCount
+  });
+}
+async function manageCdpDomStorage(client, request) {
+  const storageId = {
+    securityOrigin: request.origin,
+    isLocalStorage: request.scope === "localStorage"
+  };
+  if (request.action === "list") {
+    const result2 = await client.DOMStorage.getDOMStorageItems({ storageId });
+    return createCdpStorageSuccess(request, {
+      origin: request.origin,
+      scope: request.scope,
+      entries: result2.entries.map(([key, value]) => ({ key, value }))
+    });
+  }
+  if (request.action === "get") {
+    assertStorageKey(request);
+    const result2 = await client.DOMStorage.getDOMStorageItems({ storageId });
+    const entry = result2.entries.find(([key]) => key === request.key);
+    return createCdpStorageSuccess(request, {
+      key: request.key,
+      value: entry?.[1] ?? null
+    });
+  }
+  if (request.action === "set") {
+    assertStorageKey(request);
+    await client.DOMStorage.setDOMStorageItem({
+      storageId,
+      key: request.key,
+      value: request.value ?? ""
+    });
+    return createCdpStorageSuccess(request, { ok: true });
+  }
+  if (request.action === "delete") {
+    assertStorageKey(request);
+    await client.DOMStorage.removeDOMStorageItem({
+      storageId,
+      key: request.key
+    });
+    return createCdpStorageSuccess(request, { ok: true });
+  }
+  const result = await client.DOMStorage.getDOMStorageItems({ storageId });
+  for (const [key] of result.entries) {
+    await client.DOMStorage.removeDOMStorageItem({ storageId, key });
+  }
+  return createCdpStorageSuccess(request, { deletedCount: result.entries.length });
+}
+async function manageCdpIndexedDb(client, request) {
+  if (request.action === "list") {
+    const result = await client.IndexedDB.requestDatabaseNames({
+      securityOrigin: request.origin
+    });
+    return createCdpStorageSuccess(request, {
+      origin: request.origin,
+      databases: result.databaseNames
+    });
+  }
+  assertIndexedDbTarget(request);
+  if (request.action === "get") {
+    const result = await client.IndexedDB.requestData({
+      securityOrigin: request.origin,
+      databaseName: request.databaseName,
+      objectStoreName: request.objectStoreName,
+      indexName: request.indexName ?? "",
+      skipCount: 0,
+      pageSize: 100
+    });
+    return createCdpStorageSuccess(request, {
+      entries: result.objectStoreDataEntries,
+      hasMore: result.hasMore
+    });
+  }
+  if (request.action === "delete") {
+    assertStorageKey(request);
+    await client.IndexedDB.deleteObjectStoreEntries({
+      securityOrigin: request.origin,
+      databaseName: request.databaseName,
+      objectStoreName: request.objectStoreName,
+      keyRange: createExactCdpKeyRange(request.key)
+    });
+    return createCdpStorageSuccess(request, { ok: true });
+  }
+  if (request.action === "clear") {
+    if (request.objectStoreName) {
+      await client.IndexedDB.clearObjectStore({
+        securityOrigin: request.origin,
+        databaseName: request.databaseName,
+        objectStoreName: request.objectStoreName
+      });
+      return createCdpStorageSuccess(request, { ok: true });
+    }
+    await client.IndexedDB.deleteDatabase({
+      securityOrigin: request.origin,
+      databaseName: request.databaseName
+    });
+    return createCdpStorageSuccess(request, { ok: true });
+  }
+  return createCdpStorageError(
+    request,
+    "IndexedDB set operation requires runtime bridge"
+  );
+}
+function isCookieInOrigin(cookie, origin) {
+  const hostname = new URL(origin).hostname;
+  const domain = cookie.domain?.replace(/^\./, "");
+  return Boolean(domain && (hostname === domain || hostname.endsWith(`.${domain}`)));
+}
+function normalizeCookieSameSite(sameSite) {
+  if (!sameSite) {
+    return void 0;
+  }
+  if (sameSite === "strict") {
+    return "Strict";
+  }
+  if (sameSite === "lax") {
+    return "Lax";
+  }
+  return "None";
+}
+function createExactCdpKeyRange(key) {
+  const parsedKey = parseJsonValue(key);
+  return {
+    lower: parsedKey,
+    upper: parsedKey,
+    lowerOpen: false,
+    upperOpen: false
+  };
+}
+function parseJsonValue(value) {
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+function assertStorageKey(request) {
+  if (!request.key) {
+    throw new Error("Storage key is required for this operation");
+  }
+}
+function assertIndexedDbTarget(request) {
+  if (!request.databaseName || !request.objectStoreName) {
+    throw new Error("IndexedDB databaseName and objectStoreName are required");
+  }
+}
+function createCdpStorageSuccess(request, data) {
+  return {
+    ok: true,
+    source: "cdp",
+    action: request.action,
+    scope: request.scope,
+    data
+  };
+}
+function createCdpStorageError(request, error) {
+  return {
+    ok: false,
+    source: "cdp",
+    action: request.action,
+    scope: request.scope,
+    error
+  };
+}
+
+// src/mcp/tools/storage.ts
+function registerStorageTools(server, ctx) {
+  registerStorageTool(server, MCP_TOOL_NAMES.listStorage, {
+    description: "List same-origin storage and CDP cookies when available.",
+    inputSchema: {
+      pageId: z7.string().optional()
+    },
+    action: "list",
+    handler: (input) => handleListStorage(ctx, input.pageId)
+  });
+  registerStorageTool(server, MCP_TOOL_NAMES.getStorageItem, {
+    description: "Read one storage entry.",
+    inputSchema: createStorageInputSchema(),
+    action: "get",
+    handler: (input) => handleStorageAction(ctx, { ...input, action: "get" })
+  });
+  registerStorageTool(server, MCP_TOOL_NAMES.setStorageItem, {
+    description: "Write one storage entry.",
+    inputSchema: createStorageInputSchema(),
+    action: "set",
+    handler: (input) => handleStorageAction(ctx, { ...input, action: "set" })
+  });
+  registerStorageTool(server, MCP_TOOL_NAMES.deleteStorageItem, {
+    description: "Delete one storage entry.",
+    inputSchema: createStorageInputSchema(),
+    action: "delete",
+    handler: (input) => handleStorageAction(ctx, { ...input, action: "delete" })
+  });
+  registerStorageTool(server, MCP_TOOL_NAMES.clearStorage, {
+    description: "Clear one storage scope.",
+    inputSchema: createStorageInputSchema(),
+    action: "clear",
+    handler: (input) => handleStorageAction(ctx, { ...input, action: "clear" })
+  });
+}
+function registerStorageTool(server, name, options) {
+  server.registerTool(
+    name,
+    {
+      description: options.description,
+      inputSchema: options.inputSchema
+    },
+    (async (input) => options.handler(
+      input
+    ))
+  );
+}
+function createStorageInputSchema() {
+  return {
+    pageId: z7.string().optional(),
+    scope: z7.enum(["localStorage", "sessionStorage", "indexedDB", "cookie"]).optional(),
+    key: z7.string().optional(),
+    value: z7.string().optional(),
+    databaseName: z7.string().optional(),
+    objectStoreName: z7.string().optional(),
+    indexName: z7.string().optional(),
+    cookie: z7.object({
+      name: z7.string(),
+      value: z7.string().optional(),
+      domain: z7.string().optional(),
+      path: z7.string().optional(),
+      url: z7.string().optional(),
+      httpOnly: z7.boolean().optional(),
+      secure: z7.boolean().optional(),
+      sameSite: z7.enum(["strict", "lax", "none"]).optional(),
+      expires: z7.number().optional()
+    }).optional()
+  };
+}
+async function handleListStorage(ctx, pageId) {
+  let baseRequest;
+  try {
+    baseRequest = createStorageRequest(ctx, {
+      pageId,
+      action: "list",
+      scope: "localStorage"
+    });
+  } catch (error) {
+    return createToolError(error instanceof Error ? error.message : String(error));
+  }
+  const [localStorage, sessionStorage, indexedDB] = await Promise.all([
+    requestRuntimeStorage(ctx, { ...baseRequest, scope: "localStorage" }),
+    requestRuntimeStorage(ctx, { ...baseRequest, scope: "sessionStorage" }),
+    requestRuntimeStorage(ctx, { ...baseRequest, scope: "indexedDB" })
+  ]);
+  const cookie = await listCookiesIfCdpAvailable(ctx, baseRequest, pageId);
+  return createToolResponse({
+    ok: true,
+    origin: baseRequest.origin,
+    localStorage: extractStorageData(localStorage),
+    sessionStorage: extractStorageData(sessionStorage),
+    indexedDB: extractStorageData(indexedDB),
+    cookie
+  });
+}
+async function handleStorageAction(ctx, input) {
+  let request;
+  try {
+    request = createStorageRequest(ctx, input);
+  } catch (error) {
+    return createToolError(error instanceof Error ? error.message : String(error));
+  }
+  const cdp = await connectCdpForPage(ctx, input.pageId);
+  if (cdp && shouldUseCdpStorage(request)) {
+    try {
+      const result2 = await createCdpStorageAdapter(cdp.client).manageStorage(
+        request
+      );
+      return createToolResponse(result2);
+    } finally {
+      await closeCdpClient(cdp.client);
+    }
+  }
+  const result = await requestRuntimeStorage(ctx, request);
+  return createToolResponse(result);
+}
+async function requestRuntimeStorage(ctx, request) {
+  return requestRuntimeData(ctx, (event) => {
+    void ctx.rpcServer?.manageStorage({
+      ...request,
+      event
+    });
+  });
+}
+async function listCookiesIfCdpAvailable(ctx, request, pageId) {
+  if (!hasCdpConfig2(ctx)) {
+    return extractStorageData(
+      await requestRuntimeStorage(ctx, { ...request, scope: "cookie" })
+    );
+  }
+  const cdp = await connectCdpForPage(ctx, pageId);
+  if (!cdp) {
+    return extractStorageData(
+      await requestRuntimeStorage(ctx, { ...request, scope: "cookie" })
+    );
+  }
+  try {
+    const result = await createCdpStorageAdapter(cdp.client).manageStorage({
+      ...request,
+      scope: "cookie"
+    });
+    return extractStorageData(result);
+  } finally {
+    await closeCdpClient(cdp.client);
+  }
+}
+function extractStorageData(result) {
+  if (!isStorageResultRecord(result)) {
+    return result;
+  }
+  return result.data ?? result;
+}
+function isStorageResultRecord(value) {
+  return typeof value === "object" && value !== null && "ok" in value;
+}
+function shouldUseCdpStorage(request) {
+  return request.scope === "cookie";
+}
+function createStorageRequest(ctx, input) {
+  const page = resolvePageTarget(ctx, input.pageId);
+  const origin = new URL(page.url).origin;
+  return {
+    event: "",
+    pageId: page.pageId,
+    origin,
+    action: input.action,
+    scope: normalizeScope(input.scope),
+    key: input.key,
+    value: input.value,
+    databaseName: input.databaseName,
+    objectStoreName: input.objectStoreName,
+    indexName: input.indexName,
+    cookie: input.cookie
+  };
+}
+function normalizeScope(scope) {
+  return scope ?? "localStorage";
+}
+function hasCdpConfig2(ctx) {
+  return Boolean(ctx.options.cdp.browserUrl || ctx.options.cdp.wsEndpoint);
+}
+
+// src/mcp/tools/screenshot.ts
+import { z as z8 } from "zod";
+
 // src/cdp/cdpScreenshot.ts
 async function cdpCaptureScreenshot(options) {
   if (options.target === "element") {
@@ -1672,14 +2094,14 @@ function createProjectRelativePath(ctx, filePath) {
 var DEFAULT_SCREENSHOT_TARGET = "viewport";
 var DEFAULT_SCREENSHOT_FORMAT = "png";
 var screenshotInputSchema = {
-  pageId: z7.string().optional(),
-  target: z7.enum(["viewport", "fullPage", "element"]).optional(),
-  selector: z7.string().optional(),
-  format: z7.enum(["png", "jpeg", "webp"]).optional(),
-  prefer: z7.enum(["auto", "cdp", "runtime"]).optional(),
-  quality: z7.number().optional(),
-  scale: z7.number().optional(),
-  snapdom: z7.record(z7.string(), z7.unknown()).optional()
+  pageId: z8.string().optional(),
+  target: z8.enum(["viewport", "fullPage", "element"]).optional(),
+  selector: z8.string().optional(),
+  format: z8.enum(["png", "jpeg", "webp"]).optional(),
+  prefer: z8.enum(["auto", "cdp", "runtime"]).optional(),
+  quality: z8.number().optional(),
+  scale: z8.number().optional(),
+  snapdom: z8.record(z8.string(), z8.unknown()).optional()
 };
 function registerScreenshotTools(server, ctx) {
   server.registerTool(
@@ -1799,7 +2221,7 @@ function isScreenshotImagePayload(result) {
 
 // src/mcp/tools/vue.ts
 import { nanoid as nanoid3 } from "nanoid";
-import { z as z8 } from "zod";
+import { z as z9 } from "zod";
 function registerVueTools(server, ctx) {
   server.registerTool(
     MCP_TOOL_NAMES.getComponentTree,
@@ -1812,7 +2234,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.getComponentState,
     {
       description: "Get Vue component state.",
-      inputSchema: { componentName: z8.string() }
+      inputSchema: { componentName: z9.string() }
     },
     async ({ componentName }) => requestVueData(ctx, (event) => {
       void ctx.rpcServer?.getInspectorState({ event, componentName });
@@ -1823,10 +2245,10 @@ function registerVueTools(server, ctx) {
     {
       description: "Edit Vue component state.",
       inputSchema: {
-        componentName: z8.string(),
-        path: z8.array(z8.string()),
-        value: z8.string(),
-        valueType: z8.enum(["string", "number", "boolean", "object", "array"])
+        componentName: z9.string(),
+        path: z9.array(z9.string()),
+        value: z9.string(),
+        valueType: z9.enum(["string", "number", "boolean", "object", "array"])
       }
     },
     ({ componentName, path: path8, value, valueType }) => {
@@ -1846,7 +2268,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.highlightComponent,
     {
       description: "Highlight a Vue component.",
-      inputSchema: { componentName: z8.string() }
+      inputSchema: { componentName: z9.string() }
     },
     ({ componentName }) => {
       if (!ctx.rpcServer) {
@@ -1874,7 +2296,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.getPiniaState,
     {
       description: "Get Pinia store state.",
-      inputSchema: { storeName: z8.string() }
+      inputSchema: { storeName: z9.string() }
     },
     async ({ storeName }) => requestVueData(ctx, (event) => {
       void ctx.rpcServer?.getPiniaState({ event, storeName });
@@ -1921,6 +2343,7 @@ function createMcpServer(ctx, vite) {
   registerConsoleTools(server, ctx);
   registerEvaluateTools(server, ctx);
   registerNetworkTools(server, ctx);
+  registerStorageTools(server, ctx);
   registerPerformanceTools(server, ctx);
   registerVueTools(server, ctx);
   return server;
@@ -2009,6 +2432,10 @@ function createServerVueRuntimeRpc(ctx) {
     onScreenshotTaken: (event, data) => {
       void ctx.hooks.callHook(event, data);
     },
+    manageStorage: () => void 0,
+    onStorageUpdated: (event, data) => {
+      void ctx.hooks.callHook(event, data);
+    },
     recordPerformance: () => void 0,
     onPerformanceRecorded: (event, data) => {
       void ctx.hooks.callHook(event, data);
@@ -2917,53 +3344,32 @@ function vueMcpNext(userOptions = {}) {
         () => createMcpServer(ctx, server),
         server
       );
-      const lastSeenAt = /* @__PURE__ */ new Map();
-      const heartbeatTimer = setInterval(() => {
-        const now = Date.now();
-        for (const [pageId, seenAt] of lastSeenAt) {
-          const target = ctx.pages.get(pageId);
-          if (!target || target.source !== "runtime" || !target.connected) {
-            lastSeenAt.delete(pageId);
-            continue;
-          }
-          if (now - seenAt >= DEFAULT_RUNTIME_PAGE_HEARTBEAT_TIMEOUT_MS) {
-            ctx.pages.disconnect(pageId, now);
-            lastSeenAt.delete(pageId);
+      server.ws.on(
+        "vite-plugin-vue-mcp-next:page-connected",
+        (payload) => {
+          if (isRuntimePageTarget(payload)) {
+            ctx.pages.upsert(payload);
+            void ctx.hooks.callHook(RUNTIME_PAGE_RECONNECTED_EVENT, payload);
+            void cdpLifecycle.connectPage(payload);
           }
         }
-      }, DEFAULT_RUNTIME_PAGE_HEARTBEAT_SCAN_INTERVAL_MS);
-      server.ws.on(RUNTIME_PAGE_CONNECTED_EVENT, (payload) => {
-        if (isRuntimePageTarget(payload)) {
-          ctx.pages.upsert(payload);
-          lastSeenAt.set(payload.pageId, Date.now());
-          void ctx.hooks.callHook(RUNTIME_PAGE_RECONNECTED_EVENT, payload);
-          void cdpLifecycle.connectPage(payload);
-        }
-      });
-      server.ws.on(RUNTIME_PAGE_HEARTBEAT_EVENT, (payload) => {
-        if (isRuntimeHeartbeatTarget(payload)) {
-          const target = ctx.pages.get(payload.pageId);
-          if (target?.source === "runtime" && target.connected) {
-            lastSeenAt.set(payload.pageId, payload.timestamp);
+      );
+      server.ws.on(
+        "vite-plugin-vue-mcp-next:console-record",
+        (payload) => {
+          if (isConsoleRecord(payload)) {
+            ctx.consoleRecords.push(payload);
           }
         }
-      });
-      server.ws.on(RUNTIME_PAGE_DISCONNECTED_EVENT, (payload) => {
-        if (isRuntimeDisconnectTarget(payload)) {
-          ctx.pages.disconnect(payload.pageId);
-          lastSeenAt.delete(payload.pageId);
-        }
-      });
-      server.ws.on("vite-plugin-vue-mcp-next:console-record", (payload) => {
-        if (isConsoleRecord(payload)) {
-          ctx.consoleRecords.push(payload);
-        }
-      });
-      server.ws.on("vite-plugin-vue-mcp-next:network-record", (payload) => {
-        if (isNetworkRecord(payload)) {
-          ctx.networkRecords.push(payload);
+      );
+      server.ws.on(
+        "vite-plugin-vue-mcp-next:network-record",
+        (payload) => {
+          if (isNetworkRecord(payload)) {
+            ctx.networkRecords.push(payload);
+          }
         }
-      });
+      );
       server.ws.on(
         "vite-plugin-vue-mcp-next:performance-record",
         (payload) => {
@@ -2993,7 +3399,6 @@ function vueMcpNext(userOptions = {}) {
         }, 300);
       }
       server.httpServer?.once("close", () => {
-        clearInterval(heartbeatTimer);
         void cdpLifecycle.closeAll();
       });
     },
@@ -3018,20 +3423,6 @@ function isRuntimePageTarget(payload) {
   const target = payload;
   return target.source === "runtime" && typeof target.pageId === "string" && typeof target.url === "string" && typeof target.pathname === "string" && typeof target.connected === "boolean" && (target.runtimeClientId === void 0 || typeof target.runtimeClientId === "string");
 }
-function isRuntimeHeartbeatTarget(payload) {
-  if (!payload || typeof payload !== "object") {
-    return false;
-  }
-  const target = payload;
-  return typeof target.pageId === "string" && typeof target.timestamp === "number";
-}
-function isRuntimeDisconnectTarget(payload) {
-  if (!payload || typeof payload !== "object") {
-    return false;
-  }
-  const target = payload;
-  return typeof target.pageId === "string";
-}
 function isConsoleRecord(payload) {
   if (!payload || typeof payload !== "object") {
     return false;