@mcpc-tech/unplugin-dev-inspector-mcp 0.0.37 → 0.0.39

package/dist/config-updater.js

@@ -2,7 +2,7 @@ import { createRequire } from "node:module";
 import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
 import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
 import { randomUUID } from "crypto";
-import { CallToolRequestSchema, CompleteRequestSchema, ErrorCode, GetPromptRequestSchema, JSONRPCMessageSchema, ListPromptsRequestSchema, ListResourcesRequestSchema, ListToolsRequestSchema, McpError, PingRequestSchema, ReadResourceRequestSchema, SetLevelRequestSchema, SubscribeRequestSchema, UnsubscribeRequestSchema } from "@modelcontextprotocol/sdk/types.js";
+import { CallToolRequestSchema, CallToolResultSchema, CompleteRequestSchema, ErrorCode, GetPromptRequestSchema, JSONRPCMessageSchema, ListPromptsRequestSchema, ListResourcesRequestSchema, ListToolsRequestSchema, McpError, PingRequestSchema, ReadResourceRequestSchema, SetLevelRequestSchema, SubscribeRequestSchema, UnsubscribeRequestSchema } from "@modelcontextprotocol/sdk/types.js";
 import z$1, { z } from "zod";
 import { Server } from "@modelcontextprotocol/sdk/server/index.js";
 import { Readable, Writable } from "node:stream";
@@ -17,7 +17,8 @@ import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/
 import { InMemoryTransport } from "@modelcontextprotocol/sdk/inMemory.js";
 import process$1, { cwd } from "node:process";
 import { homedir } from "os";
-import fs, { existsSync } from "fs";
+import { execSync } from "child_process";
+import fs, { existsSync, readFileSync } from "fs";
 import * as http from "http";
 import * as https from "https";
 import * as zlib from "zlib";
@@ -27,6 +28,7 @@ import { fileURLToPath as fileURLToPath$1 } from "url";
 import { asSchema, convertToModelMessages, jsonSchema, streamText, tool } from "ai";
 import { ClientSideConnection, PROTOCOL_VERSION, ndJsonStream, planEntrySchema } from "@agentclientprotocol/sdk";
 import { spawn } from "node:child_process";
+import { createRequire as createRequire$1 } from "module";
 import { mkdir, readFile, writeFile } from "fs/promises";
 
 //#region rolldown:runtime
@@ -83480,6 +83482,19 @@ async function getOrCreateMcpClient(defKey, def) {
 		mcpClientConnecting.delete(defKey);
 	}
 }
+async function releaseMcpClient(defKey) {
+	const entry = mcpClientPool.get(defKey);
+	if (!entry) return;
+	entry.refCount -= 1;
+	if (entry.refCount <= 0) {
+		mcpClientPool.delete(defKey);
+		try {
+			await entry.client.close();
+		} catch (err) {
+			console.error("Error closing MCP client:", err);
+		}
+	}
+}
 var cleanupAllPooledClients = async () => {
 	const entries = Array.from(mcpClientPool.entries());
 	mcpClientPool.clear();
@@ -83537,7 +83552,12 @@ async function composeMcpDepTools(mcpConfig, filterIn) {
 			console.error(`Error creating MCP client for ${name}:`, error);
 		}
 	}
-	const cleanupClients = async () => {};
+	const cleanupClients = async () => {
+		await Promise.all(acquiredKeys.map((k) => releaseMcpClient(k)));
+		acquiredKeys.length = 0;
+		Object.keys(allTools).forEach((key) => delete allTools[key]);
+		Object.keys(allClients).forEach((key) => delete allClients[key]);
+	};
 	return {
 		tools: allTools,
 		clients: allClients,
@@ -86339,6 +86359,17 @@ var ComposableMCPServer = class extends Server {
 			server: this,
 			toolNames: Object.keys(allTools)
 		});
+		this.onclose = async () => {
+			await cleanupClients();
+			await this.disposePlugins();
+			await this.logger.info(`[${name}] Event: closed - cleaned up dependent clients and plugins`);
+		};
+		this.onerror = async (error) => {
+			await this.logger.error(`[${name}] Event: error - ${error?.stack ?? String(error)}`);
+			await cleanupClients();
+			await this.disposePlugins();
+			await this.logger.info(`[${name}] Action: cleaned up dependent clients and plugins`);
+		};
 		const toolNameToDetailList = Object.entries(allTools);
 		const publicToolNames = this.getPublicToolNames();
 		const hiddenToolNames = this.getHiddenToolNames();
@@ -86851,6 +86882,7 @@ var ConnectionManager = class {
 		transport.onclose = () => this.removeTransport(sessionId);
 	}
 	removeTransport(sessionId) {
+		console.log(`[dev-inspector] [connection-manager] Removing transport: ${sessionId}`);
 		delete this.transports[sessionId];
 		for (const [_clientId, sessionIds] of this.watchersByClientId) if (sessionIds.has(sessionId)) {
 			sessionIds.delete(sessionId);
@@ -86881,6 +86913,7 @@ var ConnectionManager = class {
 			}
 			sessionsToRemove.push(existingSessionId);
 		}
+		if (sessionsToRemove.length > 0) console.log(`[dev-inspector] [connection-manager] Cleaned up ${sessionsToRemove.length} previous sessions for clientId=${clientId} (new session=${newSessionId})`);
 		for (const sessionId of sessionsToRemove) sessionIds.delete(sessionId);
 	}
 	handleInspectorConnection(sessionId) {
@@ -87091,11 +87124,17 @@ async function handleSseConnection(req, res, serverContext, connectionManager) {
 		const url = new URL(req.url ?? "", `http://${host}:${port}`);
 		const transport = new SSEServerTransport("/__mcp__/messages", res);
 		const sessionId = transport.sessionId;
-		const clientId = url.searchParams.get("clientId") || "agent";
+		const clientId = url.searchParams.get("clientId") || `agent-${sessionId}`;
 		const puppetId = url.searchParams.get("puppetId") || "inspector";
+		console.log(`[dev-inspector] [sse] New connection request: clientId=${clientId}, puppetId=${puppetId}, sessionId=${sessionId}`);
 		connectionManager.registerTransport(sessionId, transport);
-		if (clientId === "inspector") connectionManager.handleInspectorConnection(sessionId);
-		else connectionManager.handleWatcherConnection(sessionId, clientId, puppetId, transport);
+		if (clientId === "inspector") {
+			console.log(`[dev-inspector] [sse] Handling Inspector connection: ${sessionId}`);
+			connectionManager.handleInspectorConnection(sessionId);
+		} else {
+			console.log(`[dev-inspector] [sse] Handling Watcher connection: ${sessionId} (binding to ${puppetId})`);
+			connectionManager.handleWatcherConnection(sessionId, clientId, puppetId, transport);
+		}
 		await mcpServer.connect(transport);
 	} catch (error) {
 		console.error("Error establishing SSE connection:", error);
@@ -87235,7 +87274,7 @@ function setupInspectorMiddleware(middlewares, config) {
 }
 
 //#endregion
-//#region ../../node_modules/.pnpm/@mcpc-tech+acp-ai-provider@0.1.41/node_modules/@mcpc-tech/acp-ai-provider/index.mjs
+//#region ../../node_modules/.pnpm/@mcpc-tech+acp-ai-provider@0.1.43/node_modules/@mcpc-tech/acp-ai-provider/index.mjs
 createRequire(import.meta.url);
 function formatToolError(toolResult) {
 	if (!toolResult || toolResult.length === 0) return "Unknown tool error";
@@ -87678,7 +87717,6 @@ var ACPLanguageModel = class {
 	*/
 	parseToolCall(update$1) {
 		if (update$1.sessionUpdate !== "tool_call") throw new Error("Invalid update type for parseToolCall");
-		console.log("Parsing tool call update:", JSON.stringify(update$1, null, 2));
 		return {
 			toolCallId: update$1.toolCallId,
 			toolName: update$1.title || update$1.toolCallId,
@@ -87980,11 +88018,6 @@ var ACPLanguageModel = class {
 					this.currentThinkingId = null;
 				}
 				const { toolCallId, toolName, toolInput } = this.parseToolCall(update$1);
-				console.log(`Parsing tool call: ${JSON.stringify({
-					toolCallId,
-					toolName,
-					toolInput
-				}, null, 2)}`);
 				const existingToolCall = this.toolCallsMap.get(toolCallId);
 				const hasInput = toolInput && typeof toolInput === "object" && Object.keys(toolInput).length > 0;
 				if (!existingToolCall) {
@@ -88011,13 +88044,14 @@ var ACPLanguageModel = class {
 					});
 				} else if (!existingToolCall.inputAvailable && hasInput) {
 					existingToolCall.inputAvailable = true;
+					if (update$1.title && existingToolCall.name !== update$1.title && update$1.title !== toolCallId) existingToolCall.name = update$1.title;
 					controller.enqueue({
 						type: "tool-call",
 						toolCallId,
 						toolName: ACP_PROVIDER_AGENT_DYNAMIC_TOOL_NAME2,
 						input: JSON.stringify({
 							toolCallId,
-							toolName,
+							toolName: existingToolCall.name,
 							args: toolInput
 						})
 					});
@@ -88044,13 +88078,14 @@ var ACPLanguageModel = class {
 					}
 					if (!toolInfo.inputAvailable) {
 						toolInfo.inputAvailable = true;
+						if (update$1.title && toolInfo.name !== update$1.title && update$1.title !== toolCallId) toolInfo.name = update$1.title;
 						controller.enqueue({
 							type: "tool-call",
 							toolCallId,
 							toolName: ACP_PROVIDER_AGENT_DYNAMIC_TOOL_NAME2,
 							input: JSON.stringify({
 								toolCallId,
-								toolName,
+								toolName: toolInfo.name,
 								args: {}
 							})
 						});
@@ -88076,13 +88111,14 @@ var ACPLanguageModel = class {
 					});
 				} else if (!toolInfo.inputAvailable) {
 					toolInfo.inputAvailable = true;
+					if (update$1.title && toolInfo.name !== update$1.title && update$1.title !== toolCallId) toolInfo.name = update$1.title;
 					controller.enqueue({
 						type: "tool-call",
 						toolCallId,
 						toolName: ACP_PROVIDER_AGENT_DYNAMIC_TOOL_NAME2,
 						input: JSON.stringify({
 							toolCallId,
-							toolName,
+							toolName: toolInfo.name,
 							args: {}
 						})
 					});
@@ -88315,9 +88351,52 @@ function createACPProvider(config) {
 	return new ACPProvider(config);
 }
 
+//#endregion
+//#region src/utils/npm-package.ts
+/**
+* Resolve npm package bin entry point
+* Returns the absolute path to the bin file, or null if resolution fails
+*/
+function resolveNpmPackageBin(packageName) {
+	try {
+		const packageJsonPath = createRequire$1(import.meta.url).resolve(`${packageName}/package.json`);
+		const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
+		let binPath;
+		if (typeof packageJson.bin === "string") binPath = packageJson.bin;
+		else if (typeof packageJson.bin === "object") {
+			const binEntries = Object.entries(packageJson.bin);
+			const matchingEntry = binEntries.find(([name]) => name === packageJson.name.split("/").pop());
+			binPath = matchingEntry ? matchingEntry[1] : binEntries[0]?.[1];
+		}
+		if (!binPath) {
+			console.warn(`[dev-inspector] [acp] No bin entry found in ${packageName}/package.json`);
+			return null;
+		}
+		const binFullPath = join(dirname(packageJsonPath), binPath);
+		console.log(`[dev-inspector] [acp] Resolved ${packageName} bin to: ${binFullPath}`);
+		return binFullPath;
+	} catch (error) {
+		console.warn(`[dev-inspector] [acp] Failed to resolve npm package ${packageName}:`, error);
+		return null;
+	}
+}
+
 //#endregion
 //#region src/middleware/acp-middleware.ts
 /**
+* Check if a command exists in the system PATH
+* Skips check for npx since it always exists
+*/
+function checkCommandExists(command) {
+	if (command === "npx" || command === "node") return true;
+	try {
+		execSync(`which ${command}`, { stdio: "ignore" });
+		return true;
+	} catch {
+		return false;
+	}
+}
+/**
 * Provider manager - stores one provider per agent config
 * Key: agentKey (command:args), Value: ProviderEntry
 */
@@ -88370,10 +88449,13 @@ async function loadMcpToolsV5(transport) {
 			inputSchema: jsonSchema(toolInfo.inputSchema),
 			execute: async (args) => {
 				console.log(`[dev-inspector] [acp] Executing MCP tool: ${toolName}`);
-				return await callMcpMethodViaTransport(transport, "tools/call", {
+				const result = await callMcpMethodViaTransport(transport, "tools/call", {
 					name: toolName,
 					arguments: args
 				});
+				const parsedResult = CallToolResultSchema.safeParse(result);
+				if (!parsedResult.success) return result;
+				return parsedResult.data?.content?.map((item) => item?.text).join("\n");
 			}
 		});
 	}
@@ -88381,12 +88463,33 @@ async function loadMcpToolsV5(transport) {
 	return tools;
 }
 /**
-* Get the Inspector transport from the connection manager
+* Default system instructions for DevInspector - provides AI guidance
+*/
+const DEFAULT_SYSTEM_INSTRUCTIONS = `# DevInspector Context
+
+You are connected to a web app with DevInspector. Available tools:
+
+- **list_inspections**: Check pending element inspections from user
+- **capture_element_context**: Activate visual selector to capture UI elements
+- **update_inspection_status**: Update inspection status with progress/results
+- **execute_page_script**: Run JavaScript in browser context
+- **chrome_devtools**: Access Chrome DevTools for network, console, performance
+
+Workflow: Check \`list_inspections\` first. If there are pending items, help resolve them. Otherwise, assist with the user's request.`;
+/**
+* Get an active transport from the connection manager
 */
 function getActiveTransport() {
 	const connectionManager = getConnectionManager();
 	if (!connectionManager) return null;
-	return connectionManager.getInspectorTransport();
+	return connectionManager.getInspectorTransport() || connectionManager.transports[Object.keys(connectionManager.transports)[0]];
+}
+/**
+* Get specifically the inspector transport for context and tools
+*/
+function getInspectorTransport() {
+	const connectionManager = getConnectionManager();
+	return connectionManager ? connectionManager.getInspectorTransport() : null;
 }
 function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 	/**
@@ -88433,10 +88536,28 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 					console.log(`[dev-inspector] [acp] Reusing existing provider for ${agent.name}`);
 					provider = providerEntry.provider;
 				} else {
+					if (!checkCommandExists(agent.command)) {
+						const hints = [`Agent "${agent.name}" command not found: "${agent.command}"`];
+						if (agent.installCommand) hints.push(`Install with: ${agent.installCommand}`);
+						if (agent.configHint) hints.push(agent.configHint);
+						if (agent.configLink) hints.push(`Documentation: ${agent.configLink}`);
+						console.error(`\n${hints.join("\n")}\n`);
+						return;
+					}
 					console.log(`[dev-inspector] [acp] Creating new global provider for ${agent.name}`);
+					let command = agent.command;
+					let args = agent.args;
+					if (agent.npmPackage) {
+						const binPath = resolveNpmPackageBin(agent.npmPackage);
+						if (binPath) {
+							command = binPath;
+							args = agent.npmArgs || [];
+							console.log(`[dev-inspector] [acp] Using resolved npm package: ${agent.npmPackage}`);
+						} else console.log(`[dev-inspector] [acp] Failed to resolve npm package, falling back to: ${agent.command}`);
+					}
 					provider = createACPProvider({
-						command: agent.command,
-						args: agent.args,
+						command,
+						args,
 						env: {
 							...process.env,
 							...envVars
@@ -88459,7 +88580,7 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 				}
 				console.log(`[dev-inspector] [acp] Spawning new process/session for ${agent.name}`);
 				const initPromise = (async () => {
-					const transport = getActiveTransport();
+					const transport = getInspectorTransport() || getActiveTransport();
 					let initialTools = {};
 					if (transport) try {
 						const rawTools = await loadMcpToolsV5(transport);
@@ -88491,6 +88612,7 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 			res.setHeader("Content-Type", "application/json");
 			res.end(JSON.stringify({ sessionId }));
 		} catch (error) {
+			if (error instanceof Error && error.message.includes("command not found")) throw error;
 			console.error("ACP Init Session Error:", error);
 			if (!res.headersSent) {
 				res.statusCode = 500;
@@ -88570,9 +88692,19 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 				shouldCleanupProvider = false;
 			} else {
 				console.log(`[dev-inspector] [acp] Creating new provider (no session found or provided)`);
+				let command = agent.command;
+				let args = agent.args;
+				if (agent.npmPackage) {
+					const binPath = resolveNpmPackageBin(agent.npmPackage);
+					if (binPath) {
+						command = binPath;
+						args = agent.npmArgs || [];
+						console.log(`[dev-inspector] [acp] Using resolved npm package: ${agent.npmPackage}`);
+					}
+				}
 				provider = createACPProvider({
-					command: agent.command,
-					args: agent.args,
+					command,
+					args,
 					env: {
 						...process.env,
 						...envVars
@@ -88585,7 +88717,7 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 				});
 				await provider.initSession();
 			}
-			const transport = getActiveTransport();
+			const transport = getInspectorTransport() || getActiveTransport();
 			let mcpTools = {};
 			if (transport) mcpTools = await loadMcpToolsV5(transport);
 			else console.warn("[dev-inspector] [acp] No active MCP transport available, tools will not be loaded");
@@ -88602,10 +88734,21 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 				abortController.abort();
 				if (shouldCleanupProvider) provider.cleanup();
 			});
+			const systemPrompt = agent.acpSystemPrompt ?? acpOptions?.acpSystemPrompt ?? DEFAULT_SYSTEM_INSTRUCTIONS;
+			const enhancedMessages = convertToModelMessages(messages).map((msg, index$1) => {
+				if (index$1 === 0 && msg.role === "user" && Array.isArray(msg.content)) return {
+					...msg,
+					content: [{
+						type: "text",
+						text: `<system_instructions>\n${systemPrompt}\n</system_instructions>\n\n`
+					}, ...msg.content]
+				};
+				return msg;
+			});
 			const response = streamText({
 				model: provider.languageModel(model, mode),
 				includeRawChunks: true,
-				messages: convertToModelMessages(messages),
+				messages: enhancedMessages,
 				abortSignal: abortController.signal,
 				tools: acpTools(mcpTools),
 				onError: (error) => {

package/dist/index.cjs

@@ -40,6 +40,7 @@ async function launchBrowserWithDevTools(options) {
 				chrome_navigate_page: { url }
 			}
 		});
+		await new Promise((r) => setTimeout(r, 1e3));
 		return true;
 	} catch (error) {
 		console.error(`[dev-inspector] ⚠️  Failed to auto-open browser:`, error instanceof Error ? error.message : String(error));
@@ -204,6 +205,7 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 					}
 					require_config_updater.setupInspectorMiddleware(server.middlewares, {
 						agents: options.agents,
+						visibleAgents: options.visibleAgents,
 						defaultAgent: options.defaultAgent,
 						showInspectorBar: options.showInspectorBar
 					});
@@ -266,6 +268,7 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 						}
 						require_config_updater.setupInspectorMiddleware(server, {
 							agents: options.agents,
+							visibleAgents: options.visibleAgents,
 							defaultAgent: options.defaultAgent
 						});
 						callback();

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import * as unplugin1 from "unplugin";
+import * as unplugin0 from "unplugin";
 
 //#region src/utils/config-updater.d.ts
 type EditorId = "cursor" | "vscode" | "windsurf" | "claude-code" | "antigravity";
@@ -52,6 +52,11 @@ interface AcpOptions {
    * @default undefined (skipped if not specified)
    */
   acpDelay?: number;
+  /**
+   * Custom system instructions to prepend to user messages
+   * @default undefined (uses built-in DevInspector context)
+   */
+  acpSystemPrompt?: string;
 }
 interface Agent extends AcpOptions {
   name: string;
@@ -65,6 +70,26 @@ interface Agent extends AcpOptions {
   meta?: {
     icon?: string;
   };
+  /**
+   * Configuration hint text to help users set up the agent
+   */
+  configHint?: string;
+  /**
+   * Link to configuration documentation or setup guide
+   */
+  configLink?: string;
+  /**
+   * Installation command for the agent (shown in error messages)
+   */
+  installCommand?: string;
+  /**
+   * NPM package name for agents that use npm packages (for faster loading via require.resolve)
+   */
+  npmPackage?: string;
+  /**
+   * Arguments to pass when using npm package resolution (separate from npx args)
+   */
+  npmArgs?: string[];
 }
 //#endregion
 //#region src/utils/create-plugin.d.ts
@@ -94,6 +119,13 @@ interface DevInspectorOptions extends McpConfigOptions, AcpOptions {
    * @see AVAILABLE_AGENTS https://github.com/mcpc-tech/dev-inspector-mcp/blob/main/packages/unplugin-dev-inspector/client/constants/agents.ts
    */
   agents?: Agent[];
+  /**
+   * Filter which agents are visible in the UI
+   * Only agents with names in this list will be shown (applies after merging custom agents)
+   * If not specified or empty array, all agents are visible
+   * @example ['Claude Code', 'Gemini CLI', 'My Custom Agent']
+   */
+  visibleAgents?: string[];
   /**
    * Default agent name to use
    * @default "Claude Code"
@@ -134,10 +166,10 @@ interface DevInspectorOptions extends McpConfigOptions, AcpOptions {
 }
 //#endregion
 //#region src/core.d.ts
-declare const unplugin: unplugin1.UnpluginInstance<DevInspectorOptions | undefined, boolean>;
+declare const unplugin: unplugin0.UnpluginInstance<DevInspectorOptions | undefined, boolean>;
 //#endregion
 //#region src/core-external.d.ts
-declare const unpluginExternal: unplugin1.UnpluginInstance<DevInspectorOptions | undefined, boolean>;
+declare const unpluginExternal: unplugin0.UnpluginInstance<DevInspectorOptions | undefined, boolean>;
 //#endregion
 //#region src/turbopack.d.ts
 interface TurbopackDevInspectorOptions extends DevInspectorOptions {
@@ -162,7 +194,7 @@ interface TurbopackDevInspectorOptions extends DevInspectorOptions {
 declare function turbopackDevInspector(options?: TurbopackDevInspectorOptions): any;
 //#endregion
 //#region src/index.d.ts
-declare const external: unplugin1.UnpluginInstance<DevInspectorOptions | undefined, boolean>;
+declare const external: unplugin0.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/index.d.ts

@@ -52,6 +52,11 @@ interface AcpOptions {
    * @default undefined (skipped if not specified)
    */
   acpDelay?: number;
+  /**
+   * Custom system instructions to prepend to user messages
+   * @default undefined (uses built-in DevInspector context)
+   */
+  acpSystemPrompt?: string;
 }
 interface Agent extends AcpOptions {
   name: string;
@@ -65,6 +70,26 @@ interface Agent extends AcpOptions {
   meta?: {
     icon?: string;
   };
+  /**
+   * Configuration hint text to help users set up the agent
+   */
+  configHint?: string;
+  /**
+   * Link to configuration documentation or setup guide
+   */
+  configLink?: string;
+  /**
+   * Installation command for the agent (shown in error messages)
+   */
+  installCommand?: string;
+  /**
+   * NPM package name for agents that use npm packages (for faster loading via require.resolve)
+   */
+  npmPackage?: string;
+  /**
+   * Arguments to pass when using npm package resolution (separate from npx args)
+   */
+  npmArgs?: string[];
 }
 //#endregion
 //#region src/utils/create-plugin.d.ts
@@ -94,6 +119,13 @@ interface DevInspectorOptions extends McpConfigOptions, AcpOptions {
    * @see AVAILABLE_AGENTS https://github.com/mcpc-tech/dev-inspector-mcp/blob/main/packages/unplugin-dev-inspector/client/constants/agents.ts
    */
   agents?: Agent[];
+  /**
+   * Filter which agents are visible in the UI
+   * Only agents with names in this list will be shown (applies after merging custom agents)
+   * If not specified or empty array, all agents are visible
+   * @example ['Claude Code', 'Gemini CLI', 'My Custom Agent']
+   */
+  visibleAgents?: string[];
   /**
    * Default agent name to use
    * @default "Claude Code"

package/dist/index.js

@@ -36,6 +36,7 @@ async function launchBrowserWithDevTools(options) {
 				chrome_navigate_page: { url }
 			}
 		});
+		await new Promise((r) => setTimeout(r, 1e3));
 		return true;
 	} catch (error) {
 		console.error(`[dev-inspector] ⚠️  Failed to auto-open browser:`, error instanceof Error ? error.message : String(error));
@@ -200,6 +201,7 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 					}
 					setupInspectorMiddleware(server.middlewares, {
 						agents: options.agents,
+						visibleAgents: options.visibleAgents,
 						defaultAgent: options.defaultAgent,
 						showInspectorBar: options.showInspectorBar
 					});
@@ -262,6 +264,7 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 						}
 						setupInspectorMiddleware(server, {
 							agents: options.agents,
+							visibleAgents: options.visibleAgents,
 							defaultAgent: options.defaultAgent
 						});
 						callback();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcpc-tech/unplugin-dev-inspector-mcp",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "description": "Universal dev inspector plugin for React/Vue - inspect component sources and API calls in any bundler",
   "type": "module",
   "license": "MIT",
@@ -113,7 +113,7 @@
     "@babel/parser": "^7.28.5",
     "@babel/traverse": "^7.28.5",
     "@code-inspector/core": "^1.3.0",
-    "@mcpc-tech/acp-ai-provider": "^0.1.41",
+    "@mcpc-tech/acp-ai-provider": "^0.1.43",
     "@mcpc-tech/cmcp": "^0.0.15",
     "@mcpc-tech/core": "^0.3.8",
     "@modelcontextprotocol/sdk": "^1.20.1",
@@ -168,6 +168,12 @@
     "use-stick-to-bottom": "^1.1.1",
     "zod": "^3.24.1"
   },
+  "optionalDependencies": {
+    "@blowmage/cursor-agent-acp": "^0.1.0",
+    "@yaonyan/droid-acp": "^0.0.8",
+    "@zed-industries/claude-code-acp": "^0.12.4",
+    "@zed-industries/codex-acp": "^0.7.1"
+  },
   "devDependencies": {
     "@babel/types": "^7.28.5",
     "@tailwindcss/postcss": "^4.1.14",