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

package/dist/runtime/client.js

@@ -1,6 +1,116 @@
 // src/runtime/client.ts
 import { createHotContext } from "vite-hot-client";
 
+// src/shared/limits.ts
+var DEFAULT_DOM_MAX_DEPTH = 8;
+var DEFAULT_DOM_MAX_NODES = 2e3;
+var DEFAULT_DOM_MAX_TEXT_LENGTH = 300;
+var DEFAULT_CONSOLE_MAX_RECORDS = 1e3;
+var DEFAULT_NETWORK_MAX_RECORDS = 500;
+var DEFAULT_NETWORK_MAX_BODY_SIZE = 1e5;
+var DEFAULT_MASK_HEADERS = [
+  "authorization",
+  "cookie",
+  "set-cookie"
+];
+
+// src/constants.ts
+var DEFAULT_MCP_PATH = "/__mcp";
+var DEFAULT_SCREENSHOT_MAX_BYTES = 5 * 1024 * 1024;
+var DEFAULT_SCREENSHOT_SAVE_DIR = ".vite-mcp/screenshot";
+var DEFAULT_PERFORMANCE_SAVE_DIR = ".vite-mcp/performance";
+var DEFAULT_PERFORMANCE_MAX_DURATION_MS = 3e4;
+var DEFAULT_PERFORMANCE_SAMPLE_INTERVAL_MS = 250;
+var DEFAULT_PERFORMANCE_LONG_TASK_THRESHOLD_MS = 50;
+var VIRTUAL_RUNTIME_ID = "virtual:vite-plugin-vue-mcp-next/runtime";
+var RESOLVED_VIRTUAL_RUNTIME_ID = `\0${VIRTUAL_RUNTIME_ID}`;
+var VIRTUAL_SCREENSHOT_CONFIG_ID = "virtual:vite-plugin-vue-mcp-next/screenshot-config";
+var RESOLVED_VIRTUAL_SCREENSHOT_CONFIG_ID = `\0${VIRTUAL_SCREENSHOT_CONFIG_ID}`;
+var VIRTUAL_SNAPDOM_LOADER_ID = "virtual:vite-plugin-vue-mcp-next/snapdom-loader";
+var RESOLVED_VIRTUAL_SNAPDOM_LOADER_ID = `\0${VIRTUAL_SNAPDOM_LOADER_ID}`;
+var DEFAULT_MCP_CLIENT_SERVER_NAME = "vite-mcp-next";
+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_INTERVAL_MS = 15e3;
+var DEFAULT_ELEMENT_PICKER_TOAST_DURATION_MS = 2200;
+var DEFAULT_OPTIONS = {
+  mcpPath: DEFAULT_MCP_PATH,
+  host: "localhost",
+  printUrl: true,
+  updateCursorMcpJson: {
+    enabled: true,
+    serverName: DEFAULT_MCP_CLIENT_SERVER_NAME
+  },
+  mcpClients: {
+    cursor: true,
+    codex: true,
+    claudeCode: true,
+    trae: true,
+    serverName: DEFAULT_MCP_CLIENT_SERVER_NAME
+  },
+  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: {
+      enabled: false,
+      timeoutMs: 3e3
+    }
+  },
+  cdp: {},
+  network: {
+    mode: "auto",
+    maxRecords: DEFAULT_NETWORK_MAX_RECORDS,
+    captureRequestBody: true,
+    captureResponseBody: true,
+    maxBodySize: DEFAULT_NETWORK_MAX_BODY_SIZE,
+    maskHeaders: [...DEFAULT_MASK_HEADERS]
+  },
+  dom: {
+    maxDepth: DEFAULT_DOM_MAX_DEPTH,
+    maxNodes: DEFAULT_DOM_MAX_NODES,
+    maxTextLength: DEFAULT_DOM_MAX_TEXT_LENGTH
+  },
+  console: {
+    maxRecords: DEFAULT_CONSOLE_MAX_RECORDS
+  },
+  screenshot: {
+    type: "path",
+    saveDir: DEFAULT_SCREENSHOT_SAVE_DIR,
+    prefer: "auto",
+    maxBytes: DEFAULT_SCREENSHOT_MAX_BYTES,
+    snapdom: {
+      options: {},
+      plugins: []
+    }
+  },
+  performance: {
+    mode: "auto",
+    maxDurationMs: DEFAULT_PERFORMANCE_MAX_DURATION_MS,
+    sampleIntervalMs: DEFAULT_PERFORMANCE_SAMPLE_INTERVAL_MS,
+    longTaskThresholdMs: DEFAULT_PERFORMANCE_LONG_TASK_THRESHOLD_MS,
+    saveDir: DEFAULT_PERFORMANCE_SAVE_DIR,
+    memory: {
+      enabled: true
+    },
+    stacks: {
+      enabled: true
+    }
+  }
+};
+
 // src/runtime/consoleHook.ts
 import { nanoid } from "nanoid";
 
@@ -70,8 +180,227 @@ function installConsoleHook(options) {
   };
 }
 
-// src/runtime/networkHook.ts
+// src/runtime/elementRegistry.ts
 import { nanoid as nanoid2 } from "nanoid";
+var RUNTIME_ELEMENT_ID_PREFIX = "runtime:vmcp_";
+var RUNTIME_ELEMENT_ID_SIZE = 8;
+var runtimeElementRegistry = createRuntimeElementRegistry();
+function createRuntimeElementId() {
+  return `${RUNTIME_ELEMENT_ID_PREFIX}${nanoid2(RUNTIME_ELEMENT_ID_SIZE)}`;
+}
+function createRuntimeElementRegistry() {
+  const records = /* @__PURE__ */ new Map();
+  return {
+    register(element) {
+      const elementId = createRuntimeElementId();
+      records.set(elementId, {
+        elementId,
+        element,
+        createdAt: Date.now()
+      });
+      return elementId;
+    },
+    get(elementId) {
+      return records.get(elementId);
+    },
+    clear() {
+      records.clear();
+    }
+  };
+}
+
+// src/runtime/elementPicker.ts
+var MCP_ID_ATTR = "data-v-mcp-id";
+var INTERNAL_ATTR = "data-v-mcp-internal";
+var SUCCESS_MESSAGE = "\u5143\u7D20\u4F4D\u7F6E\u5DF2\u590D\u5236\uFF0C\u8BF7\u53D1\u9001\u7ED9 AI";
+var COPY_FAILED_PREFIX = "\u590D\u5236\u5931\u8D25\uFF0C\u8BF7\u624B\u52A8\u590D\u5236\u5143\u7D20 ID";
+var OVERLAY_Z_INDEX = "2147483647";
+var TOAST_Z_INDEX = "2147483647";
+function installElementPicker(options) {
+  if (!options.enabled) {
+    return;
+  }
+  const registry = runtimeElementRegistry;
+  const overlay = createOverlay();
+  let active = false;
+  let currentElement;
+  window.addEventListener("keydown", (event) => {
+    active = matchesShortcut(event, options.shortcut);
+  });
+  window.addEventListener("keyup", () => {
+    active = false;
+    currentElement = void 0;
+    updateOverlay(overlay);
+  });
+  window.addEventListener("mousemove", (event) => {
+    if (!active) {
+      return;
+    }
+    currentElement = document.elementFromPoint(event.clientX, event.clientY) ?? void 0;
+    updateOverlay(overlay, currentElement);
+  });
+  window.addEventListener(
+    "click",
+    (event) => {
+      if (!active || !isElementLike(event.target)) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      void copyAndNotify(event.target, registry, options.toastDurationMs);
+    },
+    true
+  );
+}
+function matchesShortcut(event, shortcut) {
+  return event.altKey === shortcut.altKey && event.shiftKey === shortcut.shiftKey && event.metaKey === shortcut.metaKey && event.ctrlKey === shortcut.ctrlKey;
+}
+function resolveElementId(element, registry) {
+  return element.getAttribute(MCP_ID_ATTR) ?? registry.register(element);
+}
+async function copyAndNotify(element, registry, toastDurationMs) {
+  const elementId = resolveElementId(element, registry);
+  const copied = await copyElementId(elementId);
+  showToast(
+    copied ? SUCCESS_MESSAGE : `${COPY_FAILED_PREFIX}: ${elementId}`,
+    toastDurationMs
+  );
+}
+async function copyElementId(elementId) {
+  try {
+    await navigator.clipboard.writeText(elementId);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function createOverlay() {
+  const overlay = document.createElement("div");
+  markInternalElement(overlay);
+  Object.assign(overlay.style, {
+    position: "fixed",
+    pointerEvents: "none",
+    border: "2px solid #1d4ed8",
+    background: "rgba(29, 78, 216, 0.08)",
+    zIndex: OVERLAY_Z_INDEX,
+    display: "none"
+  });
+  document.body.appendChild(overlay);
+  return overlay;
+}
+function updateOverlay(overlay, element) {
+  if (!element || getElementAttr(element, INTERNAL_ATTR) === "true") {
+    overlay.style.display = "none";
+    return;
+  }
+  const rect = element.getBoundingClientRect();
+  Object.assign(overlay.style, {
+    display: "block",
+    left: `${String(rect.x)}px`,
+    top: `${String(rect.y)}px`,
+    width: `${String(rect.width)}px`,
+    height: `${String(rect.height)}px`
+  });
+}
+function showToast(message, durationMs) {
+  const toast = document.createElement("div");
+  markInternalElement(toast);
+  toast.textContent = message;
+  Object.assign(toast.style, {
+    position: "fixed",
+    left: "50%",
+    bottom: "32px",
+    transform: "translateX(-50%)",
+    zIndex: TOAST_Z_INDEX,
+    padding: "8px 12px",
+    borderRadius: "6px",
+    background: "rgba(17, 24, 39, 0.92)",
+    color: "#fff",
+    fontSize: "13px",
+    pointerEvents: "none"
+  });
+  document.body.appendChild(toast);
+  globalThis.setTimeout(() => {
+    toast.remove();
+  }, durationMs);
+}
+function isElementLike(value) {
+  return Boolean(
+    value && typeof value === "object" && "getAttribute" in value && "getBoundingClientRect" in value
+  );
+}
+function markInternalElement(element) {
+  if (typeof element.setAttribute === "function") {
+    element.setAttribute(INTERNAL_ATTR, "true");
+  }
+  element.dataset.vMcpInternal = "true";
+}
+function getElementAttr(element, name) {
+  if (typeof element.getAttribute === "function") {
+    return element.getAttribute(name);
+  }
+  return null;
+}
+
+// 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/shared/sanitize.ts
 function truncateText(text, maxLength) {
@@ -96,6 +425,270 @@ function maskHeaders(headers = {}, maskNames = []) {
   );
 }
 
+// src/runtime/domSnapshot.ts
+function createDomSnapshot(root, options) {
+  let count = 0;
+  function visit(node, depth) {
+    if (count >= options.maxNodes || depth > options.maxDepth) {
+      return null;
+    }
+    if (node.nodeType === Node.TEXT_NODE) {
+      return createTextSnapshot(node, options, () => {
+        count += 1;
+      });
+    }
+    if (!(node instanceof Element)) {
+      return null;
+    }
+    const tag = node.tagName.toLowerCase();
+    if (["script", "style", "noscript"].includes(tag) || isInternalMcpElement(node)) {
+      return null;
+    }
+    count += 1;
+    return createElementSnapshot(node, tag, (child) => visit(child, depth + 1));
+  }
+  return visit(root, 0) ?? { tag: root.tagName.toLowerCase() };
+}
+function queryDomElements(selector, limit) {
+  return Array.from(document.querySelectorAll(selector)).filter((element) => !isInternalMcpElement(element)).slice(0, limit).map((element) => createDomElementSummary(element));
+}
+function createDomElementSummary(element) {
+  return {
+    tag: element.tagName.toLowerCase(),
+    text: element.textContent.trim(),
+    attrs: collectAttrs(element),
+    rect: serializeRect(element.getBoundingClientRect())
+  };
+}
+function createTextSnapshot(node, options, markVisited) {
+  const text = node.textContent?.trim();
+  if (!text) {
+    return null;
+  }
+  markVisited();
+  return { tag: "#text", text: truncateText(text, options.maxTextLength).text };
+}
+function createElementSnapshot(node, tag, visitChild) {
+  const attrs = collectAttrs(node);
+  const children = Array.from(node.childNodes).map((child) => visitChild(child)).filter((child) => Boolean(child));
+  return {
+    tag,
+    ...node.textContent.trim() ? { text: node.textContent.trim() } : {},
+    ...Object.keys(attrs).length ? { attrs } : {},
+    ...children.length ? { children } : {}
+  };
+}
+function collectAttrs(element) {
+  const attrs = {};
+  for (const attr of Array.from(element.attributes)) {
+    attrs[attr.name] = attr.value;
+  }
+  if (typeof HTMLInputElement !== "undefined" && element instanceof HTMLInputElement && element.type === "password") {
+    attrs.value = "[masked]";
+  }
+  return attrs;
+}
+function serializeRect(rect) {
+  return {
+    x: rect.x,
+    y: rect.y,
+    width: rect.width,
+    height: rect.height,
+    top: rect.top,
+    right: rect.right,
+    bottom: rect.bottom,
+    left: rect.left
+  };
+}
+function isInternalMcpElement(element) {
+  return element.getAttribute("data-v-mcp-internal") === "true";
+}
+
+// src/runtime/vueComponentLocator.ts
+function locateVueComponentForElement(element, root) {
+  const component = findNearestComponent(element);
+  if (!component) {
+    return void 0;
+  }
+  const file = getComponentFile(component);
+  const name = getComponentName(component);
+  if (!file) {
+    return { name };
+  }
+  const packageLocation = parseNodeModulesFile(file);
+  if (packageLocation) {
+    return {
+      name,
+      source: void 0,
+      packageLocation
+    };
+  }
+  return {
+    name,
+    source: {
+      file: createProjectRelativePath(root, file)
+    },
+    packageLocation: void 0
+  };
+}
+function findNearestComponent(element) {
+  let current = element;
+  while (current) {
+    const component = current.__vueParentComponent;
+    if (isVueRuntimeComponent(component)) {
+      return component;
+    }
+    current = current.parentElement;
+  }
+  return void 0;
+}
+function getComponentName(component) {
+  return component.type?.name ?? component.type?.__name ?? component.type?.displayName;
+}
+function getComponentFile(component) {
+  return component.type?.__file;
+}
+function parseNodeModulesFile(file) {
+  const normalized = normalizePath(file);
+  const marker = "/node_modules/";
+  const index = normalized.lastIndexOf(marker);
+  if (index < 0) {
+    return void 0;
+  }
+  const parts = normalized.slice(index + marker.length).split("/").filter(Boolean);
+  const scoped = parts[0]?.startsWith("@");
+  const packageName = scoped ? parts.slice(0, 2).join("/") : parts[0];
+  const entryFile = parts.slice(scoped ? 2 : 1).join("/");
+  if (!packageName || !entryFile) {
+    return void 0;
+  }
+  return {
+    packageName,
+    entryFile
+  };
+}
+function normalizePath(path) {
+  return path.replace(/\\/g, "/");
+}
+function createProjectRelativePath(root, file) {
+  const normalizedRoot = normalizePath(root).replace(/\/$/, "");
+  const normalizedFile = normalizePath(file);
+  const prefix = `${normalizedRoot}/`;
+  if (normalizedFile.startsWith(prefix)) {
+    return normalizedFile.slice(prefix.length);
+  }
+  return normalizedFile.replace(/^\//, "");
+}
+function isVueRuntimeComponent(value) {
+  return Boolean(value && typeof value === "object" && "type" in value);
+}
+
+// src/runtime/elementContext.ts
+var activeResolver;
+function createElementContextResolver(options) {
+  return {
+    getElementContext(elementId) {
+      const parsed = parseElementId(elementId);
+      if (parsed.kind === "project-source") {
+        const element = options.querySelector(
+          `[data-v-mcp-id="${escapeSelector(elementId)}"]`
+        );
+        return createProjectSourceContext(parsed, element, options.root);
+      }
+      if (parsed.kind === "package") {
+        return createPackageContext(parsed);
+      }
+      if (parsed.kind === "runtime") {
+        const record = options.registry.get(elementId);
+        if (!record) {
+          return createMissingRuntimeElementError(elementId);
+        }
+        return createRuntimeContext(elementId, record.element, options.root);
+      }
+      return {
+        ok: false,
+        error: parsed.reason,
+        elementId,
+        limitations: ["please provide a copied elementId from the element picker"]
+      };
+    }
+  };
+}
+function setElementContextResolver(resolver) {
+  activeResolver = resolver;
+}
+function getElementContextResolver() {
+  activeResolver ??= createElementContextResolver({
+    root: "/",
+    registry: runtimeElementRegistry,
+    querySelector(selector) {
+      return document.querySelector(selector);
+    }
+  });
+  return activeResolver;
+}
+function createProjectSourceContext(parsed, element, root) {
+  return {
+    ok: true,
+    elementId: parsed.elementId,
+    editable: true,
+    codeLocation: {
+      file: parsed.file,
+      line: parsed.line,
+      column: parsed.column
+    },
+    ...element ? { component: locateVueComponentForElement(element, root) } : {},
+    ...element ? { dom: createDomElementSummary(element) } : {},
+    limitations: element ? [] : ["runtime DOM element was not found"]
+  };
+}
+function createPackageContext(parsed) {
+  return {
+    ok: true,
+    elementId: parsed.elementId,
+    editable: false,
+    packageLocation: {
+      packageName: parsed.packageName,
+      entryFile: parsed.entryFile
+    },
+    limitations: ["third-party package source is not editable from this project"]
+  };
+}
+function createRuntimeContext(elementId, element, root) {
+  const component = locateVueComponentForElement(element, root);
+  const sourceFile = component?.source?.file;
+  return {
+    ok: true,
+    elementId,
+    editable: Boolean(sourceFile),
+    ...sourceFile ? { codeLocation: { file: sourceFile, line: 1, column: 1 } } : {},
+    component,
+    dom: createDomElementSummary(element),
+    limitations: sourceFile ? ["runtime id maps to nearest component file, exact template node is unavailable"] : ["runtime id is only valid during the current page lifecycle"]
+  };
+}
+function createMissingRuntimeElementError(elementId) {
+  return {
+    ok: false,
+    error: "element not found",
+    elementId,
+    limitations: [
+      "element was removed or page refreshed",
+      "please ask the user to pick the element again"
+    ]
+  };
+}
+function escapeSelector(value) {
+  const css = globalThis.CSS;
+  if (css?.escape) {
+    return css.escape(value);
+  }
+  return value.replace(/["\\]/g, "\\$&");
+}
+
+// src/runtime/networkHook.ts
+import { nanoid as nanoid3 } from "nanoid";
+
 // src/shared/url.ts
 function parseRequestQuery(url) {
   const parsed = new URL(url, "http://vite-plugin-vue-mcp-next.local");
@@ -125,7 +718,7 @@ function safeUrlPathname(url) {
 // src/runtime/networkHook.ts
 function createHookNetworkRecord(input) {
   return {
-    id: nanoid2(),
+    id: nanoid3(),
     pageId: input.pageId,
     source: "hook",
     url: input.url,
@@ -280,12 +873,12 @@ function safeReadXhrResponseText(xhr) {
 }
 
 // src/runtime/pageIdentity.ts
-import { nanoid as nanoid3 } from "nanoid";
+import { nanoid as nanoid4 } from "nanoid";
 var RUNTIME_CLIENT_ID_STORAGE_KEY = "vite-plugin-vue-mcp-next:runtime-client-id";
 var RUNTIME_CLIENT_ID_WINDOW_NAME_PREFIX = "vite-plugin-vue-mcp-next:runtime-client-id=";
 var RUNTIME_CLIENT_ID_WINDOW_NAME_SEPARATOR = "\n";
 function createRuntimeClientId() {
-  return `runtime-client-${nanoid3()}`;
+  return `runtime-client-${nanoid4()}`;
 }
 function readRuntimeClientIdFromTabScope(tabScope) {
   if (!tabScope) {
@@ -334,7 +927,7 @@ function getRuntimeClientId(storage, tabScope) {
   }
 }
 function createRuntimePageId() {
-  return `runtime-${nanoid3()}`;
+  return `runtime-${nanoid4()}`;
 }
 function getRuntimePageIdentity(input) {
   return {
@@ -354,102 +947,7 @@ function getRuntimePageIdentity(input) {
 }
 
 // src/runtime/performanceHook.ts
-import { nanoid as nanoid4 } from "nanoid";
-
-// src/shared/limits.ts
-var DEFAULT_DOM_MAX_DEPTH = 8;
-var DEFAULT_DOM_MAX_NODES = 2e3;
-var DEFAULT_DOM_MAX_TEXT_LENGTH = 300;
-var DEFAULT_CONSOLE_MAX_RECORDS = 1e3;
-var DEFAULT_NETWORK_MAX_RECORDS = 500;
-var DEFAULT_NETWORK_MAX_BODY_SIZE = 1e5;
-var DEFAULT_MASK_HEADERS = [
-  "authorization",
-  "cookie",
-  "set-cookie"
-];
-
-// src/constants.ts
-var DEFAULT_MCP_PATH = "/__mcp";
-var DEFAULT_SCREENSHOT_MAX_BYTES = 5 * 1024 * 1024;
-var DEFAULT_SCREENSHOT_SAVE_DIR = ".vite-mcp/screenshot";
-var DEFAULT_PERFORMANCE_SAVE_DIR = ".vite-mcp/performance";
-var DEFAULT_PERFORMANCE_MAX_DURATION_MS = 3e4;
-var DEFAULT_PERFORMANCE_SAMPLE_INTERVAL_MS = 250;
-var DEFAULT_PERFORMANCE_LONG_TASK_THRESHOLD_MS = 50;
-var VIRTUAL_RUNTIME_ID = "virtual:vite-plugin-vue-mcp-next/runtime";
-var RESOLVED_VIRTUAL_RUNTIME_ID = `\0${VIRTUAL_RUNTIME_ID}`;
-var VIRTUAL_SCREENSHOT_CONFIG_ID = "virtual:vite-plugin-vue-mcp-next/screenshot-config";
-var RESOLVED_VIRTUAL_SCREENSHOT_CONFIG_ID = `\0${VIRTUAL_SCREENSHOT_CONFIG_ID}`;
-var VIRTUAL_SNAPDOM_LOADER_ID = "virtual:vite-plugin-vue-mcp-next/snapdom-loader";
-var RESOLVED_VIRTUAL_SNAPDOM_LOADER_ID = `\0${VIRTUAL_SNAPDOM_LOADER_ID}`;
-var DEFAULT_MCP_CLIENT_SERVER_NAME = "vite-mcp-next";
-var DEFAULT_OPTIONS = {
-  mcpPath: DEFAULT_MCP_PATH,
-  host: "localhost",
-  printUrl: true,
-  updateCursorMcpJson: {
-    enabled: true,
-    serverName: DEFAULT_MCP_CLIENT_SERVER_NAME
-  },
-  mcpClients: {
-    cursor: true,
-    codex: true,
-    claudeCode: true,
-    trae: true,
-    serverName: DEFAULT_MCP_CLIENT_SERVER_NAME
-  },
-  skill: {
-    autoConfig: true
-  },
-  runtime: {
-    mode: "auto",
-    evaluate: {
-      enabled: false,
-      timeoutMs: 3e3
-    }
-  },
-  cdp: {},
-  network: {
-    mode: "auto",
-    maxRecords: DEFAULT_NETWORK_MAX_RECORDS,
-    captureRequestBody: true,
-    captureResponseBody: true,
-    maxBodySize: DEFAULT_NETWORK_MAX_BODY_SIZE,
-    maskHeaders: [...DEFAULT_MASK_HEADERS]
-  },
-  dom: {
-    maxDepth: DEFAULT_DOM_MAX_DEPTH,
-    maxNodes: DEFAULT_DOM_MAX_NODES,
-    maxTextLength: DEFAULT_DOM_MAX_TEXT_LENGTH
-  },
-  console: {
-    maxRecords: DEFAULT_CONSOLE_MAX_RECORDS
-  },
-  screenshot: {
-    type: "path",
-    saveDir: DEFAULT_SCREENSHOT_SAVE_DIR,
-    prefer: "auto",
-    maxBytes: DEFAULT_SCREENSHOT_MAX_BYTES,
-    snapdom: {
-      options: {},
-      plugins: []
-    }
-  },
-  performance: {
-    mode: "auto",
-    maxDurationMs: DEFAULT_PERFORMANCE_MAX_DURATION_MS,
-    sampleIntervalMs: DEFAULT_PERFORMANCE_SAMPLE_INTERVAL_MS,
-    longTaskThresholdMs: DEFAULT_PERFORMANCE_LONG_TASK_THRESHOLD_MS,
-    saveDir: DEFAULT_PERFORMANCE_SAVE_DIR,
-    memory: {
-      enabled: true
-    },
-    stacks: {
-      enabled: true
-    }
-  }
-};
+import { nanoid as nanoid5 } from "nanoid";
 
 // src/performance/summary.ts
 function buildPerformanceSummary(input) {
@@ -623,7 +1121,7 @@ function createPerformanceCollector(deps) {
   };
 }
 function createRecordingId() {
-  return `performance-${nanoid4()}`;
+  return `performance-${nanoid5()}`;
 }
 function startSession(state, deps, options) {
   const recordingId = createRecordingId();
@@ -998,78 +1496,6 @@ import {
 } from "@vue/devtools-kit";
 import { createRPCClient } from "vite-dev-rpc";
 
-// src/runtime/domSnapshot.ts
-function createDomSnapshot(root, options) {
-  let count = 0;
-  function visit(node, depth) {
-    if (count >= options.maxNodes || depth > options.maxDepth) {
-      return null;
-    }
-    if (node.nodeType === Node.TEXT_NODE) {
-      return createTextSnapshot(node, options, () => {
-        count += 1;
-      });
-    }
-    if (!(node instanceof Element)) {
-      return null;
-    }
-    const tag = node.tagName.toLowerCase();
-    if (["script", "style", "noscript"].includes(tag)) {
-      return null;
-    }
-    count += 1;
-    return createElementSnapshot(node, tag, (child) => visit(child, depth + 1));
-  }
-  return visit(root, 0) ?? { tag: root.tagName.toLowerCase() };
-}
-function queryDomElements(selector, limit) {
-  return Array.from(document.querySelectorAll(selector)).slice(0, limit).map((element) => ({
-    tag: element.tagName.toLowerCase(),
-    text: element.textContent.trim(),
-    attrs: collectAttrs(element),
-    rect: serializeRect(element.getBoundingClientRect())
-  }));
-}
-function createTextSnapshot(node, options, markVisited) {
-  const text = node.textContent?.trim();
-  if (!text) {
-    return null;
-  }
-  markVisited();
-  return { tag: "#text", text: truncateText(text, options.maxTextLength).text };
-}
-function createElementSnapshot(node, tag, visitChild) {
-  const attrs = collectAttrs(node);
-  const children = Array.from(node.childNodes).map((child) => visitChild(child)).filter((child) => Boolean(child));
-  return {
-    tag,
-    ...Object.keys(attrs).length ? { attrs } : {},
-    ...children.length ? { children } : {}
-  };
-}
-function collectAttrs(element) {
-  const attrs = {};
-  for (const attr of Array.from(element.attributes)) {
-    attrs[attr.name] = attr.value;
-  }
-  if (element instanceof HTMLInputElement && element.type === "password") {
-    attrs.value = "[masked]";
-  }
-  return attrs;
-}
-function serializeRect(rect) {
-  return {
-    x: rect.x,
-    y: rect.y,
-    width: rect.width,
-    height: rect.height,
-    top: rect.top,
-    right: rect.right,
-    bottom: rect.bottom,
-    left: rect.left
-  };
-}
-
 // src/runtime/evaluateExpression.ts
 async function evaluateExpression(request) {
   const value = runExpression(request.expression);
@@ -1497,6 +1923,22 @@ function createRuntimeDevtoolsRpc(getRpc) {
       );
     },
     onDomQueryUpdated: () => void 0,
+    getElementContext(options) {
+      try {
+        getRpc().onElementContextUpdated(
+          options.event,
+          getElementContextResolver().getElementContext(options.elementId)
+        );
+      } catch (error) {
+        getRpc().onElementContextUpdated(options.event, {
+          ok: false,
+          elementId: options.elementId,
+          error: error instanceof Error ? error.message : String(error),
+          limitations: ["runtime element context lookup failed"]
+        });
+      }
+    },
+    onElementContextUpdated: () => void 0,
     reloadPage(options) {
       getRpc().onPageReloaded(options.event, { ok: true, source: "hook" });
       setTimeout(() => {
@@ -1833,13 +2275,16 @@ function createMissingComponentError(componentName) {
 }
 
 // src/runtime/client.ts
-async function startRuntimeClient() {
+async function startRuntimeClient(runtimeOptions = {
+  elementPicker: DEFAULT_OPTIONS.elementPicker
+}) {
   initializeVueDevtoolsHook();
   const hot = await createHotContext("vite-plugin-vue-mcp-next", "/");
   if (!hot) {
     return;
   }
   installVueBridge(hot);
+  installElementPicker(runtimeOptions.elementPicker);
   const identity = getRuntimePageIdentity({
     href: window.location.href,
     title: document.title,
@@ -1848,7 +2293,20 @@ async function startRuntimeClient() {
     innerHeight: window.innerHeight,
     readyState: document.readyState
   });
-  hot.send("vite-plugin-vue-mcp-next:page-connected", identity);
+  setElementContextResolver(
+    createElementContextResolver({
+      root: runtimeOptions.projectRoot ?? "/",
+      registry: runtimeElementRegistry,
+      querySelector(selector) {
+        return document.querySelector(selector);
+      }
+    })
+  );
+  hot.send(RUNTIME_PAGE_CONNECTED_EVENT, identity);
+  installRuntimePageLifecycle({
+    pageId: identity.pageId,
+    send: hot.send.bind(hot)
+  });
   installPerformanceHook({
     pageId: identity.pageId,
     send(report) {
@@ -1870,6 +2328,27 @@ async function startRuntimeClient() {
     }
   });
 }
+function installRuntimePageLifecycle(options) {
+  let disconnected = false;
+  const heartbeatTimer = setInterval(() => {
+    options.send(RUNTIME_PAGE_HEARTBEAT_EVENT, {
+      pageId: options.pageId,
+      timestamp: Date.now()
+    });
+  }, DEFAULT_RUNTIME_PAGE_HEARTBEAT_INTERVAL_MS);
+  const disconnect = () => {
+    if (disconnected) {
+      return;
+    }
+    disconnected = true;
+    clearInterval(heartbeatTimer);
+    options.send(RUNTIME_PAGE_DISCONNECTED_EVENT, {
+      pageId: options.pageId
+    });
+  };
+  window.addEventListener("pagehide", disconnect, { once: true });
+  window.addEventListener("beforeunload", disconnect, { once: true });
+}
 export {
   evaluateExpression,
   setScreenshotModuleRegistry,