@mcpc-tech/unplugin-dev-inspector-mcp 0.1.24 → 0.1.26

package/dist/config-updater.js

@@ -1,4 +1,4 @@
-import { i as stripTrailingSlash, n as isChromeDisabled } from "./helpers.js";
+import { a as substituteEnvVars, i as stripTrailingSlash, n as isChromeDisabled } from "./helpers.js";
 import { createRequire } from "node:module";
 import fs, { existsSync, readFileSync } from "fs";
 import path, { dirname, join } from "path";
@@ -87706,9 +87706,54 @@ function getInspectorCSS() {
 	console.warn("⚠️  Inspector CSS not found. Run `pnpm build:client` first.");
 	return null;
 }
+function getSidebarScript() {
+	const possiblePaths = [
+		path.resolve(process.cwd(), "packages/unplugin-dev-inspector/client/dist/sidebar.js"),
+		path.resolve(__dirname, "../../client/dist/sidebar.js"),
+		path.resolve(__dirname, "../client/dist/sidebar.js"),
+		path.resolve(process.cwd(), "node_modules/@mcpc-tech/unplugin-dev-inspector-mcp/client/dist/sidebar.js")
+	];
+	for (const scriptPath of possiblePaths) try {
+		if (fs.existsSync(scriptPath)) return fs.readFileSync(scriptPath, "utf-8");
+	} catch (error) {
+		continue;
+	}
+	return null;
+}
+function getSidebarCSS() {
+	const possiblePaths = [
+		path.resolve(process.cwd(), "packages/unplugin-dev-inspector/client/dist/sidebar.css"),
+		path.resolve(__dirname, "../../client/dist/sidebar.css"),
+		path.resolve(__dirname, "../client/dist/sidebar.css"),
+		path.resolve(process.cwd(), "node_modules/@mcpc-tech/unplugin-dev-inspector-mcp/client/dist/sidebar.css")
+	];
+	for (const cssPath of possiblePaths) try {
+		if (fs.existsSync(cssPath)) return fs.readFileSync(cssPath, "utf-8");
+	} catch (error) {
+		continue;
+	}
+	return null;
+}
+function getSidebarHTML() {
+	const possiblePaths = [
+		path.resolve(process.cwd(), "packages/unplugin-dev-inspector/client/sidebar.html"),
+		path.resolve(__dirname, "../../client/sidebar.html"),
+		path.resolve(__dirname, "../client/sidebar.html"),
+		path.resolve(process.cwd(), "node_modules/@mcpc-tech/unplugin-dev-inspector-mcp/client/sidebar.html")
+	];
+	for (const htmlPath of possiblePaths) try {
+		if (fs.existsSync(htmlPath)) return fs.readFileSync(htmlPath, "utf-8");
+	} catch (error) {
+		continue;
+	}
+	return null;
+}
 function setupInspectorMiddleware(middlewares, config) {
 	let cachedScript = null;
 	let cachedCSS = null;
+	let cachedSidebarScript = null;
+	let cachedSidebarCSS = null;
+	let cachedSidebarHTML = null;
 	let filesChecked = false;
 	middlewares.use((req, res, next$1) => {
 		if (req.url?.startsWith("/__inspector__")) {
@@ -87717,8 +87762,47 @@ function setupInspectorMiddleware(middlewares, config) {
 		if (!filesChecked) {
 			cachedScript = getInspectorScript();
 			cachedCSS = getInspectorCSS();
+			cachedSidebarScript = getSidebarScript();
+			cachedSidebarCSS = getSidebarCSS();
+			cachedSidebarHTML = getSidebarHTML();
 			filesChecked = true;
 		}
+		if (req.url === "/__inspector__/sidebar" || req.url === "/__inspector__/sidebar/") {
+			if (cachedSidebarHTML) {
+				res.statusCode = 200;
+				res.setHeader("Content-Type", "text/html");
+				res.setHeader("Cache-Control", "no-cache");
+				res.end(cachedSidebarHTML);
+				return;
+			}
+			res.statusCode = 404;
+			res.end("Sidebar not found. Run `pnpm build:client` first.");
+			return;
+		}
+		if (req.url === "/__inspector__/sidebar.js") {
+			if (cachedSidebarScript) {
+				res.statusCode = 200;
+				res.setHeader("Content-Type", "application/javascript");
+				res.setHeader("Cache-Control", "no-cache");
+				res.end(cachedSidebarScript);
+				return;
+			}
+			res.statusCode = 404;
+			res.end("Sidebar script not found");
+			return;
+		}
+		if (req.url === "/__inspector__/sidebar.css") {
+			if (cachedSidebarCSS) {
+				res.statusCode = 200;
+				res.setHeader("Content-Type", "text/css");
+				res.setHeader("Cache-Control", "no-cache");
+				res.end(cachedSidebarCSS);
+				return;
+			}
+			res.statusCode = 404;
+			res.end("Sidebar CSS not found");
+			return;
+		}
 		if (req.url === "/__inspector__/inspector.js") {
 			if (cachedScript) {
 				res.statusCode = 200;
@@ -89146,7 +89230,9 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 		}
 		try {
 			const body = await readBody(req);
-			const { agent, envVars } = JSON.parse(body);
+			const { agent: rawAgent, envVars: rawEnvVars } = JSON.parse(body);
+			const agent = substituteEnvVars(rawAgent);
+			const envVars = substituteEnvVars(rawEnvVars);
 			const cwd$1 = process.cwd();
 			const agentKey = getAgentKey(agent.command, agent.args);
 			console.log(`[dev-inspector] [acp] Creating request-scoped session for agent: ${agent.name} (${agentKey})`);
@@ -89261,7 +89347,10 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 		}
 		try {
 			const body = await readBody(req);
-			const { messages, agent, envVars, sessionId, isAutomated, inferContext } = JSON.parse(body);
+			const parsedBody = JSON.parse(body);
+			const { messages, sessionId, isAutomated, inferContext } = parsedBody;
+			const agent = substituteEnvVars(parsedBody.agent);
+			const envVars = substituteEnvVars(parsedBody.envVars);
 			const cwd$1 = process.cwd();
 			let provider;
 			let shouldCleanupProvider = true;

package/dist/helpers.cjs

@@ -21,6 +21,28 @@ function getPublicBaseUrl(options) {
 	if (options?.publicBaseUrl) return stripTrailingSlash(options.publicBaseUrl);
 	return `http://${options?.host || "localhost"}:${options?.port || 5173}`;
 }
+/**
+* Recursively substitute environment variables in an object or array.
+* Replaces strings like "{API_KEY}" with the value of process.env.API_KEY.
+* If the environment variable is not defined, the original string is kept.
+*/
+function substituteEnvVars(value, env = process.env) {
+	if (typeof value === "string") {
+		const match = value.match(/^\{([a-zA-Z0-9_]+)\}$/);
+		if (match) {
+			const envValue = env[match[1]];
+			if (envValue !== void 0) return envValue;
+		}
+		return value;
+	}
+	if (Array.isArray(value)) return value.map((item) => substituteEnvVars(item, env));
+	if (typeof value === "object" && value !== null) {
+		const result = {};
+		for (const key in value) if (Object.prototype.hasOwnProperty.call(value, key)) result[key] = substituteEnvVars(value[key], env);
+		return result;
+	}
+	return value;
+}
 
 //#endregion
 Object.defineProperty(exports, 'getPublicBaseUrl', {
@@ -46,4 +68,10 @@ Object.defineProperty(exports, 'stripTrailingSlash', {
   get: function () {
     return stripTrailingSlash;
   }
+});
+Object.defineProperty(exports, 'substituteEnvVars', {
+  enumerable: true,
+  get: function () {
+    return substituteEnvVars;
+  }
 });

package/dist/helpers.js

@@ -20,6 +20,28 @@ function getPublicBaseUrl(options) {
 	if (options?.publicBaseUrl) return stripTrailingSlash(options.publicBaseUrl);
 	return `http://${options?.host || "localhost"}:${options?.port || 5173}`;
 }
+/**
+* Recursively substitute environment variables in an object or array.
+* Replaces strings like "{API_KEY}" with the value of process.env.API_KEY.
+* If the environment variable is not defined, the original string is kept.
+*/
+function substituteEnvVars(value, env = process.env) {
+	if (typeof value === "string") {
+		const match = value.match(/^\{([a-zA-Z0-9_]+)\}$/);
+		if (match) {
+			const envValue = env[match[1]];
+			if (envValue !== void 0) return envValue;
+		}
+		return value;
+	}
+	if (Array.isArray(value)) return value.map((item) => substituteEnvVars(item, env));
+	if (typeof value === "object" && value !== null) {
+		const result = {};
+		for (const key in value) if (Object.prototype.hasOwnProperty.call(value, key)) result[key] = substituteEnvVars(value[key], env);
+		return result;
+	}
+	return value;
+}
 
 //#endregion
-export { stripTrailingSlash as i, isChromeDisabled as n, isEnvTruthy as r, getPublicBaseUrl as t };
+export { substituteEnvVars as a, stripTrailingSlash as i, isChromeDisabled as n, isEnvTruthy as r, getPublicBaseUrl as t };

package/dist/index.cjs

@@ -47,7 +47,8 @@ function initStdioInterceptor() {
 //#endregion
 //#region src/utils/create-plugin.ts
 const createDevInspectorPlugin = (name, transformFactory) => {
-	return (0, unplugin.createUnplugin)((options = {}) => {
+	return (0, unplugin.createUnplugin)((rawOptions = {}) => {
+		const options = require_helpers.substituteEnvVars(rawOptions);
 		const enabled = options.enabled ?? process.env.NODE_ENV !== "production";
 		const virtualModuleName = options.virtualModuleName ?? "virtual:dev-inspector-mcp";
 		const webpackModuleName = virtualModuleName.replace("virtual:", "");

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import * as unplugin1 from "unplugin";
+import * as unplugin0 from "unplugin";
 import { McpServer } from "@agentclientprotocol/sdk";
 
 //#region src/utils/config-updater.d.ts
@@ -236,10 +236,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 {
@@ -264,7 +264,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.js

@@ -1,5 +1,5 @@
 import { a as addStdioLog, i as setupMcpMiddleware, n as setupAcpMiddleware, o as startStandaloneServer, r as setupInspectorMiddleware, t as updateMcpConfigs } from "./config-updater.js";
-import { i as stripTrailingSlash, n as isChromeDisabled, t as getPublicBaseUrl } from "./helpers.js";
+import { a as substituteEnvVars, i as stripTrailingSlash, n as isChromeDisabled, t as getPublicBaseUrl } from "./helpers.js";
 import { t as launchBrowserWithDevTools } from "./browser-launcher2.js";
 import { createRequire } from "node:module";
 import path from "path";
@@ -43,7 +43,8 @@ function initStdioInterceptor() {
 //#endregion
 //#region src/utils/create-plugin.ts
 const createDevInspectorPlugin = (name, transformFactory) => {
-	return createUnplugin((options = {}) => {
+	return createUnplugin((rawOptions = {}) => {
+		const options = substituteEnvVars(rawOptions);
 		const enabled = options.enabled ?? process.env.NODE_ENV !== "production";
 		const virtualModuleName = options.virtualModuleName ?? "virtual:dev-inspector-mcp";
 		const webpackModuleName = virtualModuleName.replace("virtual:", "");

package/dist/react/react.d.ts

@@ -0,0 +1,203 @@
+import { createClientExecClient } from "@mcpc-tech/cmcp";
+import { McpServer } from "@agentclientprotocol/sdk";
+import { ChatStatus, UIMessage } from "ai";
+
+//#region client/hooks/useMcp.d.ts
+type McpClientType = ReturnType<typeof createClientExecClient>;
+declare function useMcp(): {
+  client: McpClientType | null;
+  isClientReady: boolean;
+};
+//#endregion
+//#region client/hooks/useAgent.d.ts
+declare const useAgent: (defaultAgent: string) => {
+  readonly agent: string;
+  readonly setAgent: (newAgent: string) => void;
+  readonly isReady: boolean;
+};
+//#endregion
+//#region client/constants/types.d.ts
+/**
+ * MCP Server configuration for the Agent Client Protocol
+ * Re-exported from @agentclientprotocol/sdk for convenience
+ */
+type McpServer$1 = McpServer;
+/**
+ * ACP (Agent Client Protocol) options for configuring agent behavior
+ */
+interface AcpOptions {
+  /**
+   * ACP provider mode
+   * @default undefined (skipped if not specified)
+   */
+  acpMode?: string;
+  /**
+   * ACP provider model
+   * @default undefined (skipped if not specified)
+   */
+  acpModel?: string;
+  /**
+   * Delay in milliseconds after session is initialized to ensure mcp server is ready,
+   * some agents may connect mcp asynchronously after session init
+   * @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;
+  /**
+   * List of MCP (Model Context Protocol) servers the agent should connect to
+   * @default []
+   */
+  mcpServers?: McpServer$1[];
+}
+interface Agent extends AcpOptions {
+  name: string;
+  command: string;
+  args?: string[];
+  env: Array<{
+    key: string;
+    required: boolean;
+  }>;
+  authMethodId?: string;
+  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[];
+}
+/** MCP Prompt argument schema */
+interface PromptArgument {
+  name: string;
+  description?: string;
+  required?: boolean;
+}
+/** MCP Prompt definition (matches MCP spec + template extension) */
+interface Prompt {
+  name: string;
+  title?: string;
+  description?: string;
+  /** The actual content/template to insert into the input when selected */
+  template?: string;
+  arguments?: PromptArgument[];
+  icons?: Array<{
+    src: string;
+    mimeType?: string;
+    sizes?: string[];
+  }>;
+}
+//#endregion
+//#region client/hooks/usePrompts.d.ts
+declare function usePrompts(mcpClient: McpClientType | null): {
+  prompts: Prompt[];
+  isLoading: boolean;
+};
+//#endregion
+//#region client/types.d.ts
+
+interface ConsoleMessage {
+  msgid: number;
+  level: string;
+  text: string;
+  timestamp?: number;
+}
+interface NetworkRequest {
+  reqid: number;
+  method: string;
+  url: string;
+  status: string;
+  timestamp?: number;
+}
+interface StdioMessage {
+  stdioid: number;
+  stream: "stdout" | "stderr";
+  data: string;
+  timestamp?: number;
+}
+interface PageInfo {
+  url: string;
+  title: string;
+  viewport: {
+    width: number;
+    height: number;
+  };
+  language: string;
+}
+//#endregion
+//#region client/hooks/useContextData.d.ts
+interface ContextData {
+  consoleMessages: ConsoleMessage[];
+  networkRequests: NetworkRequest[];
+  stdioMessages: StdioMessage[];
+  loading: boolean;
+  error: string | null;
+}
+/**
+ * Hook to fetch and manage context data from chrome_devtools MCP tool
+ * @param client - MCP client instance (passed from useMcp hook in parent component)
+ * @param isClientReady - whether the client is ready
+ * @param isEnabled - whether to enable data fetching (default: true)
+ */
+declare function useContextData(client: McpClientType | null, isClientReady: boolean, isEnabled?: boolean): {
+  refresh: () => Promise<void>;
+  consoleMessages: ConsoleMessage[];
+  networkRequests: NetworkRequest[];
+  stdioMessages: StdioMessage[];
+  loading: boolean;
+  error: string | null;
+};
+//#endregion
+//#region client/hooks/useIslandState.d.ts
+interface IslandContext {
+  uiState: "expanded" | "collapsed";
+  chatStatus: ChatStatus;
+  toolName: string | null;
+  displayText: string;
+  isStreaming: boolean;
+  lastMessage?: UIMessage;
+}
+/**
+ * Derives the Dynamic Island state from AI SDK messages and status
+ */
+declare function useIslandState(messages: UIMessage[], status: ChatStatus, isExpanded: boolean): IslandContext;
+//#endregion
+//#region client/hooks/usePageInfo.d.ts
+/**
+ * Hook to capture current page information
+ * KISS: Captures only essential page context (URL, title, viewport, language)
+ */
+declare function usePageInfo(): PageInfo | null;
+//#endregion
+//#region client/utils/config-loader.d.ts
+/**
+ * Get the dev server base URL from injected config.
+ * Uses __DEV_INSPECTOR_CONFIG__ set by the plugin at build time.
+ * Falls back to window.location.origin for sidebar pages.
+ */
+declare function getDevServerBaseUrl(): string;
+/**
+ * Get available agents (merged with custom configuration and filtered by visibleAgents)
+ */
+declare function getAvailableAgents(): Promise<Agent[]>;
+//#endregion
+export { type Agent, type ContextData, type McpClientType, type Prompt, getAvailableAgents, getDevServerBaseUrl, useAgent, useContextData, useIslandState, useMcp, usePageInfo, usePrompts };