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

package/dist/config-updater.js

@@ -86613,13 +86613,23 @@ async function mcpc(serverConf, composeConf, setupCallback) {
 * 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.",
+	capture_element_context: {
+		name: "capture_element_context",
+		title: "Capture Element",
+		description: "Capture single element context. Interactive (user clicks) or automated (selector param).",
+		arguments: [{
+			name: "selector",
+			description: "CSS selector for automated capture (no user interaction).",
+			required: false
+		}]
+	},
+	capture_area_context: {
+		name: "capture_area_context",
+		title: "Capture Area",
+		description: "Capture multiple elements in area. Interactive (user draws rectangle) or automated (containerSelector/bounds param).",
 		arguments: [{
-			name: "automated",
-			description: "If true, the AI will automate the capture process (click/feedback/submit).",
+			name: "containerSelector",
+			description: "CSS selector for container - captures all child elements.",
 			required: false
 		}]
 	},
@@ -86657,10 +86667,22 @@ const PROMPT_SCHEMAS = {
 		description: "List stdio (stdout/stderr) messages from the server process. Always refreshes the list first.",
 		arguments: []
 	},
+	capture_context: {
+		name: "capture_context",
+		title: "Capture Context",
+		description: "[DEPRECATED] Use capture_element_context or capture_area_context.",
+		arguments: []
+	},
+	capture_element: {
+		name: "capture_element",
+		title: "Capture Element Context",
+		description: "[DEPRECATED] Use capture_element_context.",
+		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.",
+		description: "[DEPRECATED] Use capture_area_context.",
 		arguments: []
 	}
 };
@@ -86674,24 +86696,53 @@ const PROMPT_SCHEMAS = {
 const TOOL_SCHEMAS = {
 	capture_element_context: {
 		name: "capture_element_context",
-		description: `Capture element context for troubleshooting. 
+		description: `Capture single element context.
 
-**Default (automated=false)**: Manual mode - activates visual selector for user interaction.
+**Modes**:
+1. **Interactive (default)**: User clicks element to select
+2. **Automated**: Use \`selector\` param for programmatic capture
 
-**Automated (automated=true)**: AI controls capture by clicking elements programmatically. Only set to true when user needs automation.
-
-Returns: source location, DOM hierarchy, computed styles, dimensions, and user notes. Use \`list_inspections\` to view all captured elements.`,
+Returns: source location, DOM hierarchy, computed styles, dimensions, user notes, screenshot.`,
 		inputSchema: {
 			type: "object",
-			properties: { automated: {
-				type: "boolean",
-				description: "Set to true ONLY when user explicitly requests automated capture. Default is false (manual mode)."
+			properties: { selector: {
+				type: "string",
+				description: "CSS selector for automated capture (no user interaction)."
 			} }
 		}
 	},
+	capture_area_context: {
+		name: "capture_area_context",
+		description: `Capture multiple elements in an area.
+
+**Modes**:
+1. **Interactive (default)**: User draws rectangle to select area
+2. **Automated**: Use \`containerSelector\` or \`bounds\` param
+
+Returns: array of element contexts (max 50).`,
+		inputSchema: {
+			type: "object",
+			properties: {
+				containerSelector: {
+					type: "string",
+					description: "CSS selector for container - captures all meaningful child elements."
+				},
+				bounds: {
+					type: "object",
+					properties: {
+						x: { type: "number" },
+						y: { type: "number" },
+						width: { type: "number" },
+						height: { type: "number" }
+					},
+					description: "Page coordinates - captures elements intersecting this area. Use get_page_info for context."
+				}
+			}
+		}
+	},
 	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).",
+		description: "List all captured inspections with ID, element details, source location, notes, and status (pending/in-progress/completed/failed).",
 		inputSchema: {
 			type: "object",
 			properties: {}
@@ -86699,13 +86750,13 @@ Returns: source location, DOM hierarchy, computed styles, dimensions, and user n
 	},
 	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' | 'deleted'\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// Or delete an inspection\nupdate_inspection_status({\n  status: 'deleted'\n});\n```",
+		description: "Update inspection status. Parameters: inspectionId (optional, auto-detects), status ('in-progress'|'completed'|'failed'|'deleted'), message (required for completed/failed).",
 		inputSchema: {
 			type: "object",
 			properties: {
 				inspectionId: {
 					type: "string",
-					description: "Optional inspection ID. If not provided, uses the current active inspection."
+					description: "Optional. If omitted, uses current active inspection."
 				},
 				status: {
 					type: "string",
@@ -86715,39 +86766,11 @@ Returns: source location, DOM hierarchy, computed styles, dimensions, and user n
 						"failed",
 						"deleted"
 					],
-					description: "Current status: 'in-progress' for updates, 'completed' when resolved, 'failed' if unresolvable, 'deleted' to remove inspection"
-				},
-				progress: {
-					type: "object",
-					properties: { steps: {
-						type: "array",
-						items: {
-							type: "object",
-							properties: {
-								id: { type: "number" },
-								title: { type: "string" },
-								status: {
-									type: "string",
-									enum: [
-										"pending",
-										"in-progress",
-										"completed",
-										"failed"
-									]
-								}
-							},
-							required: [
-								"id",
-								"title",
-								"status"
-							]
-						}
-					} },
-					description: "Optional step-by-step progress tracking"
+					description: "New status."
 				},
 				message: {
 					type: "string",
-					description: "Summary of findings or resolution. REQUIRED when status is 'completed' or 'failed'"
+					description: "Summary. Required for 'completed' or 'failed'."
 				}
 			},
 			required: ["status"]
@@ -86755,81 +86778,56 @@ Returns: source location, DOM hierarchy, computed styles, dimensions, and user n
 	},
 	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).",
+		description: "Execute JavaScript in browser context. Access: window, document, DOM APIs, React/Vue instances, localStorage. Must return a value.",
 		inputSchema: {
 			type: "object",
 			properties: { code: {
 				type: "string",
-				description: "JavaScript code to execute in page context. Must return a value for diagnostic output."
+				description: "JavaScript code to execute. Must return a value."
 			} },
 			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`,
+		description: `Get network requests from browser. Returns list with reqid, method, URL, status. Use reqid param to get full request/response details.`,
 		inputSchema: {
 			type: "object",
 			properties: { reqid: {
 				type: "number",
-				description: "Optional. Request ID to get full details. If omitted, returns list of all requests."
+				description: "Request ID from list to get full details (headers, body, timing)."
 			} }
 		}
 	},
 	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`,
+		description: `Get console messages from browser. Returns list with msgid, level (log/warn/error), message. Use msgid param to get full message details.`,
 		inputSchema: {
 			type: "object",
 			properties: { msgid: {
 				type: "number",
-				description: "Optional. Message ID to get full details. If omitted, returns list of all messages."
+				description: "Message ID from list to get full details."
 			} }
 		}
 	},
 	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`,
+		description: `Get dev server stdout/stderr. Returns list with stdioid, stream type, content. Use stdioid param to get full message.`,
 		inputSchema: {
 			type: "object",
 			properties: { stdioid: {
 				type: "number",
-				description: "Optional. Stdio message ID to get full details. If omitted, returns list of all messages."
+				description: "Stdio ID from list to get full details."
 			} }
 		}
+	},
+	get_page_info: {
+		name: "get_page_info",
+		description: "Get page overview with accessibility tree. Returns URL, title, viewport, document size, and semantic structure (landmarks, headings, forms, links). Start here to understand the page.",
+		inputSchema: {
+			type: "object",
+			properties: {}
+		}
 	}
 };
 
@@ -87043,7 +87041,8 @@ Default dev server URL: ${process.env.DEV_INSPECTOR_PUBLIC_BASE_URL || `http://$
 		{ ...TOOL_SCHEMAS.capture_area_context },
 		{ ...TOOL_SCHEMAS.list_inspections },
 		{ ...TOOL_SCHEMAS.update_inspection_status },
-		{ ...TOOL_SCHEMAS.execute_page_script }
+		{ ...TOOL_SCHEMAS.execute_page_script },
+		{ ...TOOL_SCHEMAS.get_page_info }
 	]);
 	mcpServer.setRequestHandler(ListPromptsRequestSchema, async (_request) => {
 		const defaultUrl = process.env.DEV_INSPECTOR_PUBLIC_BASE_URL ? stripTrailingSlash(process.env.DEV_INSPECTOR_PUBLIC_BASE_URL) : `http://${serverContext?.host || "localhost"}:${serverContext?.port || 5173}`;
@@ -87053,9 +87052,8 @@ Default dev server URL: ${process.env.DEV_INSPECTOR_PUBLIC_BASE_URL || `http://$
 			arguments: p$1.arguments
 		}));
 		const allDefaultPrompts = [
-			{ ...PROMPT_SCHEMAS.capture_element },
+			{ ...PROMPT_SCHEMAS.capture_context },
 			{ ...PROMPT_SCHEMAS.list_inspections },
-			{ ...PROMPT_SCHEMAS.capture_area },
 			{ ...PROMPT_SCHEMAS.get_stdio_messages },
 			...!chromeDisabled ? [{
 				...PROMPT_SCHEMAS.launch_chrome_devtools,
@@ -87067,7 +87065,9 @@ Default dev server URL: ${process.env.DEV_INSPECTOR_PUBLIC_BASE_URL || `http://$
 				}]
 			}] : [],
 			{ ...PROMPT_SCHEMAS.get_network_requests },
-			{ ...PROMPT_SCHEMAS.get_console_messages }
+			{ ...PROMPT_SCHEMAS.get_console_messages },
+			{ ...PROMPT_SCHEMAS.capture_element },
+			{ ...PROMPT_SCHEMAS.capture_area }
 		];
 		let filteredDefaultPrompts = [];
 		if (defaultPrompts === true) filteredDefaultPrompts = allDefaultPrompts;
@@ -87102,8 +87102,7 @@ Default dev server URL: ${process.env.DEV_INSPECTOR_PUBLIC_BASE_URL || `http://$
 			}).reverse().join("\n");
 			mcpServer.setRequestHandler(ListPromptsRequestSchema, async (_request) => {
 				return { prompts: [...filterPrompts([
-					{ ...PROMPT_SCHEMAS.capture_element },
-					{ ...PROMPT_SCHEMAS.capture_area },
+					{ ...PROMPT_SCHEMAS.capture_context },
 					{ ...PROMPT_SCHEMAS.list_inspections },
 					{
 						...PROMPT_SCHEMAS.get_network_requests,
@@ -87172,9 +87171,8 @@ Default dev server URL: ${process.env.DEV_INSPECTOR_PUBLIC_BASE_URL || `http://$
 				arguments: p$1.arguments
 			}));
 			return { prompts: [...filterPrompts([
-				{ ...PROMPT_SCHEMAS.capture_element },
+				{ ...PROMPT_SCHEMAS.capture_context },
 				{ ...PROMPT_SCHEMAS.list_inspections },
-				{ ...PROMPT_SCHEMAS.capture_area },
 				...!chromeDisabled ? [
 					{ ...PROMPT_SCHEMAS.launch_chrome_devtools },
 					{
@@ -87418,9 +87416,8 @@ Default dev server URL: ${process.env.DEV_INSPECTOR_PUBLIC_BASE_URL || `http://$
 				mcpServer.setRequestHandler(ListPromptsRequestSchema, async (_request) => {
 					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.capture_context },
 						{ ...PROMPT_SCHEMAS.list_inspections },
-						{ ...PROMPT_SCHEMAS.capture_area },
 						{
 							...PROMPT_SCHEMAS.get_stdio_messages,
 							arguments: [{
@@ -89432,11 +89429,13 @@ CRITICAL WORKFLOW:
    - Otherwise -> Answer user's question first, then ask if they want to use the pending inspections.
 
 Available tools:
-- **list_inspections**: Get pending user feedback context (do this first!)
-- **capture_element_context**: Activate visual selector
-- **update_inspection_status**: Update status
+- **get_page_info**: Get page overview with accessibility tree (start here to understand the page)
+- **list_inspections**: Get pending user feedback context
+- **capture_element_context**: Capture single element (interactive or via selector)
+- **capture_area_context**: Capture multiple elements in area (interactive or via containerSelector/bounds)
+- **update_inspection_status**: Update inspection status
 - **execute_page_script**: Run JS in browser
-- **chrome_devtools**: Access network/console`;
+- **get_stdio_messages**: Get dev server terminal output (list or details by stdioid)`;
 /**
 * Get an active transport from the connection manager
 */
@@ -89654,7 +89653,8 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 						type: "text",
 						text: `<system_instructions>
 ${systemPrompt}
-${isAutomated ? "" : "Currently chrome devtools automation is disabled. You do not have access to Console/Network context."}
+${isAutomated ? `- **chrome_devtools**: Access Chrome DevTools for network requests, console logs, page navigation, and element interaction` : `- **get_network_requests**: Get browser network requests (list or details by reqid) - uses local storage
+- **get_console_messages**: Get browser console logs (list or details by msgid) - uses local storage`}
 </system_instructions>
 `
 					}, ...msg.content]

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { McpServer } from "@agentclientprotocol/sdk";
-import * as unplugin0 from "unplugin";
+import * as unplugin1 from "unplugin";
 
 //#region src/utils/config-updater.d.ts
 type EditorId = "cursor" | "vscode" | "windsurf" | "claude-code" | "antigravity";
@@ -243,10 +243,10 @@ interface DevInspectorOptions extends McpConfigOptions, AcpOptions {
 }
 //#endregion
 //#region src/core.d.ts
-declare const unplugin: unplugin0.UnpluginInstance<DevInspectorOptions | undefined, boolean>;
+declare const unplugin: unplugin1.UnpluginInstance<DevInspectorOptions | undefined, boolean>;
 //#endregion
 //#region src/core-external.d.ts
-declare const unpluginExternal: unplugin0.UnpluginInstance<DevInspectorOptions | undefined, boolean>;
+declare const unpluginExternal: unplugin1.UnpluginInstance<DevInspectorOptions | undefined, boolean>;
 //#endregion
 //#region src/turbopack.d.ts
 interface TurbopackDevInspectorOptions extends DevInspectorOptions {
@@ -271,7 +271,7 @@ interface TurbopackDevInspectorOptions extends DevInspectorOptions {
 declare function turbopackDevInspector(options?: TurbopackDevInspectorOptions): any;
 //#endregion
 //#region src/index.d.ts
-declare const external: unplugin0.UnpluginInstance<DevInspectorOptions | undefined, boolean>;
+declare const external: unplugin1.UnpluginInstance<DevInspectorOptions | undefined, boolean>;
 declare module "virtual:dev-inspector-mcp" {}
 //#endregion
 export { type CustomEditorConfig, type DevInspectorOptions, type EditorId, type McpConfigOptions, type TurbopackDevInspectorOptions, unplugin as default, unplugin, external, turbopackDevInspector, unpluginExternal };

package/dist/react/react.d.ts

@@ -142,6 +142,14 @@ interface PageInfo {
     height: number;
   };
   language: string;
+  scrollPosition?: {
+    x: number;
+    y: number;
+  };
+  documentSize?: {
+    width: number;
+    height: number;
+  };
 }
 //#endregion
 //#region client/hooks/useContextData.d.ts