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

package/dist/runtime/client.js

@@ -33,6 +33,7 @@ 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",
@@ -51,6 +52,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: {
@@ -169,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) {
@@ -195,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");
@@ -224,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,
@@ -379,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) {
@@ -433,7 +927,7 @@ function getRuntimeClientId(storage, tabScope) {
   }
 }
 function createRuntimePageId() {
-  return `runtime-${nanoid3()}`;
+  return `runtime-${nanoid4()}`;
 }
 function getRuntimePageIdentity(input) {
   return {
@@ -453,7 +947,7 @@ function getRuntimePageIdentity(input) {
 }
 
 // src/runtime/performanceHook.ts
-import { nanoid as nanoid4 } from "nanoid";
+import { nanoid as nanoid5 } from "nanoid";
 
 // src/performance/summary.ts
 function buildPerformanceSummary(input) {
@@ -627,7 +1121,7 @@ function createPerformanceCollector(deps) {
   };
 }
 function createRecordingId() {
-  return `performance-${nanoid4()}`;
+  return `performance-${nanoid5()}`;
 }
 function startSession(state, deps, options) {
   const recordingId = createRecordingId();
@@ -1002,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);
@@ -1096,6 +1518,390 @@ function createTimeout(timeoutMs) {
   });
 }
 
+// src/runtime/storageBridge.ts
+function createRuntimeStorageBridge(env) {
+  return {
+    async manageStorage(request) {
+      try {
+        return await manageRuntimeStorage(env, request);
+      } catch (error) {
+        return createRuntimeStorageError(
+          request,
+          error instanceof Error ? error.message : String(error)
+        );
+      }
+    }
+  };
+}
+async function manageRuntimeStorage(env, request) {
+  if (request.origin !== env.origin) {
+    return createRuntimeStorageError(
+      request,
+      "Runtime storage access is limited to the current page origin"
+    );
+  }
+  if (request.scope === "cookie") {
+    return manageRuntimeCookie(env, request);
+  }
+  if (request.scope === "indexedDB") {
+    return manageRuntimeIndexedDb(env, request);
+  }
+  return manageRuntimeWebStorage(getWebStorage(env, request.scope), request);
+}
+function manageRuntimeCookie(env, request) {
+  if (!env.cookie) {
+    return createRuntimeStorageError(
+      request,
+      "Runtime cookie access is unavailable",
+      ["document.cookie is not available in this runtime environment"]
+    );
+  }
+  if (request.action === "list") {
+    return createRuntimeStorageSuccess(request, {
+      origin: request.origin,
+      cookies: readRuntimeCookies(env.cookie)
+    });
+  }
+  if (request.action === "get") {
+    assertCookieName(request);
+    return createRuntimeStorageSuccess(request, {
+      origin: request.origin,
+      cookies: readRuntimeCookies(env.cookie).filter(
+        (cookie) => cookie.name === request.cookie.name
+      )
+    });
+  }
+  if (request.action === "set") {
+    assertCookieName(request);
+    env.cookie.set(createRuntimeCookieWrite(request));
+    return createRuntimeStorageSuccess(request, { ok: true });
+  }
+  if (request.action === "delete") {
+    assertCookieName(request);
+    env.cookie.set(createRuntimeCookieDelete(request));
+    return createRuntimeStorageSuccess(request, {
+      deletedCount: 1,
+      skippedHttpOnlyCount: 0,
+      limitations: ["HttpOnly cookies are invisible to runtime cookie access"]
+    });
+  }
+  const cookies = readRuntimeCookies(env.cookie);
+  for (const cookie of cookies) {
+    env.cookie.set(
+      createRuntimeCookieDelete({
+        ...request,
+        cookie: {
+          name: cookie.name,
+          path: request.cookie?.path
+        }
+      })
+    );
+  }
+  return createRuntimeStorageSuccess(request, {
+    deletedCount: cookies.length,
+    skippedHttpOnlyCount: 0,
+    limitations: ["HttpOnly cookies are invisible to runtime cookie access"]
+  });
+}
+function getWebStorage(env, scope) {
+  return scope === "sessionStorage" ? env.sessionStorage : env.localStorage;
+}
+function manageRuntimeWebStorage(storage, request) {
+  if (request.action === "list") {
+    return createRuntimeStorageSuccess(request, {
+      origin: request.origin,
+      scope: request.scope,
+      entries: readStorageEntries(storage)
+    });
+  }
+  if (request.action === "get") {
+    assertStorageKey(request);
+    return createRuntimeStorageSuccess(request, {
+      origin: request.origin,
+      scope: request.scope,
+      key: request.key,
+      value: storage.getItem(request.key)
+    });
+  }
+  if (request.action === "set") {
+    assertStorageKey(request);
+    storage.setItem(request.key, request.value ?? "");
+    return createRuntimeStorageSuccess(request, { ok: true });
+  }
+  if (request.action === "delete") {
+    assertStorageKey(request);
+    storage.removeItem(request.key);
+    return createRuntimeStorageSuccess(request, { ok: true });
+  }
+  storage.clear();
+  return createRuntimeStorageSuccess(request, { ok: true });
+}
+async function manageRuntimeIndexedDb(env, request) {
+  if (!env.indexedDB?.databases) {
+    return createRuntimeStorageError(request, "IndexedDB metadata API is unavailable");
+  }
+  if (request.action === "list") {
+    const databases = await env.indexedDB.databases();
+    return createRuntimeStorageSuccess(request, {
+      origin: request.origin,
+      scope: request.scope,
+      databases: databases.map((database) => ({
+        name: database.name,
+        version: database.version
+      }))
+    });
+  }
+  assertIndexedDbTarget(request);
+  if ("stores" in env.indexedDB) {
+    return manageMemoryIndexedDb(env.indexedDB, request);
+  }
+  return manageBrowserIndexedDb(env.indexedDB, request);
+}
+function manageMemoryIndexedDb(indexedDB, request) {
+  const storeId = `${request.databaseName}:${request.objectStoreName}`;
+  const store = indexedDB.stores.get(storeId) ?? /* @__PURE__ */ new Map();
+  indexedDB.stores.set(storeId, store);
+  if (request.action === "get") {
+    assertStorageKey(request);
+    return createRuntimeStorageSuccess(request, {
+      key: request.key,
+      value: store.get(request.key) ?? null
+    });
+  }
+  if (request.action === "set") {
+    assertStorageKey(request);
+    store.set(request.key, parseIndexedDbValue(request.value));
+    return createRuntimeStorageSuccess(request, { ok: true });
+  }
+  if (request.action === "delete") {
+    assertStorageKey(request);
+    store.delete(request.key);
+    return createRuntimeStorageSuccess(request, { ok: true });
+  }
+  store.clear();
+  return createRuntimeStorageSuccess(request, { ok: true });
+}
+async function manageBrowserIndexedDb(indexedDB, request) {
+  const database = await openIndexedDbForRequest(indexedDB, request);
+  try {
+    return await executeIndexedDbTransaction(database, request);
+  } finally {
+    database.close();
+  }
+}
+function openIndexedDb(indexedDB, databaseName) {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(databaseName);
+    request.onerror = () => {
+      reject(request.error ?? new Error("IndexedDB open failed"));
+    };
+    request.onsuccess = () => {
+      resolve(request.result);
+    };
+  });
+}
+async function openIndexedDbForRequest(indexedDB, request) {
+  const database = await openIndexedDb(indexedDB, request.databaseName);
+  if (request.action !== "set" || database.objectStoreNames.contains(request.objectStoreName)) {
+    return database;
+  }
+  const version = database.version + 1;
+  database.close();
+  return openIndexedDbWithStore(indexedDB, {
+    databaseName: request.databaseName,
+    objectStoreName: request.objectStoreName,
+    version
+  });
+}
+function openIndexedDbWithStore(indexedDB, options) {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(options.databaseName, options.version);
+    request.onupgradeneeded = () => {
+      const database = request.result;
+      if (!database.objectStoreNames.contains(options.objectStoreName)) {
+        database.createObjectStore(options.objectStoreName);
+      }
+    };
+    request.onerror = () => {
+      reject(request.error ?? new Error("IndexedDB upgrade failed"));
+    };
+    request.onsuccess = () => {
+      resolve(request.result);
+    };
+  });
+}
+function executeIndexedDbTransaction(database, request) {
+  return new Promise((resolve, reject) => {
+    const mode = request.action === "get" ? "readonly" : "readwrite";
+    const transaction = database.transaction(request.objectStoreName, mode);
+    const store = transaction.objectStore(request.objectStoreName);
+    transaction.onerror = () => {
+      reject(transaction.error ?? new Error("IndexedDB transaction failed"));
+    };
+    if (request.action === "get") {
+      assertStorageKey(request);
+      const getRequest = store.get(request.key);
+      getRequest.onerror = () => {
+        reject(getRequest.error ?? new Error("IndexedDB get failed"));
+      };
+      getRequest.onsuccess = () => {
+        const value = getRequest.result ?? null;
+        resolve(
+          createRuntimeStorageSuccess(request, {
+            key: request.key,
+            value
+          })
+        );
+      };
+      return;
+    }
+    if (request.action === "set") {
+      assertStorageKey(request);
+      store.put(parseIndexedDbValue(request.value), request.key);
+      transaction.oncomplete = () => {
+        resolve(createRuntimeStorageSuccess(request, { ok: true }));
+      };
+      return;
+    }
+    if (request.action === "delete") {
+      assertStorageKey(request);
+      store.delete(request.key);
+      transaction.oncomplete = () => {
+        resolve(createRuntimeStorageSuccess(request, { ok: true }));
+      };
+      return;
+    }
+    store.clear();
+    transaction.oncomplete = () => {
+      resolve(createRuntimeStorageSuccess(request, { ok: true }));
+    };
+  });
+}
+function readStorageEntries(storage) {
+  const entries = [];
+  for (let index = 0; index < storage.length; index += 1) {
+    const key = storage.key(index);
+    if (!key) {
+      continue;
+    }
+    const value = storage.getItem(key);
+    if (value === null) {
+      continue;
+    }
+    entries.push({ key, value });
+  }
+  return entries;
+}
+function readRuntimeCookies(cookieAccess) {
+  return cookieAccess.get().split(";").map((item) => item.trim()).filter(Boolean).map((item) => {
+    const separatorIndex = item.indexOf("=");
+    if (separatorIndex === -1) {
+      return { name: decodeCookiePart(item), value: "" };
+    }
+    return {
+      name: decodeCookiePart(item.slice(0, separatorIndex)),
+      value: decodeCookiePart(item.slice(separatorIndex + 1))
+    };
+  });
+}
+function createRuntimeCookieWrite(request) {
+  const value = request.cookie.value ?? request.value ?? "";
+  const parts = [
+    `${encodeURIComponent(request.cookie.name)}=${encodeURIComponent(value)}`
+  ];
+  appendRuntimeCookieAttributes(parts, request.cookie);
+  return parts.join("; ");
+}
+function createRuntimeCookieDelete(request) {
+  const parts = [
+    `${encodeURIComponent(request.cookie.name)}=`,
+    "Expires=Thu, 01 Jan 1970 00:00:00 GMT",
+    "Max-Age=0"
+  ];
+  appendRuntimeCookieAttributes(parts, {
+    path: request.cookie.path,
+    domain: request.cookie.domain
+  });
+  return parts.join("; ");
+}
+function appendRuntimeCookieAttributes(parts, cookie) {
+  if (cookie.path) {
+    parts.push(`Path=${cookie.path}`);
+  }
+  if (cookie.domain) {
+    parts.push(`Domain=${cookie.domain}`);
+  }
+  if (cookie.expires !== void 0) {
+    parts.push(`Expires=${new Date(cookie.expires * 1e3).toUTCString()}`);
+  }
+  if (cookie.sameSite) {
+    parts.push(`SameSite=${normalizeRuntimeSameSite(cookie.sameSite)}`);
+  }
+  if (cookie.secure) {
+    parts.push("Secure");
+  }
+}
+function normalizeRuntimeSameSite(sameSite) {
+  if (sameSite === "strict") {
+    return "Strict";
+  }
+  if (sameSite === "lax") {
+    return "Lax";
+  }
+  return "None";
+}
+function decodeCookiePart(value) {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}
+function assertStorageKey(request) {
+  if (!request.key) {
+    throw new Error("Storage key is required for this operation");
+  }
+}
+function assertCookieName(request) {
+  if (!request.cookie?.name) {
+    throw new Error("Cookie name is required for this operation");
+  }
+}
+function assertIndexedDbTarget(request) {
+  if (!request.databaseName || !request.objectStoreName) {
+    throw new Error("IndexedDB databaseName and objectStoreName are required");
+  }
+}
+function parseIndexedDbValue(value) {
+  if (value === void 0) {
+    return null;
+  }
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+function createRuntimeStorageSuccess(request, data) {
+  return {
+    ok: true,
+    source: "hook",
+    action: request.action,
+    scope: request.scope,
+    data
+  };
+}
+function createRuntimeStorageError(request, error, limitations) {
+  return {
+    ok: false,
+    source: "hook",
+    action: request.action,
+    scope: request.scope,
+    error,
+    limitations
+  };
+}
+
 // src/runtime/devtoolsBridge.ts
 function createRuntimeDevtoolsRpc(getRpc) {
   return {
@@ -1117,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(() => {
@@ -1151,7 +1973,26 @@ function createRuntimeDevtoolsRpc(getRpc) {
         });
       }
     },
-    onScreenshotTaken: () => void 0
+    onScreenshotTaken: () => void 0,
+    async manageStorage(options) {
+      const bridge = createRuntimeStorageBridge({
+        origin: window.location.origin,
+        localStorage: window.localStorage,
+        sessionStorage: window.sessionStorage,
+        indexedDB: window.indexedDB,
+        cookie: {
+          get: () => window.document.cookie,
+          set: (value) => {
+            window.document.cookie = value;
+          }
+        }
+      });
+      getRpc().onStorageUpdated(
+        options.event,
+        await bridge.manageStorage(options)
+      );
+    },
+    onStorageUpdated: () => void 0
   };
 }
 
@@ -1434,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,
@@ -1449,6 +2293,15 @@ async function startRuntimeClient() {
     innerHeight: window.innerHeight,
     readyState: document.readyState
   });
+  setElementContextResolver(
+    createElementContextResolver({
+      root: runtimeOptions.projectRoot ?? "/",
+      registry: runtimeElementRegistry,
+      querySelector(selector) {
+        return document.querySelector(selector);
+      }
+    })
+  );
   hot.send(RUNTIME_PAGE_CONNECTED_EVENT, identity);
   installRuntimePageLifecycle({
     pageId: identity.pageId,