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

package/dist/index.cjs

@@ -88,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 +100,12 @@ 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_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) => {
@@ -1549,7 +1729,7 @@ function getPathname(url) {
 }
 
 // src/mcp/tools/storage.ts
-var import_zod7 = require("zod");
+var import_zod8 = require("zod");
 
 // src/cdp/cdpStorage.ts
 function createCdpStorageAdapter(client) {
@@ -1793,7 +1973,7 @@ function registerStorageTools(server, ctx) {
   registerStorageTool(server, MCP_TOOL_NAMES.listStorage, {
     description: "List same-origin storage and CDP cookies when available.",
     inputSchema: {
-      pageId: import_zod7.z.string().optional()
+      pageId: import_zod8.z.string().optional()
     },
     action: "list",
     handler: (input) => handleListStorage(ctx, input.pageId)
@@ -1837,23 +2017,23 @@ function registerStorageTool(server, name, options) {
 }
 function createStorageInputSchema() {
   return {
-    pageId: import_zod7.z.string().optional(),
-    scope: import_zod7.z.enum(["localStorage", "sessionStorage", "indexedDB", "cookie"]).optional(),
-    key: import_zod7.z.string().optional(),
-    value: import_zod7.z.string().optional(),
-    databaseName: import_zod7.z.string().optional(),
-    objectStoreName: import_zod7.z.string().optional(),
-    indexName: import_zod7.z.string().optional(),
-    cookie: import_zod7.z.object({
-      name: import_zod7.z.string(),
-      value: import_zod7.z.string().optional(),
-      domain: import_zod7.z.string().optional(),
-      path: import_zod7.z.string().optional(),
-      url: import_zod7.z.string().optional(),
-      httpOnly: import_zod7.z.boolean().optional(),
-      secure: import_zod7.z.boolean().optional(),
-      sameSite: import_zod7.z.enum(["strict", "lax", "none"]).optional(),
-      expires: import_zod7.z.number().optional()
+    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()
   };
 }
@@ -1971,7 +2151,7 @@ function hasCdpConfig2(ctx) {
 }
 
 // src/mcp/tools/screenshot.ts
-var import_zod8 = require("zod");
+var import_zod9 = require("zod");
 
 // src/cdp/cdpScreenshot.ts
 async function cdpCaptureScreenshot(options) {
@@ -2131,14 +2311,14 @@ function createProjectRelativePath(ctx, filePath) {
 var DEFAULT_SCREENSHOT_TARGET = "viewport";
 var DEFAULT_SCREENSHOT_FORMAT = "png";
 var screenshotInputSchema = {
-  pageId: import_zod8.z.string().optional(),
-  target: import_zod8.z.enum(["viewport", "fullPage", "element"]).optional(),
-  selector: import_zod8.z.string().optional(),
-  format: import_zod8.z.enum(["png", "jpeg", "webp"]).optional(),
-  prefer: import_zod8.z.enum(["auto", "cdp", "runtime"]).optional(),
-  quality: import_zod8.z.number().optional(),
-  scale: import_zod8.z.number().optional(),
-  snapdom: import_zod8.z.record(import_zod8.z.string(), import_zod8.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(
@@ -2258,7 +2438,7 @@ function isScreenshotImagePayload(result) {
 
 // src/mcp/tools/vue.ts
 var import_nanoid3 = require("nanoid");
-var import_zod9 = require("zod");
+var import_zod10 = require("zod");
 function registerVueTools(server, ctx) {
   server.registerTool(
     MCP_TOOL_NAMES.getComponentTree,
@@ -2271,7 +2451,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.getComponentState,
     {
       description: "Get Vue component state.",
-      inputSchema: { componentName: import_zod9.z.string() }
+      inputSchema: { componentName: import_zod10.z.string() }
     },
     async ({ componentName }) => requestVueData(ctx, (event) => {
       void ctx.rpcServer?.getInspectorState({ event, componentName });
@@ -2282,10 +2462,10 @@ function registerVueTools(server, ctx) {
     {
       description: "Edit Vue component state.",
       inputSchema: {
-        componentName: import_zod9.z.string(),
-        path: import_zod9.z.array(import_zod9.z.string()),
-        value: import_zod9.z.string(),
-        valueType: import_zod9.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 }) => {
@@ -2305,7 +2485,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.highlightComponent,
     {
       description: "Highlight a Vue component.",
-      inputSchema: { componentName: import_zod9.z.string() }
+      inputSchema: { componentName: import_zod10.z.string() }
     },
     ({ componentName }) => {
       if (!ctx.rpcServer) {
@@ -2333,7 +2513,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.getPiniaState,
     {
       description: "Get Pinia store state.",
-      inputSchema: { storeName: import_zod9.z.string() }
+      inputSchema: { storeName: import_zod10.z.string() }
     },
     async ({ storeName }) => requestVueData(ctx, (event) => {
       void ctx.rpcServer?.getPiniaState({ event, storeName });
@@ -2376,6 +2556,7 @@ function createMcpServer(ctx, vite) {
   });
   registerPageTools(server, ctx, vite);
   registerDomTools(server, ctx);
+  registerElementContextTools(server, ctx);
   registerScreenshotTools(server, ctx);
   registerConsoleTools(server, ctx);
   registerEvaluateTools(server, ctx);
@@ -2457,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);
@@ -2769,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) {
@@ -2788,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);
@@ -2831,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) {
@@ -2855,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;
@@ -2895,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(
@@ -3004,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);
@@ -3044,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)}
 `);
 }
@@ -3089,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
@@ -3104,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
@@ -3118,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
@@ -3133,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
@@ -3198,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 {
@@ -3213,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(
@@ -3240,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;
@@ -3256,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",
@@ -3272,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"
     }
   ];
@@ -3321,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) {
@@ -3357,6 +3621,7 @@ function vueMcpNext(userOptions = {}) {
     options,
     () => config
   );
+  let elementInstrumentation;
   const cdpLifecycle = createCdpLifecycleController(ctx);
   ctx.cdpLifecycle = cdpLifecycle;
   return {
@@ -3365,6 +3630,9 @@ function vueMcpNext(userOptions = {}) {
     apply: "serve",
     configResolved(resolvedConfig) {
       config = resolvedConfig;
+      elementInstrumentation = createElementInstrumentationController({
+        root: resolvedConfig.root
+      });
     },
     async configureServer(server) {
       ctx.server = server;
@@ -3381,32 +3649,53 @@ function vueMcpNext(userOptions = {}) {
         () => createMcpServer(ctx, server),
         server
       );
-      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);
+      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;
           }
-        }
-      );
-      server.ws.on(
-        "vite-plugin-vue-mcp-next:console-record",
-        (payload) => {
-          if (isConsoleRecord(payload)) {
-            ctx.consoleRecords.push(payload);
+          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:network-record",
-        (payload) => {
-          if (isNetworkRecord(payload)) {
-            ctx.networkRecords.push(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(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:performance-record",
         (payload) => {
@@ -3436,6 +3725,7 @@ function vueMcpNext(userOptions = {}) {
         }, 300);
       }
       server.httpServer?.once("close", () => {
+        clearInterval(heartbeatTimer);
         void cdpLifecycle.closeAll();
       });
     },
@@ -3446,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);
@@ -3460,6 +3764,20 @@ 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;