@mcpc-tech/unplugin-dev-inspector-mcp 0.0.1 → 0.0.2-beta.2

package/dist/index.cjs

@@ -38,6 +38,7 @@ require("@modelcontextprotocol/sdk/server/index.js");
 let __mcpc_tech_core = require("@mcpc-tech/core");
 let node_path = require("node:path");
 node_path = __toESM(node_path);
+let node_url = require("node:url");
 let fs = require("fs");
 fs = __toESM(fs);
 let path = require("path");
@@ -48,6 +49,7 @@ let __mcpc_tech_acp_ai_provider = require("@mcpc-tech/acp-ai-provider");
 let __agentclientprotocol_sdk = require("@agentclientprotocol/sdk");
 let node_fs = require("node:fs");
 let node_module = require("node:module");
+let __vue_compiler_sfc = require("@vue/compiler-sfc");
 
 //#region ../../node_modules/.pnpm/@mcpc-tech+cmcp@0.0.13-beta.2/node_modules/@mcpc-tech/cmcp/index.mjs
 var ClientToolResponseRequestSchema = zod.z.object({
@@ -412,6 +414,49 @@ function bindPuppet(transport, puppet, methods = [...DEFAULT_FORWARDED]) {
 }
 var encoder = new TextEncoder();
 
+//#endregion
+//#region src/prompt-schemas.ts
+/**
+* Shared prompt schemas for MCP inspector prompts
+* Used by both server and client implementations
+*/
+const PROMPT_SCHEMAS = {
+	capture_element: {
+		name: "capture_element",
+		title: "Capture Element Context",
+		description: "Capture context about a UI element for troubleshooting and investigation.",
+		arguments: []
+	},
+	view_inspections: {
+		name: "view_inspections",
+		title: "View All Inspections",
+		description: "View all element inspections in the queue with their status.",
+		arguments: []
+	},
+	launch_chrome_devtools: {
+		name: "launch_chrome_devtools",
+		title: "Launch Chrome DevTools",
+		description: "Launch Chrome DevTools and navigate to a specified URL for debugging and inspection.",
+		arguments: [{
+			name: "url",
+			description: "The URL to navigate to (e.g., http://localhost:3000)",
+			required: true
+		}]
+	},
+	refresh_chrome_state: {
+		name: "refresh_chrome_state",
+		title: "Refresh Chrome State",
+		description: "Refresh the state of the Chrome DevTools for the specified URL.",
+		arguments: []
+	},
+	get_network_requests: {
+		name: "get_network_requests",
+		title: "Get Network Requests",
+		description: "Get all network requests for the specified URL.",
+		arguments: []
+	}
+};
+
 //#endregion
 //#region src/tool-schemas.ts
 /**
@@ -419,31 +464,31 @@ var encoder = new TextEncoder();
 * Used by both server and client implementations
 */
 const TOOL_SCHEMAS = {
-	inspect_element: {
-		name: "inspect_element",
-		description: "Activate the visual element inspector to let the user select a UI element on the page. The user will click an element and provide feedback about what they want to change. Returns the source code location and user feedback.",
+	capture_element_context: {
+		name: "capture_element_context",
+		description: "Capture element context for troubleshooting. Activates visual selector, user clicks element and provides notes, returns source location, DOM hierarchy, computed styles, dimensions, and user notes. Combine with chrome_devtools MCP for deeper diagnostics (Network, Console, Performance, DOM tools).",
 		inputSchema: {
 			type: "object",
 			properties: {}
 		}
 	},
-	get_all_feedbacks: {
-		name: "get_all_feedbacks",
-		description: "Get a list of all current feedback items in the queue, including their status (pending/loading/success/error) and progress. Use this to see what tasks are already being worked on.",
+	list_inspections: {
+		name: "list_inspections",
+		description: "List all captured inspections with ID, element details, source location, notes, and status (pending/in-progress/completed/failed). Use with chrome_devtools for additional context (Console.getMessages, Network.getHAR, Performance.getMetrics).",
 		inputSchema: {
 			type: "object",
 			properties: {}
 		}
 	},
-	update_feedback_status: {
-		name: "update_feedback_status",
-		description: "Update the status of the current feedback item in the user's queue. Use this to show progress or mark completion.",
+	update_inspection_status: {
+		name: "update_inspection_status",
+		description: "Update inspection status with optional progress tracking.\n\n**Parameters**:\n- inspectionId: Optional (auto-detects if omitted)\n- status: 'in-progress' | 'completed' | 'failed'\n- progress: Optional steps array [{id, title, status}]\n- message: REQUIRED for 'completed'/'failed' status\n\n**Example**:\n```javascript\nupdate_inspection_status({\n  status: 'completed',\n  message: 'Fixed: pointer-events: none blocking clicks'\n});\n```",
 		inputSchema: {
 			type: "object",
 			properties: {
-				feedbackId: {
+				inspectionId: {
 					type: "string",
-					description: "Optional feedback ID. If not provided, will use the most recent loading feedback or the one from session."
+					description: "Optional inspection ID. If not provided, uses the current active inspection."
 				},
 				status: {
 					type: "string",
@@ -452,7 +497,7 @@ const TOOL_SCHEMAS = {
 						"completed",
 						"failed"
 					],
-					description: "Current status: 'in-progress' for updates, 'completed' when done, 'failed' on error"
+					description: "Current status: 'in-progress' for updates, 'completed' when resolved, 'failed' if unresolvable"
 				},
 				progress: {
 					type: "object",
@@ -480,21 +525,43 @@ const TOOL_SCHEMAS = {
 							]
 						}
 					} },
-					description: "Optional progress info with step-by-step details"
+					description: "Optional step-by-step progress tracking"
 				},
 				message: {
 					type: "string",
-					description: "Status message or completion summary. REQUIRED when status is 'completed' or 'failed'"
+					description: "Summary of findings or resolution. REQUIRED when status is 'completed' or 'failed'"
 				}
 			},
 			required: ["status"]
 		}
+	},
+	execute_page_script: {
+		name: "execute_page_script",
+		description: "Execute JavaScript in browser context (synchronous only, must return value). Access: window, document, DOM APIs, React/Vue instances, localStorage. For deeper diagnostics, use chrome_devtools MCP (Network.getHAR, Console.getMessages, Performance.getMetrics, Debugger, HeapProfiler).",
+		inputSchema: {
+			type: "object",
+			properties: { code: {
+				type: "string",
+				description: "JavaScript code to execute in page context. Must return a value for diagnostic output."
+			} },
+			required: ["code"]
+		}
 	}
 };
 
 //#endregion
 //#region src/mcp.ts
 /**
+* Get Chrome DevTools binary path from npm package, then use node to run it, faster/stabler than npx
+*/
+function getChromeDevToolsBinPath() {
+	const resolver = {}.resolve;
+	if (!resolver) throw new Error("Cannot resolve chrome-devtools-mcp package");
+	const pkgUrl = resolver("chrome-devtools-mcp/package.json");
+	const chromeDevTools = node_path.default.dirname((0, node_url.fileURLToPath)(pkgUrl));
+	return node_path.default.join(chromeDevTools, "./build/src/index.js");
+}
+/**
 * Call MCP server method and wait for response
 * @param mcpServer - The MCP server instance
 * @param method - The method name to call
@@ -527,51 +594,178 @@ function callMcpMethod(mcpServer, method, params) {
 /**
 * Create and configure the MCP server for source inspection
 */
-async function createInspectorMcpServer() {
+async function createInspectorMcpServer(serverContext) {
 	const mcpServer = await (0, __mcpc_tech_core.mcpc)([{
 		name: "dev-inspector",
 		version: "1.0.0",
 		title: "A tool for inspecting and interacting with the development environment."
 	}, { capabilities: {
-		tools: {},
+		tools: { listChanged: true },
 		sampling: {},
-		prompts: {}
-	} }], []);
+		prompts: { listChanged: true }
+	} }], [{
+		name: "chrome_devtools",
+		description: `Access Chrome DevTools for browser diagnostics.
+
+Provides tools for inspecting network requests, console logs, and performance metrics.
+
+IMPORTANT: Must first call chrome_navigate_page to launch Chrome before using these capabilities.
+Default dev server URL: http://${serverContext?.host || "localhost"}:${serverContext?.port || 5173}
+
+You MUST ask the user for confirmation before navigating to any URL.`,
+		options: { refs: ["<tool name=\"chrome.__ALL__\"/>"] },
+		deps: { mcpServers: { chrome: {
+			transportType: "stdio",
+			command: "node",
+			args: [getChromeDevToolsBinPath()]
+		} } }
+	}]);
 	const mcpClientExecServer = createClientExecServer(mcpServer, "inspector");
 	mcpClientExecServer.registerClientToolSchemas([
-		{ ...TOOL_SCHEMAS.inspect_element },
-		{ ...TOOL_SCHEMAS.get_all_feedbacks },
-		{ ...TOOL_SCHEMAS.update_feedback_status }
+		{ ...TOOL_SCHEMAS.capture_element_context },
+		{ ...TOOL_SCHEMAS.list_inspections },
+		{ ...TOOL_SCHEMAS.update_inspection_status },
+		{ ...TOOL_SCHEMAS.execute_page_script }
 	]);
 	mcpServer.setRequestHandler(__modelcontextprotocol_sdk_types_js.ListPromptsRequestSchema, async (request) => {
-		return { prompts: [{
-			name: "grab-element",
-			title: "Inspect Element",
-			description: "Inspect a UI element and get user feedback for modifications.",
-			arguments: []
-		}, {
-			name: "view-feedbacks",
-			title: "View All Feedbacks",
-			description: "View all current feedback items in the queue with their status.",
-			arguments: []
-		}] };
+		const defaultUrl = `http://${serverContext?.host || "localhost"}:${serverContext?.port || 5173}`;
+		return { prompts: [
+			{ ...PROMPT_SCHEMAS.capture_element },
+			{ ...PROMPT_SCHEMAS.view_inspections },
+			{
+				...PROMPT_SCHEMAS.launch_chrome_devtools,
+				description: `Launch Chrome DevTools and navigate to the dev server for debugging and inspection. Default URL: ${defaultUrl}. You can use this default URL or provide a custom one.`,
+				arguments: [{
+					name: "url",
+					description: `The URL to navigate to. Press Enter to use default: ${defaultUrl}`,
+					required: false
+				}]
+			},
+			{ ...PROMPT_SCHEMAS.refresh_chrome_state }
+		] };
 	});
 	mcpServer.setRequestHandler(__modelcontextprotocol_sdk_types_js.GetPromptRequestSchema, async (request) => {
-		if (request.params.name === "grab-element") return { messages: (await callMcpMethod(mcpServer, "tools/call", {
-			name: "inspect_element",
-			arguments: {}
-		}))?.content.map((item) => ({
-			role: "user",
-			content: item
-		})) || [] };
-		else if (request.params.name === "view-feedbacks") return { messages: (await callMcpMethod(mcpServer, "tools/call", {
-			name: "get_all_feedbacks",
-			arguments: {}
-		}))?.content.map((item) => ({
-			role: "user",
-			content: item
-		})) || [] };
-		else throw new Error(`Unknown promptId: ${request.params.name}`);
+		const promptName = request.params.name;
+		switch (promptName) {
+			case "capture_element": return { messages: (await callMcpMethod(mcpServer, "tools/call", {
+				name: "capture_element_context",
+				arguments: {}
+			}))?.content.map((item) => ({
+				role: "user",
+				content: item
+			})) || [] };
+			case "view_inspections": return { messages: (await callMcpMethod(mcpServer, "tools/call", {
+				name: "list_inspections",
+				arguments: {}
+			}))?.content.map((item) => ({
+				role: "user",
+				content: item
+			})) || [] };
+			case "launch_chrome_devtools": {
+				const defaultUrl = `http://${serverContext?.host || "localhost"}:${serverContext?.port || 5173}`;
+				const url$1 = request.params.arguments?.url || defaultUrl;
+				try {
+					new URL(url$1);
+				} catch (error) {
+					return { messages: [{
+						role: "user",
+						content: {
+							type: "text",
+							text: `Error: Invalid URL format: "${url$1}". Please provide a valid URL (e.g., http://localhost:5173)`
+						}
+					}] };
+				}
+				try {
+					return { messages: [...((await callMcpMethod(mcpServer, "tools/call", {
+						name: "chrome_devtools",
+						arguments: {
+							useTool: "chrome_navigate_page",
+							hasDefinitions: ["chrome_navigate_page"],
+							chrome_navigate_page: { url: url$1 }
+						}
+					}))?.content || []).map((item) => ({
+						role: "user",
+						content: item
+					}))] };
+				} catch (error) {
+					return { messages: [{
+						role: "user",
+						content: {
+							type: "text",
+							text: `Error launching Chrome DevTools: ${error instanceof Error ? error.message : String(error)}`
+						}
+					}] };
+				}
+			}
+			case "refresh_chrome_state": try {
+				const result = await callMcpMethod(mcpServer, "tools/call", {
+					name: "chrome_devtools",
+					arguments: {
+						useTool: "chrome_list_network_requests",
+						hasDefinitions: ["chrome_list_network_requests"],
+						chrome_list_network_requests: {}
+					}
+				});
+				const reqIdMatches = (result?.content?.map((item) => item.text).join("\n") || "").matchAll(/reqid=(\d+)\s+(GET|POST|PUT|DELETE|PATCH)\s+([^\s]+)\s+\[([^\]]+)\]/g);
+				const requestOptions = Array.from(reqIdMatches).map((match) => {
+					const [, reqId, method, url$1, status] = match;
+					return `  ${reqId}: ${method} ${url$1.length > 60 ? url$1.substring(0, 57) + "..." : url$1} [${status}]`;
+				}).reverse().join("\n");
+				mcpServer.setRequestHandler(__modelcontextprotocol_sdk_types_js.ListPromptsRequestSchema, async (request$1) => {
+					return { prompts: [
+						{ ...PROMPT_SCHEMAS.capture_element },
+						{ ...PROMPT_SCHEMAS.view_inspections },
+						{ ...PROMPT_SCHEMAS.launch_chrome_devtools },
+						{ ...PROMPT_SCHEMAS.refresh_chrome_state },
+						{
+							...PROMPT_SCHEMAS.get_network_requests,
+							arguments: [{
+								name: "reqid",
+								description: `The request ID to get details for. Available requests:\n\n${requestOptions || "No requests available"}`,
+								required: true
+							}]
+						}
+					] };
+				});
+				await mcpServer.sendPromptListChanged();
+				return { messages: [...(result?.content || []).map((item) => ({
+					role: "user",
+					content: item
+				}))] };
+			} catch (error) {
+				return { messages: [{
+					role: "user",
+					content: {
+						type: "text",
+						text: `Error launching Chrome DevTools: ${error instanceof Error ? error.message : String(error)}`
+					}
+				}] };
+			}
+			case "get_network_requests":
+				const reqid = parseInt(request.params.arguments?.reqid);
+				try {
+					return { messages: [...((await callMcpMethod(mcpServer, "tools/call", {
+						name: "chrome_devtools",
+						arguments: {
+							useTool: "chrome_get_network_request",
+							hasDefinitions: ["chrome_get_network_request"],
+							chrome_get_network_request: { reqid }
+						}
+					}))?.content || []).map((item) => ({
+						role: "user",
+						content: item
+					}))] };
+				} catch (error) {
+					return { messages: [{
+						role: "user",
+						content: {
+							type: "text",
+							text: `Error launching Chrome DevTools: ${error instanceof Error ? error.message : String(error)}`
+						}
+					}] };
+				}
+			default: throw new Error(`Unknown promptId: ${promptName}`);
+		}
 	});
 	return mcpClientExecServer;
 }
@@ -581,11 +775,11 @@ async function createInspectorMcpServer() {
 /**
 * Setup MCP server endpoints in Vite dev server
 */
-async function setupMcpMiddleware(middlewares) {
+async function setupMcpMiddleware(middlewares, serverContext) {
 	const transports = {};
 	middlewares.use(async (req, res, next) => {
 		const url$1 = req.url || "";
-		const mcpServer = await createInspectorMcpServer();
+		const mcpServer = await createInspectorMcpServer(serverContext);
 		if (url$1.startsWith("/__mcp__") && !url$1.startsWith("/__mcp__/sse") && !url$1.startsWith("/__mcp__/messages")) {
 			if (req.method === "POST") await handleStreamableHttpPost(req, res, mcpServer, transports);
 			else if (req.method === "GET") await handleStreamableHttpGet(req, res, transports);
@@ -896,7 +1090,7 @@ function resolveMcpRemote(cwd = process.cwd()) {
 
 //#endregion
 //#region src/middleware/acp-middleware.ts
-function setupAcpMiddleware(middlewares) {
+function setupAcpMiddleware(middlewares, serverContext) {
 	middlewares.use("/api/acp/chat", async (req, res) => {
 		if (req.method !== "POST") {
 			res.statusCode = 405;
@@ -908,11 +1102,6 @@ function setupAcpMiddleware(middlewares) {
 			const { messages, agent, envVars } = JSON.parse(body);
 			const cwd = process.cwd();
 			const mcpRemote = resolveMcpRemote(cwd);
-			console.log("ACP Agent Command:", {
-				agent,
-				envVars,
-				mcpRemote
-			});
 			const provider = (0, __mcpc_tech_acp_ai_provider.createACPProvider)({
 				command: agent.command,
 				args: agent.args,
@@ -921,7 +1110,7 @@ function setupAcpMiddleware(middlewares) {
 					cwd,
 					mcpServers: [{
 						command: mcpRemote.command,
-						args: [...mcpRemote.args, "http://localhost:5173/__mcp__/sse?puppetId=chrome"],
+						args: [...mcpRemote.args, `http://${serverContext?.host || "localhost"}:${serverContext?.port || 5173}/__mcp__/sse?puppetId=chrome`],
 						env: [],
 						name: "inspect"
 					}]
@@ -5451,13 +5640,13 @@ var require_lib = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+
 			super.checkParams(node, false, true);
 			this.scope.exit();
 		}
-		forwardNoArrowParamsConversionAt(node, parse$2) {
+		forwardNoArrowParamsConversionAt(node, parse$3) {
 			let result;
 			if (this.state.noArrowParamsConversionAt.includes(this.offsetToSourcePos(node.start))) {
 				this.state.noArrowParamsConversionAt.push(this.state.start);
-				result = parse$2();
+				result = parse$3();
 				this.state.noArrowParamsConversionAt.pop();
-			} else result = parse$2();
+			} else result = parse$3();
 			return result;
 		}
 		parseParenItem(node, startLoc) {
@@ -14504,7 +14693,7 @@ var require_lib = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+
 			return result;
 		}
 	};
-	function parse$1(input, options) {
+	function parse$2(input, options) {
 		var _options;
 		if (((_options = options) == null ? void 0 : _options.sourceType) === "unambiguous") {
 			options = Object.assign({}, options);
@@ -14562,19 +14751,19 @@ var require_lib = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+
 		}
 		return cls;
 	}
-	exports.parse = parse$1;
+	exports.parse = parse$2;
 }) });
 
 //#endregion
 //#region src/compiler/jsx-transform.ts
 var import_lib = require_lib();
 const traverse = (0, node_module.createRequire)(require("url").pathToFileURL(__filename).href)("@babel/traverse").default;
-function normalizePath(id) {
+function normalizePath$1(id) {
 	return id.split(node_path.default.sep).join("/");
 }
-const DATA_SOURCE_ATTR = "data-source";
+const DATA_SOURCE_ATTR$1 = "data-source";
 async function transformJSX({ code: code$1, id }) {
-	const relativePath = normalizePath(node_path.default.relative(process.cwd(), id));
+	const relativePath = normalizePath$1(node_path.default.relative(process.cwd(), id));
 	const ast = (0, import_lib.parse)(code$1, {
 		sourceType: "module",
 		plugins: [
@@ -14587,9 +14776,9 @@ async function transformJSX({ code: code$1, id }) {
 	});
 	const s = new MagicString(code$1);
 	let hasModifications = false;
-	traverse(ast, { JSXOpeningElement(path$4) {
-		const node = path$4.node;
-		if (node.attributes.some((attr) => attr.type === "JSXAttribute" && attr.name.name === DATA_SOURCE_ATTR)) return;
+	traverse(ast, { JSXOpeningElement(path$5) {
+		const node = path$5.node;
+		if (node.attributes.some((attr) => attr.type === "JSXAttribute" && attr.name.name === DATA_SOURCE_ATTR$1)) return;
 		const { line, column } = node.loc.start;
 		const sourceValue = `${relativePath}:${line}:${column}`;
 		let insertPos;
@@ -14598,7 +14787,7 @@ async function transformJSX({ code: code$1, id }) {
 			const tagName = node.name.name || "";
 			insertPos = node.start + tagName.length + 1;
 		}
-		s.prependLeft(insertPos, ` ${DATA_SOURCE_ATTR}="${sourceValue}"`);
+		s.prependLeft(insertPos, ` ${DATA_SOURCE_ATTR$1}="${sourceValue}"`);
 		hasModifications = true;
 	} });
 	if (!hasModifications) return null;
@@ -14608,6 +14797,42 @@ async function transformJSX({ code: code$1, id }) {
 	};
 }
 
+//#endregion
+//#region src/compiler/vue-transform.ts
+function normalizePath(id) {
+	return id.split(node_path.default.sep).join("/");
+}
+const DATA_SOURCE_ATTR = "data-source";
+async function compileVue({ code: code$1, id }) {
+	const relativePath = normalizePath(node_path.default.relative(process.cwd(), id));
+	const { descriptor } = (0, __vue_compiler_sfc.parse)(code$1, {
+		filename: id,
+		sourceMap: true
+	});
+	if (!descriptor.template || !descriptor.template.ast) return null;
+	const s = new MagicString(code$1);
+	let hasModifications = false;
+	function traverse$1(node) {
+		if (node.type === 1) {
+			if (!node.props.some((prop) => prop.type === 6 && prop.name === DATA_SOURCE_ATTR)) {
+				const { line, column } = node.loc.start;
+				const sourceValue = `${relativePath}:${line}:${column}`;
+				const tagName = node.tag;
+				const insertPos = node.loc.start.offset + 1 + tagName.length;
+				s.prependLeft(insertPos, ` ${DATA_SOURCE_ATTR}="${sourceValue}"`);
+				hasModifications = true;
+			}
+		}
+		if (node.children) node.children.forEach(traverse$1);
+	}
+	traverse$1(descriptor.template.ast);
+	if (!hasModifications) return null;
+	return {
+		code: s.toString(),
+		map: s.generateMap({ hires: true })
+	};
+}
+
 //#endregion
 //#region src/core.ts
 const unplugin$1 = (0, unplugin.createUnplugin)((options = {}) => {
@@ -14618,9 +14843,8 @@ const unplugin$1 = (0, unplugin.createUnplugin)((options = {}) => {
 		name: "unplugin-dev-inspector",
 		enforce: "pre",
 		async transform(code$1, id) {
-			if (!id.match(/\.(jsx|tsx)$/)) return null;
 			if (id.includes("node_modules")) return null;
-			try {
+			if (id.match(/\.(jsx|tsx)$/)) try {
 				return await transformJSX({
 					code: code$1,
 					id
@@ -14629,6 +14853,16 @@ const unplugin$1 = (0, unplugin.createUnplugin)((options = {}) => {
 				console.error(`[dev-inspector] Failed to transform ${id}:`, error);
 				return null;
 			}
+			if (id.match(/\.vue$/)) try {
+				return await compileVue({
+					code: code$1,
+					id
+				});
+			} catch (error) {
+				console.error(`[dev-inspector] Failed to transform ${id}:`, error);
+				return null;
+			}
+			return null;
 		},
 		vite: {
 			apply: "serve",
@@ -14638,8 +14872,15 @@ const unplugin$1 = (0, unplugin.createUnplugin)((options = {}) => {
 			async configureServer(server) {
 				console.log("\n✨ Dev Inspector Plugin enabled!");
 				if (enableMcp) {
-					await setupMcpMiddleware(server.middlewares);
-					setupAcpMiddleware(server.middlewares);
+					const host = server.config.server.host;
+					const serverContext = {
+						host: typeof host === "string" ? host : host === true ? "0.0.0.0" : "localhost",
+						port: server.config.server.port || 5173
+					};
+					const displayHost = serverContext.host === "0.0.0.0" ? "localhost" : serverContext.host;
+					console.log(`📡 MCP: http://${displayHost}:${serverContext.port}/__mcp__/sse?puppetId=chrome\n`);
+					await setupMcpMiddleware(server.middlewares, serverContext);
+					setupAcpMiddleware(server.middlewares, serverContext);
 				}
 				setupInspectorMiddleware(server.middlewares);
 			},