@xiaou66/vite-plugin-vue-mcp-next 1.1.1 → 1.3.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",
@@ -46,7 +51,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}`;
@@ -62,6 +68,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",
@@ -80,6 +87,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: {
@@ -154,6 +171,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,
@@ -574,9 +599,164 @@ function registerDomTools(server, ctx) {
   );
 }
 
-// src/mcp/tools/evaluate.ts
+// src/mcp/tools/elementContext.ts
 import { z as z3 } from "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: z3.string(),
+        pageId: z3.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
+import { z as z4 } from "zod";
+
 // src/cdp/cdpEvaluate.ts
 async function cdpEvaluate(options) {
   const result = await options.client.Runtime.evaluate({
@@ -597,9 +777,9 @@ function registerEvaluateTools(server, ctx) {
     {
       description: "Evaluate a script in the selected page when explicitly enabled.",
       inputSchema: {
-        pageId: z3.string().optional(),
-        expression: z3.string(),
-        awaitPromise: z3.boolean().optional()
+        pageId: z4.string().optional(),
+        expression: z4.string(),
+        awaitPromise: z4.boolean().optional()
       }
     },
     async (input) => {
@@ -648,18 +828,18 @@ function assertEvaluateEnabled(options) {
 }
 
 // src/mcp/tools/network.ts
-import { z as z4 } from "zod";
+import { z as z5 } from "zod";
 function registerNetworkTools(server, ctx) {
   server.registerTool(
     MCP_TOOL_NAMES.getNetworkRequests,
     {
       description: "Get captured network request summaries.",
       inputSchema: {
-        pageId: z4.string().optional(),
-        urlContains: z4.string().optional(),
-        method: z4.string().optional(),
-        status: z4.number().optional(),
-        limit: z4.number().optional()
+        pageId: z5.string().optional(),
+        urlContains: z5.string().optional(),
+        method: z5.string().optional(),
+        status: z5.number().optional(),
+        limit: z5.number().optional()
       }
     },
     (input) => {
@@ -682,7 +862,7 @@ function registerNetworkTools(server, ctx) {
     MCP_TOOL_NAMES.getNetworkRequestDetail,
     {
       description: "Get captured network request detail by id.",
-      inputSchema: { id: z4.string() }
+      inputSchema: { id: z5.string() }
     },
     (input) => {
       if (ctx.options.network.mode === "off") {
@@ -699,7 +879,7 @@ function registerNetworkTools(server, ctx) {
     {
       description: "Clear cached network requests.",
       inputSchema: {
-        pageId: z4.string().optional()
+        pageId: z5.string().optional()
       }
     },
     () => {
@@ -710,7 +890,7 @@ function registerNetworkTools(server, ctx) {
 }
 
 // src/mcp/tools/performance.ts
-import { z as z5 } from "zod";
+import { z as z6 } from "zod";
 
 // src/performance/summary.ts
 function buildPerformanceSummary(input) {
@@ -992,10 +1172,10 @@ function registerPerformanceTools(server, ctx) {
     {
       description: "Record a performance sample for the selected page.",
       inputSchema: {
-        pageId: z5.string().optional(),
-        durationMs: z5.number().optional(),
-        includeMemory: z5.boolean().optional(),
-        includeStacks: z5.boolean().optional()
+        pageId: z6.string().optional(),
+        durationMs: z6.number().optional(),
+        includeMemory: z6.boolean().optional(),
+        includeStacks: z6.boolean().optional()
       }
     },
     async (input) => handleRecordPerformance(ctx, input)
@@ -1005,9 +1185,9 @@ function registerPerformanceTools(server, ctx) {
     {
       description: "Start a performance recording session.",
       inputSchema: {
-        pageId: z5.string().optional(),
-        includeMemory: z5.boolean().optional(),
-        includeStacks: z5.boolean().optional()
+        pageId: z6.string().optional(),
+        includeMemory: z6.boolean().optional(),
+        includeStacks: z6.boolean().optional()
       }
     },
     async (input) => handleStartPerformanceRecording(ctx, input)
@@ -1017,7 +1197,7 @@ function registerPerformanceTools(server, ctx) {
     {
       description: "Stop a performance recording session.",
       inputSchema: {
-        recordingId: z5.string()
+        recordingId: z6.string()
       }
     },
     async (input) => handleStopPerformanceRecording(ctx, input)
@@ -1027,9 +1207,9 @@ function registerPerformanceTools(server, ctx) {
     {
       description: "Get cached performance reports and active sessions.",
       inputSchema: {
-        pageId: z5.string().optional(),
-        recordingId: z5.string().optional(),
-        limit: z5.number().optional()
+        pageId: z6.string().optional(),
+        recordingId: z6.string().optional(),
+        limit: z6.number().optional()
       }
     },
     (input) => handleGetPerformanceReport(ctx, input)
@@ -1039,7 +1219,7 @@ function registerPerformanceTools(server, ctx) {
     {
       description: "Take a heap snapshot with CDP.",
       inputSchema: {
-        pageId: z5.string().optional()
+        pageId: z6.string().optional()
       }
     },
     async (input) => handleTakeHeapSnapshot(ctx, input)
@@ -1296,7 +1476,7 @@ function toStructuredRecord(value) {
 }
 
 // src/mcp/tools/pages.ts
-import { z as z6 } from "zod";
+import { z as z7 } from "zod";
 
 // src/plugin/entryDiscovery.ts
 import fs from "fs";
@@ -1321,10 +1501,10 @@ function walkHtmlEntries(root, dir, entries) {
     if (!item.isFile() || !item.name.endsWith(".html")) {
       continue;
     }
-    const relative2 = normalizePath(path.relative(root, fullPath));
+    const relative3 = normalizePath(path.relative(root, fullPath));
     entries.push({
-      file: relative2,
-      pathname: relative2 === "index.html" ? "/" : `/${relative2}`
+      file: relative3,
+      pathname: relative3 === "index.html" ? "/" : `/${relative3}`
     });
   }
 }
@@ -1336,7 +1516,7 @@ function registerPageTools(server, ctx, vite) {
     {
       description: "List Vite page entries and connected runtime/CDP targets.",
       inputSchema: {
-        includeDisconnected: z6.boolean().optional()
+        includeDisconnected: z7.boolean().optional()
       }
     },
     async (input) => {
@@ -1359,8 +1539,8 @@ function registerPageTools(server, ctx, vite) {
     {
       description: "Reload the selected page. CDP uses ignoreCache; Runtime Hook falls back to normal reload.",
       inputSchema: {
-        pageId: z6.string().optional(),
-        ignoreCache: z6.boolean().optional()
+        pageId: z7.string().optional(),
+        ignoreCache: z7.boolean().optional()
       }
     },
     async (input) => {
@@ -1511,8 +1691,430 @@ function getPathname(url) {
   }
 }
 
+// src/mcp/tools/storage.ts
+import { z as z8 } 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: z8.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: z8.string().optional(),
+    scope: z8.enum(["localStorage", "sessionStorage", "indexedDB", "cookie"]).optional(),
+    key: z8.string().optional(),
+    value: z8.string().optional(),
+    databaseName: z8.string().optional(),
+    objectStoreName: z8.string().optional(),
+    indexName: z8.string().optional(),
+    cookie: z8.object({
+      name: z8.string(),
+      value: z8.string().optional(),
+      domain: z8.string().optional(),
+      path: z8.string().optional(),
+      url: z8.string().optional(),
+      httpOnly: z8.boolean().optional(),
+      secure: z8.boolean().optional(),
+      sameSite: z8.enum(["strict", "lax", "none"]).optional(),
+      expires: z8.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 z7 } from "zod";
+import { z as z9 } from "zod";
 
 // src/cdp/cdpScreenshot.ts
 async function cdpCaptureScreenshot(options) {
@@ -1672,14 +2274,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: z9.string().optional(),
+  target: z9.enum(["viewport", "fullPage", "element"]).optional(),
+  selector: z9.string().optional(),
+  format: z9.enum(["png", "jpeg", "webp"]).optional(),
+  prefer: z9.enum(["auto", "cdp", "runtime"]).optional(),
+  quality: z9.number().optional(),
+  scale: z9.number().optional(),
+  snapdom: z9.record(z9.string(), z9.unknown()).optional()
 };
 function registerScreenshotTools(server, ctx) {
   server.registerTool(
@@ -1799,7 +2401,7 @@ function isScreenshotImagePayload(result) {
 
 // src/mcp/tools/vue.ts
 import { nanoid as nanoid3 } from "nanoid";
-import { z as z8 } from "zod";
+import { z as z10 } from "zod";
 function registerVueTools(server, ctx) {
   server.registerTool(
     MCP_TOOL_NAMES.getComponentTree,
@@ -1812,7 +2414,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.getComponentState,
     {
       description: "Get Vue component state.",
-      inputSchema: { componentName: z8.string() }
+      inputSchema: { componentName: z10.string() }
     },
     async ({ componentName }) => requestVueData(ctx, (event) => {
       void ctx.rpcServer?.getInspectorState({ event, componentName });
@@ -1823,10 +2425,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: z10.string(),
+        path: z10.array(z10.string()),
+        value: z10.string(),
+        valueType: z10.enum(["string", "number", "boolean", "object", "array"])
       }
     },
     ({ componentName, path: path8, value, valueType }) => {
@@ -1846,7 +2448,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.highlightComponent,
     {
       description: "Highlight a Vue component.",
-      inputSchema: { componentName: z8.string() }
+      inputSchema: { componentName: z10.string() }
     },
     ({ componentName }) => {
       if (!ctx.rpcServer) {
@@ -1874,7 +2476,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.getPiniaState,
     {
       description: "Get Pinia store state.",
-      inputSchema: { storeName: z8.string() }
+      inputSchema: { storeName: z10.string() }
     },
     async ({ storeName }) => requestVueData(ctx, (event) => {
       void ctx.rpcServer?.getPiniaState({ event, storeName });
@@ -1917,10 +2519,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;
@@ -1997,6 +2601,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);
@@ -2009,6 +2617,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);
@@ -2305,6 +2917,82 @@ async function startCdpObservers(ctx, target, client) {
   }
 }
 
+// src/plugin/elementInstrumentation.ts
+import { parse } from "@vue/compiler-sfc";
+import MagicString from "magic-string";
+import { relative as relative2 } from "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 = parse(code, { filename });
+      const template = parsed.descriptor.template;
+      if (!template?.ast) {
+        return void 0;
+      }
+      const s = new MagicString(code);
+      const relativeFile = normalizePath2(relative2(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
 import { createRequire } from "module";
 import { join } from "path";
@@ -2324,7 +3012,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);
@@ -2367,14 +3055,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) {
@@ -2893,6 +3584,7 @@ function vueMcpNext(userOptions = {}) {
     options,
     () => config
   );
+  let elementInstrumentation;
   const cdpLifecycle = createCdpLifecycleController(ctx);
   ctx.cdpLifecycle = cdpLifecycle;
   return {
@@ -2901,6 +3593,9 @@ function vueMcpNext(userOptions = {}) {
     apply: "serve",
     configResolved(resolvedConfig) {
       config = resolvedConfig;
+      elementInstrumentation = createElementInstrumentationController({
+        root: resolvedConfig.root
+      });
     },
     async configureServer(server) {
       ctx.server = server;
@@ -3004,7 +3699,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);