@mcpc-tech/unplugin-dev-inspector-mcp 0.1.30 → 0.1.32

package/dist/config-updater.js

@@ -81,7 +81,7 @@ var __require = /* @__PURE__ */ createRequire(import.meta.url);
 * Default port for the standalone server.
 * Can be overridden via DEV_INSPECTOR_PORT environment variable.
 */
-const DEFAULT_PORT = 5137;
+const DEFAULT_PORT = 6137;
 /**
 * Get the configured port from environment variable or default.
 */
@@ -169,6 +169,10 @@ var StandaloneServer = class {
 	listen(...args) {
 		return this.server.listen(...args);
 	}
+	/**
+	* Start the standalone server.
+	* Host resolution: string value used as-is, `true` = '0.0.0.0', default = 'localhost'
+	*/
 	async start(options = {}) {
 		const startPort = options.port || getDefaultPort();
 		this.host = typeof options.host === "string" ? options.host : options.host === true ? "0.0.0.0" : "localhost";
@@ -86619,8 +86623,8 @@ const PROMPT_SCHEMAS = {
 			required: false
 		}]
 	},
-	view_inspections: {
-		name: "view_inspections",
+	list_inspections: {
+		name: "list_inspections",
 		title: "View All Inspections",
 		description: "View all element inspections in the queue with their status.",
 		arguments: []
@@ -86652,6 +86656,12 @@ const PROMPT_SCHEMAS = {
 		title: "Get Stdio Messages",
 		description: "List stdio (stdout/stderr) messages from the server process. Always refreshes the list first.",
 		arguments: []
+	},
+	capture_area: {
+		name: "capture_area",
+		title: "Capture Area Context",
+		description: "Draw a rectangle on the page to capture multiple elements at once for troubleshooting.",
+		arguments: []
 	}
 };
 
@@ -86754,6 +86764,72 @@ Returns: source location, DOM hierarchy, computed styles, dimensions, and user n
 			} },
 			required: ["code"]
 		}
+	},
+	capture_area_context: {
+		name: "capture_area_context",
+		description: `Capture area context by activating visual area selection mode.
+
+User draws a rectangle on the page to select multiple elements at once. After selection, returns context for all elements in the area including source locations, DOM info, and screenshot.
+
+**Flow**: 
+1. Activates area selection mode (user sees crosshair cursor)
+2. User draws rectangle around target elements
+3. Returns: primary element + related elements with source locations, DOM hierarchy, and screenshot`,
+		inputSchema: {
+			type: "object",
+			properties: {}
+		}
+	},
+	get_network_requests: {
+		name: "get_network_requests",
+		description: `Get network requests from browser for debugging.
+
+Returns list of HTTP requests with ID, method, URL, and status code. Use reqid parameter to get full details of a specific request including headers, body, and timing.
+
+**Usage**:
+- Call without parameters to list all requests
+- Call with reqid to get specific request details`,
+		inputSchema: {
+			type: "object",
+			properties: { reqid: {
+				type: "number",
+				description: "Optional. Request ID to get full details. If omitted, returns list of all requests."
+			} }
+		}
+	},
+	get_console_messages: {
+		name: "get_console_messages",
+		description: `Get console messages from browser for debugging.
+
+Returns list of console logs with ID, level (log/warn/error/info), and message content. Use msgid parameter to get full details of a specific message.
+
+**Usage**:
+- Call without parameters to list all messages
+- Call with msgid to get specific message details`,
+		inputSchema: {
+			type: "object",
+			properties: { msgid: {
+				type: "number",
+				description: "Optional. Message ID to get full details. If omitted, returns list of all messages."
+			} }
+		}
+	},
+	get_stdio_messages: {
+		name: "get_stdio_messages",
+		description: `Get stdio (stdout/stderr) terminal messages from dev server process.
+
+Returns list of terminal output with ID, stream type (stdout/stderr), and content. Use stdioid parameter to get full details of a specific message.
+
+**Usage**:
+- Call without parameters to list all stdio messages
+- Call with stdioid to get specific message details`,
+		inputSchema: {
+			type: "object",
+			properties: { stdioid: {
+				type: "number",
+				description: "Optional. Stdio message ID to get full details. If omitted, returns list of all messages."
+			} }
+		}
 	}
 };
 
@@ -86821,6 +86897,8 @@ function getStdioById(id) {
 
 //#endregion
 //#region src/mcp.ts
+const TRUNCATE_URL_LENGTH = 60;
+const TRUNCATE_MESSAGE_LENGTH = 180;
 /**
 * Get Chrome DevTools binary path from npm package, then use node to run it, faster/stabler than npx
 */
@@ -86908,9 +86986,61 @@ Default dev server URL: ${process.env.DEV_INSPECTOR_PUBLIC_BASE_URL || `http://$
 			args: [getChromeDevToolsBinPath()]
 		} } }
 	}]);
+	if (chromeDisabled) {
+		mcpServer.tool(TOOL_SCHEMAS.get_network_requests.name, TOOL_SCHEMAS.get_network_requests.description, TOOL_SCHEMAS.get_network_requests.inputSchema, async ({ reqid }) => {
+			if (reqid !== void 0) {
+				const req = getRequestById(reqid);
+				return { content: [{
+					type: "text",
+					text: req ? req.details || JSON.stringify(req, null, 2) : "Request not found"
+				}] };
+			}
+			return { content: [{
+				type: "text",
+				text: getNetworkRequests().map((r) => {
+					const truncatedUrl = r.url.length > TRUNCATE_URL_LENGTH ? r.url.substring(0, TRUNCATE_URL_LENGTH - 3) + "..." : r.url;
+					return `reqid=${r.id} ${r.method} ${truncatedUrl} [${r.status}]`;
+				}).reverse().join("\n") || "No network requests"
+			}] };
+		});
+		mcpServer.tool(TOOL_SCHEMAS.get_console_messages.name, TOOL_SCHEMAS.get_console_messages.description, TOOL_SCHEMAS.get_console_messages.inputSchema, async ({ msgid }) => {
+			if (msgid !== void 0) {
+				const log = getLogById(msgid);
+				return { content: [{
+					type: "text",
+					text: log ? JSON.stringify(log, null, 2) : "Log not found"
+				}] };
+			}
+			return { content: [{
+				type: "text",
+				text: getLogs().map((l) => {
+					const msg = l.args.map((arg) => typeof arg === "object" ? JSON.stringify(arg) : String(arg)).join(" ");
+					const truncated = msg.length > TRUNCATE_MESSAGE_LENGTH ? msg.substring(0, TRUNCATE_MESSAGE_LENGTH - 3) + "..." : msg;
+					return `msgid=${l.id} [${l.type}] ${truncated}`;
+				}).reverse().join("\n") || "No console messages"
+			}] };
+		});
+	}
+	mcpServer.tool(TOOL_SCHEMAS.get_stdio_messages.name, TOOL_SCHEMAS.get_stdio_messages.description, TOOL_SCHEMAS.get_stdio_messages.inputSchema, async ({ stdioid }) => {
+		if (stdioid !== void 0) {
+			const log = getStdioById(stdioid);
+			return { content: [{
+				type: "text",
+				text: log ? JSON.stringify(log, null, 2) : "Stdio message not found"
+			}] };
+		}
+		return { content: [{
+			type: "text",
+			text: getStdioLogs().map((log) => {
+				const truncated = log.data.length > TRUNCATE_MESSAGE_LENGTH ? log.data.substring(0, TRUNCATE_MESSAGE_LENGTH - 3) + "..." : log.data;
+				return `stdioid=${log.id} [${log.stream}] ${truncated}`;
+			}).reverse().join("\n") || "No stdio messages"
+		}] };
+	});
 	const mcpClientExecServer = createClientExecServer(mcpServer, "inspector");
 	mcpClientExecServer.registerClientToolSchemas([
 		{ ...TOOL_SCHEMAS.capture_element_context },
+		{ ...TOOL_SCHEMAS.capture_area_context },
 		{ ...TOOL_SCHEMAS.list_inspections },
 		{ ...TOOL_SCHEMAS.update_inspection_status },
 		{ ...TOOL_SCHEMAS.execute_page_script }
@@ -86924,7 +87054,8 @@ Default dev server URL: ${process.env.DEV_INSPECTOR_PUBLIC_BASE_URL || `http://$
 		}));
 		const allDefaultPrompts = [
 			{ ...PROMPT_SCHEMAS.capture_element },
-			{ ...PROMPT_SCHEMAS.view_inspections },
+			{ ...PROMPT_SCHEMAS.list_inspections },
+			{ ...PROMPT_SCHEMAS.capture_area },
 			{ ...PROMPT_SCHEMAS.get_stdio_messages },
 			...!chromeDisabled ? [{
 				...PROMPT_SCHEMAS.launch_chrome_devtools,
@@ -86954,7 +87085,7 @@ Default dev server URL: ${process.env.DEV_INSPECTOR_PUBLIC_BASE_URL || `http://$
 			const requests = getNetworkRequests();
 			const logs$1 = getLogs();
 			const requestOptions$1 = requests.map((r) => {
-				const truncatedUrl = r.url.length > 60 ? r.url.substring(0, 57) + "..." : r.url;
+				const truncatedUrl = r.url.length > TRUNCATE_URL_LENGTH ? r.url.substring(0, TRUNCATE_URL_LENGTH - 3) + "..." : r.url;
 				return `reqid=${r.id} ${r.method} ${truncatedUrl} [${r.status}]`;
 			}).reverse().join("\n");
 			const messageOptions$1 = logs$1.map((l) => {
@@ -86966,13 +87097,14 @@ Default dev server URL: ${process.env.DEV_INSPECTOR_PUBLIC_BASE_URL || `http://$
 					}
 					return String(arg);
 				}).join(" ");
-				const truncatedText = text$3.length > 1e3 ? text$3.substring(0, 997) + "..." : text$3;
+				const truncatedText = text$3.length > TRUNCATE_MESSAGE_LENGTH ? text$3.substring(0, TRUNCATE_MESSAGE_LENGTH - 3) + "..." : text$3;
 				return `msgid=${l.id} [${l.type}] ${truncatedText}`;
 			}).reverse().join("\n");
 			mcpServer.setRequestHandler(ListPromptsRequestSchema, async (_request) => {
 				return { prompts: [...filterPrompts([
 					{ ...PROMPT_SCHEMAS.capture_element },
-					{ ...PROMPT_SCHEMAS.view_inspections },
+					{ ...PROMPT_SCHEMAS.capture_area },
+					{ ...PROMPT_SCHEMAS.list_inspections },
 					{
 						...PROMPT_SCHEMAS.get_network_requests,
 						arguments: [{
@@ -87026,12 +87158,12 @@ Default dev server URL: ${process.env.DEV_INSPECTOR_PUBLIC_BASE_URL || `http://$
 		const reqIdMatches = (networkResult?.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, status] = match;
-			return `  ${reqId}: ${method} ${url.length > 60 ? url.substring(0, 57) + "..." : url} [${status}]`;
+			return `  ${reqId}: ${method} ${url.length > TRUNCATE_URL_LENGTH ? url.substring(0, TRUNCATE_URL_LENGTH - 3) + "..." : url} [${status}]`;
 		}).reverse().join("\n");
 		const msgIdMatches = (consoleResult?.content?.map((item) => item.text).join("\n") || "").matchAll(/msgid=(\d+)\s+\[([^\]]+)\]\s+(.+)/g);
 		const messageOptions = Array.from(msgIdMatches).map((match) => {
 			const [, msgId, level, text$2] = match;
-			return `  ${msgId}: [${level}] ${text$2.length > 60 ? text$2.substring(0, 57) + "..." : text$2}`;
+			return `  ${msgId}: [${level}] ${text$2.length > TRUNCATE_URL_LENGTH ? text$2.substring(0, TRUNCATE_URL_LENGTH - 3) + "..." : text$2}`;
 		}).reverse().join("\n");
 		mcpServer.setRequestHandler(ListPromptsRequestSchema, async (_request) => {
 			const usernamePromptsMapped = userPrompts.map((p$1) => ({
@@ -87041,7 +87173,8 @@ Default dev server URL: ${process.env.DEV_INSPECTOR_PUBLIC_BASE_URL || `http://$
 			}));
 			return { prompts: [...filterPrompts([
 				{ ...PROMPT_SCHEMAS.capture_element },
-				{ ...PROMPT_SCHEMAS.view_inspections },
+				{ ...PROMPT_SCHEMAS.list_inspections },
+				{ ...PROMPT_SCHEMAS.capture_area },
 				...!chromeDisabled ? [
 					{ ...PROMPT_SCHEMAS.launch_chrome_devtools },
 					{
@@ -87144,13 +87277,20 @@ Default dev server URL: ${process.env.DEV_INSPECTOR_PUBLIC_BASE_URL || `http://$
 				role: "user",
 				content: item
 			})) || [] };
-			case "view_inspections": return { messages: (await callMcpMethod(mcpServer, "tools/call", {
+			case "list_inspections": return { messages: (await callMcpMethod(mcpServer, "tools/call", {
 				name: "list_inspections",
 				arguments: {}
 			}))?.content.map((item) => ({
 				role: "user",
 				content: item
 			})) || [] };
+			case "capture_area": return { messages: (await callMcpMethod(mcpServer, "tools/call", {
+				name: "capture_area_context",
+				arguments: {}
+			}))?.content.map((item) => ({
+				role: "user",
+				content: item
+			})) || [] };
 			case "launch_chrome_devtools": {
 				const defaultUrl = process.env.DEV_INSPECTOR_PUBLIC_BASE_URL ? stripTrailingSlash(process.env.DEV_INSPECTOR_PUBLIC_BASE_URL) : `http://${serverContext?.host || "localhost"}:${serverContext?.port || 5173}`;
 				const url = request.params.arguments?.url || defaultUrl;
@@ -87247,7 +87387,7 @@ Default dev server URL: ${process.env.DEV_INSPECTOR_PUBLIC_BASE_URL || `http://$
 				const stdioLogs$1 = getStdioLogs();
 				const stdioIdStr = request.params.arguments?.stdioid;
 				const formattedMessages = stdioLogs$1.map((log) => {
-					const truncatedData = log.data.length > 1e3 ? log.data.substring(0, 997) + "..." : log.data;
+					const truncatedData = log.data.length > TRUNCATE_MESSAGE_LENGTH ? log.data.substring(0, TRUNCATE_MESSAGE_LENGTH - 3) + "..." : log.data;
 					return `stdioid=${log.id} [${log.stream}] ${truncatedData}`;
 				}).reverse();
 				if (stdioIdStr) {
@@ -87279,7 +87419,8 @@ Default dev server URL: ${process.env.DEV_INSPECTOR_PUBLIC_BASE_URL || `http://$
 					const defaultUrl = process.env.DEV_INSPECTOR_PUBLIC_BASE_URL ? stripTrailingSlash(process.env.DEV_INSPECTOR_PUBLIC_BASE_URL) : `http://${serverContext?.host || "localhost"}:${serverContext?.port || 5173}`;
 					return { prompts: [
 						{ ...PROMPT_SCHEMAS.capture_element },
-						{ ...PROMPT_SCHEMAS.view_inspections },
+						{ ...PROMPT_SCHEMAS.list_inspections },
+						{ ...PROMPT_SCHEMAS.capture_area },
 						{
 							...PROMPT_SCHEMAS.get_stdio_messages,
 							arguments: [{
@@ -87300,7 +87441,12 @@ Default dev server URL: ${process.env.DEV_INSPECTOR_PUBLIC_BASE_URL || `http://$
 							},
 							{ ...PROMPT_SCHEMAS.get_network_requests },
 							{ ...PROMPT_SCHEMAS.get_console_messages }
-						] : []
+						] : [],
+						...userPrompts.map((p$1) => ({
+							name: p$1.name,
+							description: p$1.description,
+							arguments: p$1.arguments
+						}))
 					] };
 				});
 				await mcpServer.sendPromptListChanged();

package/dist/index.cjs

@@ -55,13 +55,16 @@ const createDevInspectorPlugin = (name, transformFactory) => {
 		let viteCommand;
 		let standaloneServerStarted = false;
 		let resolvedHost = "localhost";
-		let resolvedPort = options.port || 5137;
+		let resolvedPort = options.port || 6137;
 		const transformImpl = transformFactory(options);
 		const chromeDisabled = require_helpers.isChromeDisabled(options.disableChrome);
 		const ensureStandaloneServer$1 = async (root) => {
 			if (standaloneServerStarted) return;
 			standaloneServerStarted = true;
-			const { server, host, port } = await require_config_updater.startStandaloneServer({ port: options.port });
+			const { server, host, port } = await require_config_updater.startStandaloneServer({
+				port: options.port,
+				host: options.host
+			});
 			resolvedHost = host;
 			resolvedPort = port;
 			const serverContext = {

package/dist/index.d.cts

@@ -131,29 +131,36 @@ interface DevInspectorOptions extends McpConfigOptions, AcpOptions {
    */
   enabled?: boolean;
   /**
-   * Custom host for MCP server URL
-   * Useful when behind a proxy or in Docker containers
+   * Host address for the standalone server to bind to.
+   * - `"localhost"` (default): Only accessible locally, avoids Mixed Content errors (HTTPS→HTTP allowed)
+   * - `"0.0.0.0"` or `true`: Accessible from all network interfaces (useful for Docker, remote access)
+   * - Custom hostname: Bind to specific interface
    * @default "localhost"
-   * @example "localhost" or "my-dev-server.local"
+   * @example true
    */
-  host?: string;
+  host?: string | boolean;
   /**
    * Custom port for MCP server URL
    * Useful when behind a proxy or port forwarding (e.g., Docker, SSH tunnels)
    * Can also be set via DEV_INSPECTOR_PORT environment variable
-   * @default 5137
-   * @example 5137
+   * @default 6137
+   * @example 6137
    */
   port?: number;
   /**
    * Public base URL (including protocol) that editors/browsers should use to reach the dev server.
    *
-   * Use this when the dev server runs in a container or behind a reverse proxy where the externally
-   * reachable URL is different from the internal host/port (e.g. https://your-domain.com).
+   * Use this when the dev server runs in a cloud IDE or behind a reverse proxy where the externally
+   * reachable URL differs from the internal host/port.
+   *
+   * Common use cases:
+   * - Cloud IDEs: Fly.io (`https://app-6137.fly.dev`), Gitpod, GitHub Codespaces
+   * - Docker with port mapping
+   * - Reverse proxy / tunnel (ngrok, cloudflared)
    *
    * If provided, it will be used for MCP config auto-update and console output.
    *
-   * @example "https://your-domain.com"
+   * @example "https://my-app-6137.fly.dev"
    */
   publicBaseUrl?: string;
   /**

package/dist/index.d.ts

@@ -131,29 +131,36 @@ interface DevInspectorOptions extends McpConfigOptions, AcpOptions {
    */
   enabled?: boolean;
   /**
-   * Custom host for MCP server URL
-   * Useful when behind a proxy or in Docker containers
+   * Host address for the standalone server to bind to.
+   * - `"localhost"` (default): Only accessible locally, avoids Mixed Content errors (HTTPS→HTTP allowed)
+   * - `"0.0.0.0"` or `true`: Accessible from all network interfaces (useful for Docker, remote access)
+   * - Custom hostname: Bind to specific interface
    * @default "localhost"
-   * @example "localhost" or "my-dev-server.local"
+   * @example true
    */
-  host?: string;
+  host?: string | boolean;
   /**
    * Custom port for MCP server URL
    * Useful when behind a proxy or port forwarding (e.g., Docker, SSH tunnels)
    * Can also be set via DEV_INSPECTOR_PORT environment variable
-   * @default 5137
-   * @example 5137
+   * @default 6137
+   * @example 6137
    */
   port?: number;
   /**
    * Public base URL (including protocol) that editors/browsers should use to reach the dev server.
    *
-   * Use this when the dev server runs in a container or behind a reverse proxy where the externally
-   * reachable URL is different from the internal host/port (e.g. https://your-domain.com).
+   * Use this when the dev server runs in a cloud IDE or behind a reverse proxy where the externally
+   * reachable URL differs from the internal host/port.
+   *
+   * Common use cases:
+   * - Cloud IDEs: Fly.io (`https://app-6137.fly.dev`), Gitpod, GitHub Codespaces
+   * - Docker with port mapping
+   * - Reverse proxy / tunnel (ngrok, cloudflared)
    *
    * If provided, it will be used for MCP config auto-update and console output.
    *
-   * @example "https://your-domain.com"
+   * @example "https://my-app-6137.fly.dev"
    */
   publicBaseUrl?: string;
   /**

package/dist/index.js

@@ -51,13 +51,16 @@ const createDevInspectorPlugin = (name, transformFactory) => {
 		let viteCommand;
 		let standaloneServerStarted = false;
 		let resolvedHost = "localhost";
-		let resolvedPort = options.port || 5137;
+		let resolvedPort = options.port || 6137;
 		const transformImpl = transformFactory(options);
 		const chromeDisabled = isChromeDisabled(options.disableChrome);
 		const ensureStandaloneServer$1 = async (root) => {
 			if (standaloneServerStarted) return;
 			standaloneServerStarted = true;
-			const { server, host, port } = await startStandaloneServer({ port: options.port });
+			const { server, host, port } = await startStandaloneServer({
+				port: options.port,
+				host: options.host
+			});
 			resolvedHost = host;
 			resolvedPort = port;
 			const serverContext = {