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

package/dist/react/react.js

@@ -2,6 +2,7 @@ import { Client } from "@modelcontextprotocol/sdk/client";
 import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createClientExecClient } from "@mcpc-tech/cmcp";
+import { toPng } from "html-to-image";
 import { ListPromptsResultSchema, PromptListChangedNotificationSchema } from "@modelcontextprotocol/sdk/types.js";
 
 //#region src/tool-schemas.ts
@@ -102,6 +103,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."
+			} }
+		}
 	}
 };
 
@@ -293,7 +360,7 @@ function getDevServerBaseUrl() {
 	if (injectedConfig?.baseUrl && typeof injectedConfig.baseUrl === "string") return injectedConfig.baseUrl.replace(/\/$/, "");
 	if (injectedConfig?.host && injectedConfig?.port) return `http://${injectedConfig.host}:${injectedConfig.port}${base}`.replace(/\/$/, "");
 	if (typeof window !== "undefined" && window.location?.origin) return window.location.origin;
-	return `http://localhost:5137`;
+	return `http://localhost:6137`;
 }
 /**
 * Merge custom agent with default agent properties
@@ -352,24 +419,257 @@ async function getDefaultAgent() {
 //#endregion
 //#region client/utils/format.ts
 /**
+* Format DOM element info only (for Code tab)
+*/
+function formatDomElement(elementInfo) {
+	if (!elementInfo) return "";
+	const { tagName, textContent, className, id: elemId, domPath, boundingBox } = elementInfo;
+	let output = `### DOM Element
+\`\`\`
+Tag: <${tagName}${elemId ? ` id="${elemId}"` : ""}${className ? ` class="${className}"` : ""}>
+Text: ${textContent || "(empty)"}
+Path: ${domPath || "N/A"}
+\`\`\`
+`;
+	if (boundingBox) output += `
+### Position & Size
+- **Position**: (${Math.round(boundingBox.x)}, ${Math.round(boundingBox.y)})
+- **Size**: ${Math.round(boundingBox.width)}px × ${Math.round(boundingBox.height)}px
+`;
+	return output;
+}
+/**
+* Format computed styles only (for Styles tab)
+*/
+function formatComputedStyles(elementInfo) {
+	if (!elementInfo) return "";
+	const { computedStyles, styles } = elementInfo;
+	if (computedStyles) return `### Computed Styles
+
+**Layout**:
+- display: ${computedStyles.layout.display}
+- position: ${computedStyles.layout.position}
+- z-index: ${computedStyles.layout.zIndex}
+
+**Typography**:
+- font: ${computedStyles.typography.fontSize} ${computedStyles.typography.fontFamily}
+- color: ${computedStyles.typography.color}
+- text-align: ${computedStyles.typography.textAlign}
+
+**Spacing**:
+- padding: ${computedStyles.spacing.padding}
+- margin: ${computedStyles.spacing.margin}
+
+**Background & Border**:
+- background: ${computedStyles.background.backgroundColor}
+- border: ${computedStyles.border.border}
+- border-radius: ${computedStyles.border.borderRadius}
+`;
+	else if (styles) return `### Key Styles
+- display: ${styles.display}
+- color: ${styles.color}
+- background: ${styles.backgroundColor}
+- font-size: ${styles.fontSize}
+`;
+	return "";
+}
+/**
+* Format source location
+*/
+function formatSourceInfo(sourceInfo) {
+	return `## Source Code
+- **File**: ${sourceInfo.file}
+- **Line**: ${sourceInfo.line}:${sourceInfo.column}
+- **Component**: ${sourceInfo.component}
+`;
+}
+/**
+* Format console messages
+*/
+function formatConsoleMessages(messages) {
+	if (messages.length === 0) return "";
+	const formatted = messages.map((msg) => {
+		return `- ${msg.level === "error" ? "❌" : msg.level === "warn" ? "⚠️" : "📝"} [${msg.level}] ${msg.text}`;
+	}).join("\n");
+	return `## Console Messages (${messages.length})
+${formatted}
+`;
+}
+/**
+* Format network requests
+*/
+function formatNetworkRequests(requests) {
+	if (requests.length === 0) return "";
+	const formatted = requests.map((req) => {
+		let entry = `### ${req.method} ${req.url}
+- **Status**: ${req.status}
+`;
+		if (req.details && req.details !== "(expand request to load details)") entry += `
+#### Details
+\`\`\`
+${req.details}
+\`\`\`
+`;
+		return entry;
+	}).join("\n");
+	return `## Network Requests (${requests.length})
+${formatted}
+`;
+}
+/**
+* Format stdio messages
+*/
+function formatStdioMessages(messages) {
+	if (messages.length === 0) return "";
+	const formatted = messages.map((msg) => {
+		return `- [${msg.stream}] ${msg.data}`;
+	}).join("\n");
+	return `## Terminal Logs (${messages.length})
+${formatted}
+`;
+}
+/**
+* Format page information
+*/
+function formatPageInfo(pageInfo) {
+	return `## Page Information
+- **URL**: ${pageInfo.url}
+- **Title**: ${pageInfo.title}
+- **Viewport**: ${pageInfo.viewport.width} × ${pageInfo.viewport.height}
+- **Language**: ${pageInfo.language}
+`;
+}
+/**
 * Format element annotations (notes) from primary and related elements
 */
 function formatElementAnnotations(options) {
-	const { primaryNote, primaryTag, relatedElements } = options;
+	const { primaryNote, primaryTag, relatedElements, elementNotes } = options;
 	const notes = [];
 	if (primaryNote) {
 		const tag = primaryTag || "element";
 		notes.push(`- **Primary element** (${tag}): ${primaryNote}`);
 	}
 	if (relatedElements && relatedElements.length > 0) relatedElements.forEach((el, idx) => {
-		if (el.note) {
+		const note = el.note || elementNotes?.[idx];
+		if (note) {
 			const tag = el.elementInfo?.tagName?.toLowerCase() || el.component;
 			const location = el.file && el.line ? ` at ${el.file}:${el.line}` : "";
-			notes.push(`- **Related element #${idx + 1}** (${tag}${location}): ${el.note}`);
+			notes.push(`- **Related element #${idx + 1}** (${tag}${location}): ${note}`);
 		}
 	});
 	return notes.length > 0 ? `\n**Element Annotations**:\n${notes.join("\n")}\n` : "";
 }
+/**
+* Format complete context for Copy & Go (matches ContextPicker tab structure)
+*/
+function formatCopyContext(options) {
+	const { sourceInfo, includeElement, includeStyles, includePageInfo, pageInfo, feedback, consoleMessages, networkRequests, stdioMessages, relatedElements, relatedElementIds, elementNotes } = options;
+	let output = "# Element Context\n\n";
+	const hasRelatedElements = relatedElements && relatedElements.length > 0 && relatedElementIds && relatedElementIds.length > 0;
+	if (sourceInfo && includeElement) {
+		output += "## Code\n\n";
+		if (hasRelatedElements) output += "### Primary Element (Best Match)\n";
+		output += formatSourceInfo(sourceInfo);
+		output += "\n";
+		output += formatDomElement(sourceInfo.elementInfo);
+		output += "\n";
+	}
+	if (relatedElements && relatedElements.length > 0 && relatedElementIds && relatedElementIds.length > 0) {
+		const selectedElements = relatedElements.filter((_, idx) => relatedElementIds.includes(idx));
+		if (selectedElements.length > 0) {
+			output += "## Related Elements\n\n";
+			const grouped = selectedElements.reduce((acc, el) => {
+				const file = el.file || "unknown";
+				if (!acc[file]) acc[file] = [];
+				acc[file].push(el);
+				return acc;
+			}, {});
+			Object.entries(grouped).forEach(([file, elements]) => {
+				output += `### ${file}\n`;
+				elements.forEach((el) => {
+					const originalIndex = relatedElements.indexOf(el);
+					const note = elementNotes ? elementNotes[originalIndex] : null;
+					output += `- **${el.component}** (${el.line}:${el.column})`;
+					if (el.elementInfo?.tagName) {
+						output += ` - \`<${el.elementInfo.tagName}`;
+						if (el.elementInfo.className) output += ` class="${el.elementInfo.className}"`;
+						if (el.elementInfo.id) output += ` id="${el.elementInfo.id}"`;
+						output += `>`;
+						if (el.elementInfo.textContent) {
+							const preview = el.elementInfo.textContent.trim().slice(0, 30);
+							if (preview) output += ` "${preview}${el.elementInfo.textContent.length > 30 ? "..." : ""}"`;
+						}
+						output += "`";
+					}
+					if (note) output += `\n  - **USER NOTE**: "${note}"`;
+					output += "\n";
+				});
+				output += "\n";
+			});
+		}
+	}
+	if (sourceInfo?.elementInfo && includeStyles) {
+		output += "## Styles\n\n";
+		output += formatComputedStyles(sourceInfo.elementInfo);
+		output += "\n";
+	}
+	if (pageInfo && includePageInfo) {
+		output += formatPageInfo(pageInfo);
+		output += "\n";
+	}
+	if (feedback) output += `## User Request\n\n${feedback}\n\n`;
+	if (consoleMessages && consoleMessages.length > 0) {
+		output += formatConsoleMessages(consoleMessages);
+		output += "\n";
+	}
+	if (networkRequests && networkRequests.length > 0) {
+		output += formatNetworkRequests(networkRequests);
+		output += "\n";
+	}
+	if (stdioMessages && stdioMessages.length > 0) output += formatStdioMessages(stdioMessages);
+	return output.trim();
+}
+
+//#endregion
+//#region client/utils/screenshot.ts
+/**
+* Capture screenshot of a DOM element
+* @param element - The DOM element to capture
+* @param options - Screenshot options
+* @returns Promise<string> - Data URL of the screenshot, or empty string on error
+*/
+async function captureElementScreenshot(element, options = {}) {
+	const { quality = .95, maxWidth = 1200, maxHeight = 800 } = options;
+	try {
+		const rect = element.getBoundingClientRect();
+		return await toPng(element, {
+			quality,
+			pixelRatio: Math.min(1, maxWidth / rect.width, maxHeight / rect.height) * (window.devicePixelRatio || 1),
+			cacheBust: true,
+			width: rect.width,
+			height: rect.height,
+			style: {
+				margin: "0",
+				transform: "none"
+			},
+			filter: (node) => {
+				if (node instanceof HTMLElement) {
+					const tagName = node.tagName.toLowerCase();
+					if (tagName === "iframe" || tagName === "script" || tagName === "link" || tagName === "video" || tagName === "audio" || tagName === "object" || tagName === "embed") return false;
+					if (tagName === "img") {
+						const img = node;
+						if (!img.complete || img.naturalWidth === 0) return false;
+					}
+				}
+				return true;
+			},
+			fontEmbedCSS: ""
+		});
+	} catch (error) {
+		console.error("[screenshot] Failed to capture element:", error);
+		return "";
+	}
+}
 
 //#endregion
 //#region client/hooks/useMcp.ts
@@ -552,6 +852,13 @@ ${requests}
 
 `;
 	}
+	const notesSection = formatElementAnnotations({
+		primaryNote: sourceInfo.note,
+		primaryTag: elementInfo?.tagName?.toLowerCase() || component,
+		relatedElements: sourceInfo.relatedElements,
+		elementNotes: selectedContext?.elementNotes
+	});
+	if (notesSection) output += notesSection;
 	output += `## Your Task
 1. Investigate the issue using 'chrome_devtools' tool (check console logs, network requests, performance)
 2. Use 'execute_page_script' to query element state if needed
@@ -722,6 +1029,77 @@ After clicking, use \`list_inspections\` to view the captured element with full
 			{
 				...TOOL_SCHEMAS.execute_page_script,
 				implementation: patchContext
+			},
+			{
+				...TOOL_SCHEMAS.capture_area_context,
+				implementation: () => {
+					cancelPendingRequest("New area capture request started");
+					window.dispatchEvent(new CustomEvent("activate-area-select"));
+					return new Promise((resolve, reject) => {
+						pendingResolve = resolve;
+						pendingReject = reject;
+						const handleAreaComplete = async (event) => {
+							window.removeEventListener("area-selection-complete", handleAreaComplete);
+							const { sourceInfo } = event.detail || {};
+							if (!sourceInfo) {
+								reject(/* @__PURE__ */ new Error("No elements selected in area"));
+								clearPendingRequest();
+								return;
+							}
+							try {
+								const pageInfo = {
+									url: window.location.href,
+									title: document.title,
+									viewport: {
+										width: window.innerWidth,
+										height: window.innerHeight
+									},
+									language: document.documentElement.lang || navigator.language
+								};
+								let screenshot;
+								if (sourceInfo.element) screenshot = await captureElementScreenshot(sourceInfo.element);
+								const elementNotes = {};
+								sourceInfo.relatedElements?.forEach((el, idx) => {
+									if (el.note) elementNotes[idx] = el.note;
+								});
+								const content = [{
+									type: "text",
+									text: formatCopyContext({
+										sourceInfo,
+										includeElement: true,
+										includeStyles: false,
+										includePageInfo: true,
+										pageInfo,
+										relatedElements: sourceInfo.relatedElements,
+										relatedElementIds: sourceInfo.relatedElements?.map((_, idx) => idx),
+										elementNotes: Object.keys(elementNotes).length > 0 ? elementNotes : void 0
+									})
+								}];
+								if (screenshot) {
+									const base64Data = screenshot.replace(/^data:image\/\w+;base64,/, "");
+									content.push({
+										type: "image",
+										data: base64Data,
+										mimeType: "image/png"
+									});
+								}
+								resolve({ content });
+							} catch (error) {
+								const errorMsg = error instanceof Error ? error.message : String(error);
+								reject(/* @__PURE__ */ new Error(`Error processing area selection: ${errorMsg}`));
+							}
+							clearPendingRequest();
+						};
+						window.addEventListener("area-selection-complete", handleAreaComplete);
+						setTimeout(() => {
+							if (pendingReject === reject) {
+								window.removeEventListener("area-selection-complete", handleAreaComplete);
+								clearPendingRequest();
+								reject(/* @__PURE__ */ new Error("Timeout: No area selected"));
+							}
+						}, TIMEOUT_MS);
+					});
+				}
 			}
 		];
 		const getCustomTools = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcpc-tech/unplugin-dev-inspector-mcp",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "description": "Universal dev inspector plugin for React/Vue - inspect component sources and API calls in any bundler",
   "type": "module",
   "license": "MIT",