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

package/dist/index.cjs

@@ -72,6 +72,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",
@@ -83,7 +88,8 @@ var MCP_TOOL_NAMES = {
   highlightComponent: "highlight_component",
   getRouterInfo: "get_router_info",
   getPiniaTree: "get_pinia_tree",
-  getPiniaState: "get_pinia_state"
+  getPiniaState: "get_pinia_state",
+  getElementContext: "get_element_context"
 };
 var VIRTUAL_RUNTIME_ID = "virtual:vite-plugin-vue-mcp-next/runtime";
 var RESOLVED_VIRTUAL_RUNTIME_ID = `\0${VIRTUAL_RUNTIME_ID}`;
@@ -99,6 +105,7 @@ var RUNTIME_PAGE_DISCONNECTED_EVENT = "vite-plugin-vue-mcp-next:page-disconnecte
 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_ELEMENT_PICKER_TOAST_DURATION_MS = 2200;
 var DEFAULT_OPTIONS = {
   mcpPath: DEFAULT_MCP_PATH,
   host: "localhost",
@@ -117,6 +124,16 @@ var DEFAULT_OPTIONS = {
   skill: {
     autoConfig: true
   },
+  elementPicker: {
+    enabled: true,
+    shortcut: {
+      altKey: true,
+      shiftKey: true,
+      metaKey: false,
+      ctrlKey: false
+    },
+    toastDurationMs: DEFAULT_ELEMENT_PICKER_TOAST_DURATION_MS
+  },
   runtime: {
     mode: "auto",
     evaluate: {
@@ -191,6 +208,14 @@ function mergeOptions(options = {}) {
       ...DEFAULT_OPTIONS.skill,
       ...options.skill
     },
+    elementPicker: {
+      ...DEFAULT_OPTIONS.elementPicker,
+      ...options.elementPicker,
+      shortcut: {
+        ...DEFAULT_OPTIONS.elementPicker.shortcut,
+        ...options.elementPicker?.shortcut
+      }
+    },
     runtime: {
       ...DEFAULT_OPTIONS.runtime,
       ...options.runtime,
@@ -611,9 +636,164 @@ function registerDomTools(server, ctx) {
   );
 }
 
-// src/mcp/tools/evaluate.ts
+// src/mcp/tools/elementContext.ts
 var import_zod3 = require("zod");
 
+// src/shared/elementId.ts
+var PROJECT_SOURCE_ID_PATTERN = /^(.+\.(?:vue|tsx|jsx|ts|js)):(\d+):(\d+)$/;
+var RUNTIME_ID_PATTERN = /^runtime:([A-Za-z0-9_-]+)$/;
+var PACKAGE_ID_PREFIX = "pkg:";
+function parseElementId(elementId) {
+  const sourceMatch = PROJECT_SOURCE_ID_PATTERN.exec(elementId);
+  if (sourceMatch) {
+    return {
+      kind: "project-source",
+      elementId,
+      file: sourceMatch[1],
+      line: Number(sourceMatch[2]),
+      column: Number(sourceMatch[3])
+    };
+  }
+  if (elementId.startsWith(PACKAGE_ID_PREFIX)) {
+    return parsePackageElementId(elementId);
+  }
+  const runtimeMatch = RUNTIME_ID_PATTERN.exec(elementId);
+  if (runtimeMatch) {
+    return {
+      kind: "runtime",
+      elementId,
+      runtimeId: runtimeMatch[1]
+    };
+  }
+  return {
+    kind: "invalid",
+    elementId,
+    reason: "unsupported elementId format"
+  };
+}
+function parsePackageElementId(elementId) {
+  const value = elementId.slice(PACKAGE_ID_PREFIX.length);
+  const parts = value.split("/").filter(Boolean);
+  if (parts.length < 2) {
+    return {
+      kind: "invalid",
+      elementId,
+      reason: "package elementId must include packageName and entryFile"
+    };
+  }
+  const scoped = parts[0]?.startsWith("@");
+  const packageName = scoped ? parts.slice(0, 2).join("/") : parts[0];
+  const entryFile = parts.slice(scoped ? 2 : 1).join("/");
+  if (!entryFile) {
+    return {
+      kind: "invalid",
+      elementId,
+      reason: "package elementId must include entryFile"
+    };
+  }
+  return {
+    kind: "package",
+    elementId,
+    packageName,
+    entryFile
+  };
+}
+
+// src/mcp/tools/elementContext.ts
+function registerElementContextTools(server, ctx) {
+  server.registerTool(
+    MCP_TOOL_NAMES.getElementContext,
+    {
+      description: "Get editable source, Vue component, and DOM context for a copied elementId.",
+      inputSchema: {
+        elementId: import_zod3.z.string(),
+        pageId: import_zod3.z.string().optional()
+      }
+    },
+    async (input) => {
+      const runtimeResult = await tryRuntimeElementContext(
+        ctx,
+        input.elementId,
+        input.pageId
+      );
+      if (runtimeResult) {
+        return createToolResponse(runtimeResult);
+      }
+      return createToolResponse(createStaticElementContext(input.elementId));
+    }
+  );
+}
+async function tryRuntimeElementContext(ctx, elementId, pageId) {
+  if (!ctx.rpcServer) {
+    return parseElementId(elementId).kind === "runtime" ? createRuntimeUnavailableContext(elementId) : void 0;
+  }
+  try {
+    resolvePageTarget(ctx, pageId);
+  } catch (error) {
+    const parsed = parseElementId(elementId);
+    if (parsed.kind === "project-source" || parsed.kind === "package") {
+      return void 0;
+    }
+    return {
+      ok: false,
+      elementId,
+      error: error instanceof Error ? error.message : String(error),
+      limitations: ["call list_pages and pass pageId when multiple pages exist"]
+    };
+  }
+  return await requestRuntimeData(ctx, (event) => {
+    void ctx.rpcServer?.getElementContext({ event, elementId });
+  });
+}
+function createStaticElementContext(elementId) {
+  const parsed = parseElementId(elementId);
+  if (parsed.kind === "project-source") {
+    return {
+      ok: true,
+      elementId,
+      editable: true,
+      codeLocation: {
+        file: parsed.file,
+        line: parsed.line,
+        column: parsed.column
+      },
+      limitations: ["runtime unavailable, DOM and component context omitted"]
+    };
+  }
+  if (parsed.kind === "package") {
+    return {
+      ok: true,
+      elementId,
+      editable: false,
+      packageLocation: {
+        packageName: parsed.packageName,
+        entryFile: parsed.entryFile
+      },
+      limitations: ["third-party package source is not editable from this project"]
+    };
+  }
+  if (parsed.kind === "runtime") {
+    return createRuntimeUnavailableContext(elementId);
+  }
+  return {
+    ok: false,
+    elementId,
+    error: parsed.reason,
+    limitations: ["please provide a copied elementId from the element picker"]
+  };
+}
+function createRuntimeUnavailableContext(elementId) {
+  return {
+    ok: false,
+    elementId,
+    error: "runtime bridge is not connected",
+    limitations: ["runtime ids are only valid while the page is connected"]
+  };
+}
+
+// src/mcp/tools/evaluate.ts
+var import_zod4 = require("zod");
+
 // src/cdp/cdpEvaluate.ts
 async function cdpEvaluate(options) {
   const result = await options.client.Runtime.evaluate({
@@ -634,9 +814,9 @@ function registerEvaluateTools(server, ctx) {
     {
       description: "Evaluate a script in the selected page when explicitly enabled.",
       inputSchema: {
-        pageId: import_zod3.z.string().optional(),
-        expression: import_zod3.z.string(),
-        awaitPromise: import_zod3.z.boolean().optional()
+        pageId: import_zod4.z.string().optional(),
+        expression: import_zod4.z.string(),
+        awaitPromise: import_zod4.z.boolean().optional()
       }
     },
     async (input) => {
@@ -685,18 +865,18 @@ function assertEvaluateEnabled(options) {
 }
 
 // src/mcp/tools/network.ts
-var import_zod4 = require("zod");
+var import_zod5 = require("zod");
 function registerNetworkTools(server, ctx) {
   server.registerTool(
     MCP_TOOL_NAMES.getNetworkRequests,
     {
       description: "Get captured network request summaries.",
       inputSchema: {
-        pageId: import_zod4.z.string().optional(),
-        urlContains: import_zod4.z.string().optional(),
-        method: import_zod4.z.string().optional(),
-        status: import_zod4.z.number().optional(),
-        limit: import_zod4.z.number().optional()
+        pageId: import_zod5.z.string().optional(),
+        urlContains: import_zod5.z.string().optional(),
+        method: import_zod5.z.string().optional(),
+        status: import_zod5.z.number().optional(),
+        limit: import_zod5.z.number().optional()
       }
     },
     (input) => {
@@ -719,7 +899,7 @@ function registerNetworkTools(server, ctx) {
     MCP_TOOL_NAMES.getNetworkRequestDetail,
     {
       description: "Get captured network request detail by id.",
-      inputSchema: { id: import_zod4.z.string() }
+      inputSchema: { id: import_zod5.z.string() }
     },
     (input) => {
       if (ctx.options.network.mode === "off") {
@@ -736,7 +916,7 @@ function registerNetworkTools(server, ctx) {
     {
       description: "Clear cached network requests.",
       inputSchema: {
-        pageId: import_zod4.z.string().optional()
+        pageId: import_zod5.z.string().optional()
       }
     },
     () => {
@@ -747,7 +927,7 @@ function registerNetworkTools(server, ctx) {
 }
 
 // src/mcp/tools/performance.ts
-var import_zod5 = require("zod");
+var import_zod6 = require("zod");
 
 // src/performance/summary.ts
 function buildPerformanceSummary(input) {
@@ -1029,10 +1209,10 @@ function registerPerformanceTools(server, ctx) {
     {
       description: "Record a performance sample for the selected page.",
       inputSchema: {
-        pageId: import_zod5.z.string().optional(),
-        durationMs: import_zod5.z.number().optional(),
-        includeMemory: import_zod5.z.boolean().optional(),
-        includeStacks: import_zod5.z.boolean().optional()
+        pageId: import_zod6.z.string().optional(),
+        durationMs: import_zod6.z.number().optional(),
+        includeMemory: import_zod6.z.boolean().optional(),
+        includeStacks: import_zod6.z.boolean().optional()
       }
     },
     async (input) => handleRecordPerformance(ctx, input)
@@ -1042,9 +1222,9 @@ function registerPerformanceTools(server, ctx) {
     {
       description: "Start a performance recording session.",
       inputSchema: {
-        pageId: import_zod5.z.string().optional(),
-        includeMemory: import_zod5.z.boolean().optional(),
-        includeStacks: import_zod5.z.boolean().optional()
+        pageId: import_zod6.z.string().optional(),
+        includeMemory: import_zod6.z.boolean().optional(),
+        includeStacks: import_zod6.z.boolean().optional()
       }
     },
     async (input) => handleStartPerformanceRecording(ctx, input)
@@ -1054,7 +1234,7 @@ function registerPerformanceTools(server, ctx) {
     {
       description: "Stop a performance recording session.",
       inputSchema: {
-        recordingId: import_zod5.z.string()
+        recordingId: import_zod6.z.string()
       }
     },
     async (input) => handleStopPerformanceRecording(ctx, input)
@@ -1064,9 +1244,9 @@ function registerPerformanceTools(server, ctx) {
     {
       description: "Get cached performance reports and active sessions.",
       inputSchema: {
-        pageId: import_zod5.z.string().optional(),
-        recordingId: import_zod5.z.string().optional(),
-        limit: import_zod5.z.number().optional()
+        pageId: import_zod6.z.string().optional(),
+        recordingId: import_zod6.z.string().optional(),
+        limit: import_zod6.z.number().optional()
       }
     },
     (input) => handleGetPerformanceReport(ctx, input)
@@ -1076,7 +1256,7 @@ function registerPerformanceTools(server, ctx) {
     {
       description: "Take a heap snapshot with CDP.",
       inputSchema: {
-        pageId: import_zod5.z.string().optional()
+        pageId: import_zod6.z.string().optional()
       }
     },
     async (input) => handleTakeHeapSnapshot(ctx, input)
@@ -1333,7 +1513,7 @@ function toStructuredRecord(value) {
 }
 
 // src/mcp/tools/pages.ts
-var import_zod6 = require("zod");
+var import_zod7 = require("zod");
 
 // src/plugin/entryDiscovery.ts
 var import_node_fs = __toESM(require("fs"), 1);
@@ -1358,10 +1538,10 @@ function walkHtmlEntries(root, dir, entries) {
     if (!item.isFile() || !item.name.endsWith(".html")) {
       continue;
     }
-    const relative2 = (0, import_vite.normalizePath)(import_node_path2.default.relative(root, fullPath));
+    const relative3 = (0, import_vite.normalizePath)(import_node_path2.default.relative(root, fullPath));
     entries.push({
-      file: relative2,
-      pathname: relative2 === "index.html" ? "/" : `/${relative2}`
+      file: relative3,
+      pathname: relative3 === "index.html" ? "/" : `/${relative3}`
     });
   }
 }
@@ -1373,7 +1553,7 @@ function registerPageTools(server, ctx, vite) {
     {
       description: "List Vite page entries and connected runtime/CDP targets.",
       inputSchema: {
-        includeDisconnected: import_zod6.z.boolean().optional()
+        includeDisconnected: import_zod7.z.boolean().optional()
       }
     },
     async (input) => {
@@ -1396,8 +1576,8 @@ function registerPageTools(server, ctx, vite) {
     {
       description: "Reload the selected page. CDP uses ignoreCache; Runtime Hook falls back to normal reload.",
       inputSchema: {
-        pageId: import_zod6.z.string().optional(),
-        ignoreCache: import_zod6.z.boolean().optional()
+        pageId: import_zod7.z.string().optional(),
+        ignoreCache: import_zod7.z.boolean().optional()
       }
     },
     async (input) => {
@@ -1548,8 +1728,430 @@ function getPathname(url) {
   }
 }
 
+// src/mcp/tools/storage.ts
+var import_zod8 = require("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: import_zod8.z.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: import_zod8.z.string().optional(),
+    scope: import_zod8.z.enum(["localStorage", "sessionStorage", "indexedDB", "cookie"]).optional(),
+    key: import_zod8.z.string().optional(),
+    value: import_zod8.z.string().optional(),
+    databaseName: import_zod8.z.string().optional(),
+    objectStoreName: import_zod8.z.string().optional(),
+    indexName: import_zod8.z.string().optional(),
+    cookie: import_zod8.z.object({
+      name: import_zod8.z.string(),
+      value: import_zod8.z.string().optional(),
+      domain: import_zod8.z.string().optional(),
+      path: import_zod8.z.string().optional(),
+      url: import_zod8.z.string().optional(),
+      httpOnly: import_zod8.z.boolean().optional(),
+      secure: import_zod8.z.boolean().optional(),
+      sameSite: import_zod8.z.enum(["strict", "lax", "none"]).optional(),
+      expires: import_zod8.z.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
-var import_zod7 = require("zod");
+var import_zod9 = require("zod");
 
 // src/cdp/cdpScreenshot.ts
 async function cdpCaptureScreenshot(options) {
@@ -1709,14 +2311,14 @@ function createProjectRelativePath(ctx, filePath) {
 var DEFAULT_SCREENSHOT_TARGET = "viewport";
 var DEFAULT_SCREENSHOT_FORMAT = "png";
 var screenshotInputSchema = {
-  pageId: import_zod7.z.string().optional(),
-  target: import_zod7.z.enum(["viewport", "fullPage", "element"]).optional(),
-  selector: import_zod7.z.string().optional(),
-  format: import_zod7.z.enum(["png", "jpeg", "webp"]).optional(),
-  prefer: import_zod7.z.enum(["auto", "cdp", "runtime"]).optional(),
-  quality: import_zod7.z.number().optional(),
-  scale: import_zod7.z.number().optional(),
-  snapdom: import_zod7.z.record(import_zod7.z.string(), import_zod7.z.unknown()).optional()
+  pageId: import_zod9.z.string().optional(),
+  target: import_zod9.z.enum(["viewport", "fullPage", "element"]).optional(),
+  selector: import_zod9.z.string().optional(),
+  format: import_zod9.z.enum(["png", "jpeg", "webp"]).optional(),
+  prefer: import_zod9.z.enum(["auto", "cdp", "runtime"]).optional(),
+  quality: import_zod9.z.number().optional(),
+  scale: import_zod9.z.number().optional(),
+  snapdom: import_zod9.z.record(import_zod9.z.string(), import_zod9.z.unknown()).optional()
 };
 function registerScreenshotTools(server, ctx) {
   server.registerTool(
@@ -1836,7 +2438,7 @@ function isScreenshotImagePayload(result) {
 
 // src/mcp/tools/vue.ts
 var import_nanoid3 = require("nanoid");
-var import_zod8 = require("zod");
+var import_zod10 = require("zod");
 function registerVueTools(server, ctx) {
   server.registerTool(
     MCP_TOOL_NAMES.getComponentTree,
@@ -1849,7 +2451,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.getComponentState,
     {
       description: "Get Vue component state.",
-      inputSchema: { componentName: import_zod8.z.string() }
+      inputSchema: { componentName: import_zod10.z.string() }
     },
     async ({ componentName }) => requestVueData(ctx, (event) => {
       void ctx.rpcServer?.getInspectorState({ event, componentName });
@@ -1860,10 +2462,10 @@ function registerVueTools(server, ctx) {
     {
       description: "Edit Vue component state.",
       inputSchema: {
-        componentName: import_zod8.z.string(),
-        path: import_zod8.z.array(import_zod8.z.string()),
-        value: import_zod8.z.string(),
-        valueType: import_zod8.z.enum(["string", "number", "boolean", "object", "array"])
+        componentName: import_zod10.z.string(),
+        path: import_zod10.z.array(import_zod10.z.string()),
+        value: import_zod10.z.string(),
+        valueType: import_zod10.z.enum(["string", "number", "boolean", "object", "array"])
       }
     },
     ({ componentName, path: path8, value, valueType }) => {
@@ -1883,7 +2485,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.highlightComponent,
     {
       description: "Highlight a Vue component.",
-      inputSchema: { componentName: import_zod8.z.string() }
+      inputSchema: { componentName: import_zod10.z.string() }
     },
     ({ componentName }) => {
       if (!ctx.rpcServer) {
@@ -1911,7 +2513,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.getPiniaState,
     {
       description: "Get Pinia store state.",
-      inputSchema: { storeName: import_zod8.z.string() }
+      inputSchema: { storeName: import_zod10.z.string() }
     },
     async ({ storeName }) => requestVueData(ctx, (event) => {
       void ctx.rpcServer?.getPiniaState({ event, storeName });
@@ -1954,10 +2556,12 @@ function createMcpServer(ctx, vite) {
   });
   registerPageTools(server, ctx, vite);
   registerDomTools(server, ctx);
+  registerElementContextTools(server, ctx);
   registerScreenshotTools(server, ctx);
   registerConsoleTools(server, ctx);
   registerEvaluateTools(server, ctx);
   registerNetworkTools(server, ctx);
+  registerStorageTools(server, ctx);
   registerPerformanceTools(server, ctx);
   registerVueTools(server, ctx);
   return server;
@@ -2034,6 +2638,10 @@ function createServerVueRuntimeRpc(ctx) {
     onDomQueryUpdated: (event, data) => {
       void ctx.hooks.callHook(event, data);
     },
+    getElementContext: () => void 0,
+    onElementContextUpdated: (event, data) => {
+      void ctx.hooks.callHook(event, data);
+    },
     reloadPage: () => void 0,
     onPageReloaded: (event, data) => {
       void ctx.hooks.callHook(event, data);
@@ -2046,6 +2654,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);
@@ -2342,9 +2954,85 @@ async function startCdpObservers(ctx, target, client) {
   }
 }
 
+// src/plugin/elementInstrumentation.ts
+var import_compiler_sfc = require("@vue/compiler-sfc");
+var import_magic_string = __toESM(require("magic-string"), 1);
+var import_node_path4 = require("path");
+var VUE_FILE_SUFFIX = ".vue";
+var ELEMENT_NODE_TYPE = 1;
+var SKIPPED_TAGS = /* @__PURE__ */ new Set(["template", "slot", "script", "style"]);
+var MCP_ID_ATTR = "data-v-mcp-id";
+function createElementInstrumentationController(options) {
+  return {
+    transform(code, id, ssr) {
+      if (ssr || shouldSkipInstrumentation(id)) {
+        return void 0;
+      }
+      const filename = id.split("?", 1)[0];
+      if (!filename.endsWith(VUE_FILE_SUFFIX)) {
+        return void 0;
+      }
+      const parsed = (0, import_compiler_sfc.parse)(code, { filename });
+      const template = parsed.descriptor.template;
+      if (!template?.ast) {
+        return void 0;
+      }
+      const s = new import_magic_string.default(code);
+      const relativeFile = normalizePath2((0, import_node_path4.relative)(options.root, filename));
+      for (const node of template.ast.children) {
+        injectNodeId(s, node, relativeFile);
+      }
+      if (!s.hasChanged()) {
+        return void 0;
+      }
+      return {
+        code: s.toString(),
+        map: s.generateMap({ hires: true })
+      };
+    }
+  };
+}
+function shouldSkipInstrumentation(id) {
+  if (id.startsWith("\0")) {
+    return true;
+  }
+  const normalized = normalizePath2(id);
+  if (normalized.includes("/node_modules/")) {
+    return true;
+  }
+  return !normalized.startsWith("/") && !/^[A-Za-z]:\//.test(normalized);
+}
+function normalizePath2(path8) {
+  return path8.replace(/\\/g, "/");
+}
+function injectNodeId(s, node, relativeFile) {
+  if (node.type !== ELEMENT_NODE_TYPE || !node.tag || !node.loc) {
+    return;
+  }
+  if (!SKIPPED_TAGS.has(node.tag) && !hasMcpIdAttr(node)) {
+    const id = `${relativeFile}:${String(node.loc.start.line)}:${String(node.loc.start.column)}`;
+    const insertAt = node.loc.start.offset + node.tag.length + 1;
+    s.appendLeft(insertAt, ` ${MCP_ID_ATTR}="${id}"`);
+  }
+  for (const child of node.children ?? []) {
+    injectNodeId(s, child, relativeFile);
+  }
+}
+function hasMcpIdAttr(node) {
+  return (node.props ?? []).some((prop) => {
+    if (!isTemplateProp(prop)) {
+      return false;
+    }
+    return prop.name === MCP_ID_ATTR;
+  });
+}
+function isTemplateProp(value) {
+  return Boolean(value && typeof value === "object" && "name" in value);
+}
+
 // src/plugin/injectRuntime.ts
 var import_node_module = require("module");
-var import_node_path4 = require("path");
+var import_node_path5 = require("path");
 function createRuntimeInjectionController(options, getConfig) {
   return {
     resolveId(importee) {
@@ -2361,7 +3049,7 @@ function createRuntimeInjectionController(options, getConfig) {
     },
     load(id) {
       if (id === RESOLVED_VIRTUAL_RUNTIME_ID) {
-        return createRuntimeModule();
+        return createRuntimeModule(options, getConfig()?.root);
       }
       if (id === RESOLVED_VIRTUAL_SCREENSHOT_CONFIG_ID) {
         return createScreenshotConfigModule(options);
@@ -2404,14 +3092,17 @@ ${code}`;
     }
   };
 }
-function createRuntimeModule() {
+function createRuntimeModule(options, root) {
   return [
     "import { setScreenshotModuleRegistry, setSnapdomLoader, startRuntimeClient } from '@xiaou66/vite-plugin-vue-mcp-next/runtime/client';",
     `import { screenshotModuleRegistry } from '${VIRTUAL_SCREENSHOT_CONFIG_ID}';`,
     `import { loadSnapdom } from '${VIRTUAL_SNAPDOM_LOADER_ID}';`,
     "setScreenshotModuleRegistry(screenshotModuleRegistry);",
     "setSnapdomLoader(loadSnapdom);",
-    "void startRuntimeClient();"
+    `void startRuntimeClient(${JSON.stringify({
+      elementPicker: options.elementPicker,
+      projectRoot: root
+    })});`
   ].join("\n");
 }
 function createSnapdomLoaderModule(root) {
@@ -2428,7 +3119,7 @@ function createSnapdomLoaderModule(root) {
 }
 function canResolveSnapdomFromProject(root) {
   try {
-    (0, import_node_module.createRequire)((0, import_node_path4.join)(root ?? process.cwd(), "package.json")).resolve(
+    (0, import_node_module.createRequire)((0, import_node_path5.join)(root ?? process.cwd(), "package.json")).resolve(
       "@zumer/snapdom"
     );
     return true;
@@ -2468,16 +3159,16 @@ function getPluginPath(plugin) {
 
 // src/plugin/mcpClientConfig/index.ts
 var import_promises5 = __toESM(require("fs/promises"), 1);
-var import_node_path7 = __toESM(require("path"), 1);
+var import_node_path8 = __toESM(require("path"), 1);
 
 // src/plugin/mcpClientConfig/codexConfig.ts
 var import_promises3 = __toESM(require("fs/promises"), 1);
-var import_node_path5 = __toESM(require("path"), 1);
+var import_node_path6 = __toESM(require("path"), 1);
 async function updateCodexMcpClientConfig(options) {
   try {
     const current = await readOptionalTextFile(options.configPath);
     const next = replaceOrAppendOwnedBlock(current, options);
-    await import_promises3.default.mkdir(import_node_path5.default.dirname(options.configPath), { recursive: true });
+    await import_promises3.default.mkdir(import_node_path6.default.dirname(options.configPath), { recursive: true });
     await import_promises3.default.writeFile(options.configPath, next);
   } catch (error) {
     console.warn(
@@ -2577,7 +3268,7 @@ function isNodeError(error) {
 
 // src/plugin/mcpClientConfig/jsonConfig.ts
 var import_promises4 = __toESM(require("fs/promises"), 1);
-var import_node_path6 = __toESM(require("path"), 1);
+var import_node_path7 = __toESM(require("path"), 1);
 async function updateJsonMcpClientConfig(options) {
   try {
     const config = await readJsonConfig(options.configPath);
@@ -2617,7 +3308,7 @@ function renameLegacyServer(mcpServers, options) {
   );
 }
 async function writeJsonConfig(configPath, config) {
-  await import_promises4.default.mkdir(import_node_path6.default.dirname(configPath), { recursive: true });
+  await import_promises4.default.mkdir(import_node_path7.default.dirname(configPath), { recursive: true });
   await import_promises4.default.writeFile(configPath, `${JSON.stringify(config, null, 2)}
 `);
 }
@@ -2662,12 +3353,12 @@ async function updateMcpClientConfigs(root, sseUrl, streamableHttpUrl, options,
       root,
       clientName: "cursor",
       enabled: options.cursor,
-      entryPath: import_node_path7.default.join(root, ".cursor"),
+      entryPath: import_node_path8.default.join(root, ".cursor"),
       entryKind: "directory",
       userOptions,
       createJob: () => updateJsonMcpClientConfig({
         clientName: "Cursor",
-        configPath: import_node_path7.default.join(root, ".cursor", "mcp.json"),
+        configPath: import_node_path8.default.join(root, ".cursor", "mcp.json"),
         mcpUrl: sseUrl,
         serverName,
         legacyServerNames
@@ -2677,11 +3368,11 @@ async function updateMcpClientConfigs(root, sseUrl, streamableHttpUrl, options,
       root,
       clientName: "codex",
       enabled: options.codex,
-      entryPath: import_node_path7.default.join(root, ".codex"),
+      entryPath: import_node_path8.default.join(root, ".codex"),
       entryKind: "directory",
       userOptions,
       createJob: () => updateCodexMcpClientConfig({
-        configPath: import_node_path7.default.join(root, ".codex", "config.toml"),
+        configPath: import_node_path8.default.join(root, ".codex", "config.toml"),
         mcpUrl: streamableHttpUrl,
         serverName,
         legacyServerNames
@@ -2691,12 +3382,12 @@ async function updateMcpClientConfigs(root, sseUrl, streamableHttpUrl, options,
       root,
       clientName: "claudeCode",
       enabled: options.claudeCode,
-      entryPath: import_node_path7.default.join(root, ".mcp.json"),
+      entryPath: import_node_path8.default.join(root, ".mcp.json"),
       entryKind: "file",
       userOptions,
       createJob: () => updateJsonMcpClientConfig({
         clientName: "Claude Code",
-        configPath: import_node_path7.default.join(root, ".mcp.json"),
+        configPath: import_node_path8.default.join(root, ".mcp.json"),
         mcpUrl: sseUrl,
         serverName,
         legacyServerNames
@@ -2706,12 +3397,12 @@ async function updateMcpClientConfigs(root, sseUrl, streamableHttpUrl, options,
       root,
       clientName: "trae",
       enabled: options.trae,
-      entryPath: import_node_path7.default.join(root, ".trae"),
+      entryPath: import_node_path8.default.join(root, ".trae"),
       entryKind: "directory",
       userOptions,
       createJob: () => updateJsonMcpClientConfig({
         clientName: "Trae",
-        configPath: import_node_path7.default.join(root, ".trae", "mcp.json"),
+        configPath: import_node_path8.default.join(root, ".trae", "mcp.json"),
         mcpUrl: sseUrl,
         serverName,
         legacyServerNames
@@ -2771,11 +3462,11 @@ function isNodeError3(error) {
 
 // src/plugin/skillConfig/index.ts
 var import_promises7 = __toESM(require("fs/promises"), 1);
-var import_node_path9 = __toESM(require("path"), 1);
+var import_node_path10 = __toESM(require("path"), 1);
 
 // src/plugin/skillConfig/writers.ts
 var import_promises6 = __toESM(require("fs/promises"), 1);
-var import_node_path8 = __toESM(require("path"), 1);
+var import_node_path9 = __toESM(require("path"), 1);
 var GENERATED_SKILL_CONFIG_MARKER = "<!-- Generated by vite-plugin-vue-mcp-next. Safe to edit, but automatic updates only apply while this marker remains. -->";
 async function writeGeneratedTextFile(options) {
   try {
@@ -2786,7 +3477,7 @@ async function writeGeneratedTextFile(options) {
       );
       return;
     }
-    await import_promises6.default.mkdir(import_node_path8.default.dirname(options.filePath), { recursive: true });
+    await import_promises6.default.mkdir(import_node_path9.default.dirname(options.filePath), { recursive: true });
     await import_promises6.default.writeFile(options.filePath, options.content);
   } catch (error) {
     console.warn(
@@ -2813,7 +3504,7 @@ function isNodeError4(error) {
 
 // src/plugin/skillConfig/index.ts
 var PACKAGE_NAME = "@xiaou66/vite-plugin-vue-mcp-next";
-var PACKAGED_SKILL_PATH = import_node_path9.default.join("skills", "vite-mcp-next", "SKILL.md");
+var PACKAGED_SKILL_PATH = import_node_path10.default.join("skills", "vite-mcp-next", "SKILL.md");
 async function updateSkillConfigs(root, options) {
   if (!options.autoConfig) {
     return;
@@ -2829,13 +3520,13 @@ async function updateSkillConfigs(root, options) {
 function createSkillConfigDescriptors(root) {
   return [
     {
-      entryPath: import_node_path9.default.join(root, ".codex"),
-      filePath: import_node_path9.default.join(root, ".codex", "skills", "vite-mcp-next", "SKILL.md"),
+      entryPath: import_node_path10.default.join(root, ".codex"),
+      filePath: import_node_path10.default.join(root, ".codex", "skills", "vite-mcp-next", "SKILL.md"),
       targetName: "Codex skill"
     },
     {
-      entryPath: import_node_path9.default.join(root, ".claude"),
-      filePath: import_node_path9.default.join(
+      entryPath: import_node_path10.default.join(root, ".claude"),
+      filePath: import_node_path10.default.join(
         root,
         ".claude",
         "skills",
@@ -2845,8 +3536,8 @@ function createSkillConfigDescriptors(root) {
       targetName: "Claude Code skill"
     },
     {
-      entryPath: import_node_path9.default.join(root, ".cursor"),
-      filePath: import_node_path9.default.join(root, ".cursor", "rules", "vite-mcp-next.mdc"),
+      entryPath: import_node_path10.default.join(root, ".cursor"),
+      filePath: import_node_path10.default.join(root, ".cursor", "rules", "vite-mcp-next.mdc"),
       targetName: "Cursor rule"
     }
   ];
@@ -2894,9 +3585,9 @@ async function safelyReadPackagedSkillContent(root) {
 }
 function getPackagedSkillCandidates(root) {
   return [
-    import_node_path9.default.resolve(root, "node_modules", PACKAGE_NAME, PACKAGED_SKILL_PATH),
-    import_node_path9.default.resolve(process.cwd(), "node_modules", PACKAGE_NAME, PACKAGED_SKILL_PATH),
-    import_node_path9.default.resolve(process.cwd(), PACKAGED_SKILL_PATH)
+    import_node_path10.default.resolve(root, "node_modules", PACKAGE_NAME, PACKAGED_SKILL_PATH),
+    import_node_path10.default.resolve(process.cwd(), "node_modules", PACKAGE_NAME, PACKAGED_SKILL_PATH),
+    import_node_path10.default.resolve(process.cwd(), PACKAGED_SKILL_PATH)
   ];
 }
 async function hasDirectoryEntry(entryPath) {
@@ -2930,6 +3621,7 @@ function vueMcpNext(userOptions = {}) {
     options,
     () => config
   );
+  let elementInstrumentation;
   const cdpLifecycle = createCdpLifecycleController(ctx);
   ctx.cdpLifecycle = cdpLifecycle;
   return {
@@ -2938,6 +3630,9 @@ function vueMcpNext(userOptions = {}) {
     apply: "serve",
     configResolved(resolvedConfig) {
       config = resolvedConfig;
+      elementInstrumentation = createElementInstrumentationController({
+        root: resolvedConfig.root
+      });
     },
     async configureServer(server) {
       ctx.server = server;
@@ -3041,7 +3736,21 @@ function vueMcpNext(userOptions = {}) {
       return runtimeInjection.load(id);
     },
     transform(code, id, transformOptions) {
-      return runtimeInjection.transform(code, id, transformOptions?.ssr);
+      const instrumented = elementInstrumentation?.transform(
+        code,
+        id,
+        transformOptions?.ssr
+      );
+      const nextCode = instrumented && typeof instrumented === "object" && "code" in instrumented && typeof instrumented.code === "string" ? instrumented.code : code;
+      const runtimeInjected = runtimeInjection.transform(
+        nextCode,
+        id,
+        transformOptions?.ssr
+      );
+      if (runtimeInjected) {
+        return runtimeInjected;
+      }
+      return instrumented;
     },
     transformIndexHtml(html) {
       return runtimeInjection.transformIndexHtml(html);