@xiaou66/vite-plugin-vue-mcp-next 1.0.3 → 1.1.0

package/dist/runtime/client.js

@@ -281,6 +281,58 @@ function safeReadXhrResponseText(xhr) {
 
 // src/runtime/pageIdentity.ts
 import { nanoid as nanoid3 } 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()}`;
+}
+function readRuntimeClientIdFromTabScope(tabScope) {
+  if (!tabScope) {
+    return void 0;
+  }
+  if (tabScope.__VITE_MCP_NEXT_RUNTIME_CLIENT_ID__) {
+    return tabScope.__VITE_MCP_NEXT_RUNTIME_CLIENT_ID__;
+  }
+  return tabScope.name.split(RUNTIME_CLIENT_ID_WINDOW_NAME_SEPARATOR).find((item) => item.startsWith(RUNTIME_CLIENT_ID_WINDOW_NAME_PREFIX))?.slice(RUNTIME_CLIENT_ID_WINDOW_NAME_PREFIX.length);
+}
+function writeRuntimeClientIdToTabScope(tabScope, clientId) {
+  tabScope.__VITE_MCP_NEXT_RUNTIME_CLIENT_ID__ = clientId;
+  const preservedNameParts = tabScope.name.split(RUNTIME_CLIENT_ID_WINDOW_NAME_SEPARATOR).filter((item) => !item.startsWith(RUNTIME_CLIENT_ID_WINDOW_NAME_PREFIX)).filter(Boolean);
+  tabScope.name = [
+    ...preservedNameParts,
+    `${RUNTIME_CLIENT_ID_WINDOW_NAME_PREFIX}${clientId}`
+  ].join(RUNTIME_CLIENT_ID_WINDOW_NAME_SEPARATOR);
+}
+function persistRuntimeClientId(storage, clientId, tabScope) {
+  storage.setItem(RUNTIME_CLIENT_ID_STORAGE_KEY, clientId);
+  if (tabScope) {
+    writeRuntimeClientIdToTabScope(tabScope, clientId);
+  }
+  return clientId;
+}
+function getRuntimeClientId(storage, tabScope) {
+  const nextClientId = createRuntimeClientId();
+  if (!storage) {
+    return nextClientId;
+  }
+  try {
+    const tabScopedClientId = readRuntimeClientIdFromTabScope(tabScope);
+    if (tabScopedClientId) {
+      return persistRuntimeClientId(storage, tabScopedClientId, tabScope);
+    }
+    if (tabScope) {
+      return persistRuntimeClientId(storage, nextClientId, tabScope);
+    }
+    const currentClientId = storage.getItem(RUNTIME_CLIENT_ID_STORAGE_KEY);
+    if (currentClientId) {
+      return currentClientId;
+    }
+    return persistRuntimeClientId(storage, nextClientId);
+  } catch {
+    return nextClientId;
+  }
+}
 function createRuntimePageId() {
   return `runtime-${nanoid3()}`;
 }
@@ -291,6 +343,7 @@ function getRuntimePageIdentity(input) {
     url: input.href,
     pathname: safeUrlPathname(input.href),
     title: input.title,
+    runtimeClientId: input.runtimeClientId,
     connected: true,
     readyState: input.readyState,
     viewport: {
@@ -300,6 +353,500 @@ 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
+    }
+  }
+};
+
+// src/performance/summary.ts
+function buildPerformanceSummary(input) {
+  const memory = buildMemorySummary(input.memorySamples);
+  const blockedTimeMs = input.longTasks.reduce((total, task) => {
+    return total + Math.max(0, task.durationMs - DEFAULT_PERFORMANCE_LONG_TASK_THRESHOLD_MS);
+  }, 0);
+  const longTaskCount = input.longTasks.length;
+  const durations = input.longTasks.map((task) => task.durationMs);
+  const maxTaskDurationMs = durations.length ? Math.max(...durations) : 0;
+  const averageTaskDurationMs = durations.length ? Math.round(
+    durations.reduce((total, duration) => total + duration, 0) / durations.length
+  ) : void 0;
+  const suspectedJank = blockedTimeMs > 0 || memory.trend === "growing" || longTaskCount > 0;
+  const severity = resolveSeverity({
+    blockedTimeMs,
+    longTaskCount,
+    memoryTrend: memory.trend
+  });
+  return {
+    blockedTimeMs,
+    longTaskCount,
+    maxTaskDurationMs,
+    averageTaskDurationMs,
+    suspectedJank,
+    severity
+  };
+}
+function buildMemorySummary(samples) {
+  const first = samples[0]?.usedJSHeapSize;
+  const last = samples.at(-1)?.usedJSHeapSize;
+  const peak = samples.reduce((currentPeak, sample) => {
+    if (typeof sample.usedJSHeapSize !== "number") {
+      return currentPeak;
+    }
+    return Math.max(currentPeak, sample.usedJSHeapSize);
+  }, 0);
+  const trend = resolveMemoryTrend(first, last);
+  return {
+    samples,
+    initialUsedJSHeapSize: first,
+    finalUsedJSHeapSize: last,
+    peakUsedJSHeapSize: peak || void 0,
+    deltaUsedJSHeapSize: typeof first === "number" && typeof last === "number" ? last - first : void 0,
+    trend
+  };
+}
+function buildStackSummary(frames, options = {}) {
+  return {
+    topFrames: [...frames].sort(sortByHotness).slice(0, 10),
+    rawProfilePath: options.rawProfilePath,
+    limitation: options.limitation
+  };
+}
+function resolveSeverity(input) {
+  if (input.blockedTimeMs >= 1e3 || input.longTaskCount >= 10) {
+    return "critical";
+  }
+  if (input.blockedTimeMs > 0 || input.memoryTrend === "growing") {
+    return "warning";
+  }
+  return "ok";
+}
+function resolveMemoryTrend(first, last) {
+  if (typeof first !== "number" || typeof last !== "number") {
+    return "unknown";
+  }
+  if (last > first) {
+    return "growing";
+  }
+  return "stable";
+}
+function sortByHotness(left, right) {
+  return compareNumber(right.totalTimeMs, left.totalTimeMs) || compareNumber(right.selfTimeMs, left.selfTimeMs) || compareNumber(right.hitCount, left.hitCount);
+}
+function compareNumber(left, right) {
+  return (left ?? -1) - (right ?? -1);
+}
+
+// src/runtime/performanceHook.ts
+var activePerformanceCollector;
+function installPerformanceHook(options) {
+  const collector = createPerformanceCollector({
+    pageId: options.pageId,
+    now: () => Date.now(),
+    readMemory: readBrowserMemory,
+    observeLongTask: (push) => observeLongTasks(push, options.longTaskThresholdMs),
+    observeAnimationFrame: observeAnimationFrameTasks,
+    observeErrorStack: observeWindowErrorStack,
+    observeUnhandledRejectionStack,
+    setTimeout: window.setTimeout.bind(window),
+    clearTimeout: window.clearTimeout.bind(window)
+  });
+  const decoratedCollector = options.send ? createDispatchingCollector(collector, options.send) : collector;
+  activePerformanceCollector = decoratedCollector;
+  return decoratedCollector;
+}
+function getPerformanceCollector() {
+  return activePerformanceCollector;
+}
+function createPerformanceCollector(deps) {
+  const state = {
+    longTasks: [],
+    stackFrames: [],
+    memorySamples: [],
+    latestReport: void 0,
+    activeRecordingId: void 0,
+    activeRecordingStartedAt: 0,
+    activeIncludeMemory: true,
+    activeIncludeStacks: true
+  };
+  const cleanups = [
+    deps.observeLongTask((task) => {
+      state.longTasks.push(task);
+    }),
+    deps.observeAnimationFrame((task) => {
+      state.longTasks.push(task);
+    })
+  ];
+  if (deps.observeErrorStack) {
+    cleanups.push(
+      deps.observeErrorStack((frame) => {
+        state.stackFrames.push(frame);
+      })
+    );
+  }
+  if (deps.observeUnhandledRejectionStack) {
+    cleanups.push(
+      deps.observeUnhandledRejectionStack((frame) => {
+        state.stackFrames.push(frame);
+      })
+    );
+  }
+  return {
+    async recordOnce(options) {
+      const recordingId = startSession(state, deps, {
+        includeMemory: options.includeMemory,
+        includeStacks: options.includeStacks
+      });
+      await waitForDuration(deps, options.durationMs);
+      return stopSession({
+        state,
+        deps,
+        recordingId,
+        source: "hook"
+      });
+    },
+    start(options) {
+      if (state.activeRecordingId) {
+        throw new Error("A performance recording is already active");
+      }
+      return startSession(state, deps, options);
+    },
+    stop(recordingId) {
+      return stopSession({
+        state,
+        deps,
+        recordingId,
+        source: "hook"
+      });
+    },
+    latest() {
+      return state.latestReport;
+    },
+    dispose() {
+      activePerformanceCollector = void 0;
+      for (const cleanup of cleanups) {
+        cleanup();
+      }
+    }
+  };
+}
+function createRecordingId() {
+  return `performance-${nanoid4()}`;
+}
+function startSession(state, deps, options) {
+  const recordingId = createRecordingId();
+  state.longTasks.length = 0;
+  state.stackFrames.length = 0;
+  state.memorySamples.length = 0;
+  if (options.includeMemory) {
+    const sample = deps.readMemory();
+    if (sample) {
+      state.memorySamples.push(sample);
+    }
+  }
+  state.activeRecordingId = recordingId;
+  state.activeRecordingStartedAt = deps.now();
+  state.activeIncludeMemory = options.includeMemory;
+  state.activeIncludeStacks = options.includeStacks;
+  return recordingId;
+}
+function createDispatchingCollector(collector, send) {
+  return {
+    async recordOnce(options) {
+      const report = await collector.recordOnce(options);
+      send(report);
+      return report;
+    },
+    start(options) {
+      return collector.start(options);
+    },
+    stop(recordingId) {
+      const report = collector.stop(recordingId);
+      send(report);
+      return report;
+    },
+    latest() {
+      return collector.latest();
+    },
+    dispose() {
+      collector.dispose();
+    }
+  };
+}
+function waitForDuration(deps, durationMs) {
+  return new Promise((resolve) => {
+    const timer = deps.setTimeout(() => {
+      deps.clearTimeout(timer);
+      resolve();
+    }, durationMs);
+  });
+}
+function buildReport(options) {
+  const memory = options.includeMemory ? buildMemorySummary(options.memorySamples) : void 0;
+  const summary = buildPerformanceSummary({
+    longTasks: options.longTasks,
+    memorySamples: options.includeMemory ? options.memorySamples : []
+  });
+  const stacks = options.includeStacks ? buildStackSummary(options.stackFrames, {
+    rawProfilePath: options.rawProfilePath,
+    limitation: options.stackFrames.length > 0 ? void 0 : "Runtime path only exposes error stacks when the page reports them"
+  }) : void 0;
+  const report = {
+    recordingId: options.recordingId,
+    pageId: options.pageId,
+    source: options.source,
+    startedAt: options.startedAt,
+    endedAt: options.endedAt,
+    durationMs: options.endedAt - options.startedAt,
+    summary,
+    longTasks: [...options.longTasks],
+    memory,
+    stacks,
+    artifacts: options.artifacts,
+    limitations: options.limitations
+  };
+  return report;
+}
+function stopSession(options) {
+  const { state, deps, recordingId, source } = options;
+  if (!state.activeRecordingId || state.activeRecordingId !== recordingId) {
+    throw new Error(`Performance recording not found: ${recordingId}`);
+  }
+  if (state.activeIncludeMemory) {
+    const sample = deps.readMemory();
+    if (sample) {
+      state.memorySamples.push(sample);
+    }
+  }
+  const report = buildReport({
+    recordingId: state.activeRecordingId,
+    pageId: deps.pageId,
+    startedAt: state.activeRecordingStartedAt,
+    endedAt: deps.now(),
+    source,
+    includeMemory: state.activeIncludeMemory,
+    includeStacks: state.activeIncludeStacks,
+    longTasks: state.longTasks,
+    memorySamples: state.memorySamples,
+    stackFrames: state.stackFrames,
+    limitations: [
+      "Runtime path only sees browser-observable signals",
+      "Runtime path cannot produce a full CPU profile or heap snapshot"
+    ]
+  });
+  state.latestReport = report;
+  state.activeRecordingId = void 0;
+  state.activeRecordingStartedAt = 0;
+  state.activeIncludeMemory = true;
+  state.activeIncludeStacks = true;
+  return report;
+}
+function readBrowserMemory() {
+  const memory = performance.memory;
+  if (!memory) {
+    return void 0;
+  }
+  return {
+    timestamp: Date.now(),
+    usedJSHeapSize: memory.usedJSHeapSize,
+    totalJSHeapSize: memory.totalJSHeapSize,
+    jsHeapSizeLimit: memory.jsHeapSizeLimit
+  };
+}
+function observeLongTasks(push, longTaskThresholdMs = 50) {
+  if (typeof PerformanceObserver === "undefined") {
+    return () => {
+    };
+  }
+  const observer = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      if (entry.duration < longTaskThresholdMs) {
+        continue;
+      }
+      push({
+        startTime: entry.startTime,
+        durationMs: entry.duration,
+        name: entry.name,
+        source: "longtask"
+      });
+    }
+  });
+  observer.observe({ type: "longtask", buffered: true });
+  return () => {
+    observer.disconnect();
+  };
+}
+function observeAnimationFrameTasks(push) {
+  if (typeof PerformanceObserver === "undefined") {
+    return () => {
+    };
+  }
+  const supported = PerformanceObserver.supportedEntryTypes.includes(
+    "long-animation-frame"
+  );
+  if (!supported) {
+    return () => {
+    };
+  }
+  const observer = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) {
+      push({
+        startTime: entry.startTime,
+        durationMs: entry.duration,
+        name: entry.name,
+        source: "long-animation-frame"
+      });
+    }
+  });
+  observer.observe({ type: "long-animation-frame", buffered: true });
+  return () => {
+    observer.disconnect();
+  };
+}
+function observeWindowErrorStack(push) {
+  const onError = (event) => {
+    const error = event.error;
+    const frames = parseStackFrames(error?.stack);
+    if (frames.length === 0 && event.message) {
+      push({ functionName: event.message });
+      return;
+    }
+    frames.forEach((frame) => {
+      push(frame);
+    });
+  };
+  window.addEventListener("error", onError);
+  return () => {
+    window.removeEventListener("error", onError);
+  };
+}
+function observeUnhandledRejectionStack(push) {
+  const onRejection = (event) => {
+    const reason = event.reason;
+    const frames = parseStackFrames(reason?.stack);
+    if (frames.length === 0 && reason?.message) {
+      push({ functionName: reason.message });
+      return;
+    }
+    frames.forEach((frame) => {
+      push(frame);
+    });
+  };
+  window.addEventListener("unhandledrejection", onRejection);
+  return () => {
+    window.removeEventListener("unhandledrejection", onRejection);
+  };
+}
+function parseStackFrames(stack) {
+  if (!stack) {
+    return [];
+  }
+  return stack.split("\n").map((line) => line.trim()).filter(Boolean).map((line) => {
+    const match = /at\s+(.*?)\s+\((.*?):(\d+):(\d+)\)$/.exec(line);
+    if (match) {
+      return {
+        functionName: match[1] || "<anonymous>",
+        url: match[2],
+        lineNumber: Number(match[3]),
+        columnNumber: Number(match[4])
+      };
+    }
+    return { functionName: line };
+  });
+}
+
 // src/runtime/screenshot.ts
 var snapdomLoader = () => Promise.reject(createMissingSnapdomError());
 var screenshotModuleRegistry = {};
@@ -716,7 +1263,79 @@ function createClientVueRuntimeRpc(getRpc) {
       });
       getRpc().onPiniaInfoUpdated(query.event, stringify(result));
     },
-    onPiniaInfoUpdated: () => void 0
+    onPiniaInfoUpdated: () => void 0,
+    async recordPerformance(query) {
+      const collector = getPerformanceCollector();
+      if (!collector) {
+        getRpc().onPerformanceRecorded(
+          query.event,
+          createPerformanceUnavailableError()
+        );
+        return;
+      }
+      try {
+        const report = await collector.recordOnce({
+          durationMs: query.durationMs,
+          includeMemory: query.includeMemory,
+          includeStacks: query.includeStacks
+        });
+        getRpc().onPerformanceRecorded(query.event, report);
+      } catch (error) {
+        getRpc().onPerformanceRecorded(
+          query.event,
+          createPerformanceError(error)
+        );
+      }
+    },
+    onPerformanceRecorded: () => void 0,
+    startPerformanceRecording(query) {
+      const collector = getPerformanceCollector();
+      if (!collector) {
+        getRpc().onPerformanceRecordingStarted(
+          query.event,
+          createPerformanceUnavailableError()
+        );
+        return;
+      }
+      try {
+        const recordingId = collector.start({
+          includeMemory: query.includeMemory,
+          includeStacks: query.includeStacks
+        });
+        getRpc().onPerformanceRecordingStarted(query.event, {
+          ok: true,
+          recordingId,
+          startedAt: Date.now(),
+          source: "hook"
+        });
+      } catch (error) {
+        getRpc().onPerformanceRecordingStarted(
+          query.event,
+          createPerformanceError(error)
+        );
+      }
+    },
+    onPerformanceRecordingStarted: () => void 0,
+    stopPerformanceRecording(query) {
+      const collector = getPerformanceCollector();
+      if (!collector) {
+        getRpc().onPerformanceRecordingStopped(
+          query.event,
+          createPerformanceUnavailableError()
+        );
+        return;
+      }
+      try {
+        const report = collector.stop(query.recordingId);
+        getRpc().onPerformanceRecordingStopped(query.event, report);
+      } catch (error) {
+        getRpc().onPerformanceRecordingStopped(
+          query.event,
+          createPerformanceError(error)
+        );
+      }
+    },
+    onPerformanceRecordingStopped: () => void 0
   };
 }
 function setStateValue(object, path, value) {
@@ -751,6 +1370,18 @@ function callVueDevtoolsHook(name, payload) {
   const hooks = devtools.ctx.hooks;
   hooks.callHook(name, payload);
 }
+function createPerformanceUnavailableError() {
+  return {
+    ok: false,
+    error: "Performance collector is not initialized"
+  };
+}
+function createPerformanceError(error) {
+  return {
+    ok: false,
+    error: error instanceof Error ? error.message : String(error)
+  };
+}
 async function findComponentNode(componentName) {
   const inspectorTree = await devtools.api.getInspectorTree({
     inspectorId: COMPONENTS_INSPECTOR_ID,
@@ -809,11 +1440,18 @@ async function startRuntimeClient() {
   const identity = getRuntimePageIdentity({
     href: window.location.href,
     title: document.title,
+    runtimeClientId: getRuntimeClientId(window.sessionStorage, window),
     innerWidth: window.innerWidth,
     innerHeight: window.innerHeight,
     readyState: document.readyState
   });
   hot.send("vite-plugin-vue-mcp-next:page-connected", identity);
+  installPerformanceHook({
+    pageId: identity.pageId,
+    send(report) {
+      hot.send("vite-plugin-vue-mcp-next:performance-record", report);
+    }
+  });
   installConsoleHook({
     pageId: identity.pageId,
     send(record) {