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

package/dist/cli.js

@@ -67,6 +67,20 @@ function detectConfigFile(cwd, patterns) {
 	return null;
 }
 /**
+* Detects the indentation style used in the code.
+* Simple approach: find the first indented line and use its indent.
+*/
+function detectIndent(code) {
+	const match = code.match(/\n(\t+|[ ]+)(?=\S)/);
+	if (match) {
+		const indent = match[1];
+		if (indent[0] === "	") return "	";
+		if (indent.length >= 4 && indent.startsWith("    ")) return "    ";
+		if (indent.length >= 2) return "  ";
+	}
+	return "  ";
+}
+/**
 * Calculates the character position to insert an import, based on the last import line.
 */
 function getInsertPosition(code, lastImportLine) {
@@ -81,24 +95,29 @@ function getInsertPosition(code, lastImportLine) {
 function sanitizePath(path$1) {
 	return path$1.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "");
 }
-function serializeObject(obj, indentLevel) {
+/**
+* Serializes an object to a formatted string.
+* @param obj - The object to serialize
+* @param baseIndent - The base indentation unit (e.g., "  " for 2 spaces)
+* @param depth - Current nesting depth
+*/
+function serializeObject(obj, baseIndent = "  ", depth = 0) {
 	if (obj === null) return "null";
 	if (obj === void 0) return "undefined";
 	if (typeof obj === "string") return `'${sanitizePath(obj)}'`;
 	if (typeof obj !== "object") return String(obj);
-	if (Array.isArray(obj)) return `[${obj.map((item) => serializeObject(item, indentLevel + 2)).join(", ")}]`;
+	if (Array.isArray(obj)) return `[${obj.map((item) => serializeObject(item, baseIndent, depth)).join(", ")}]`;
 	const keys = Object.keys(obj);
 	if (keys.length === 0) return "{}";
-	const indent = " ".repeat(indentLevel);
-	const propIndent = " ".repeat(indentLevel + 2);
+	const indent = baseIndent.repeat(depth);
+	const propIndent = baseIndent.repeat(depth + 1);
 	return `{\n${keys.map((key) => {
-		const value = serializeObject(obj[key], indentLevel + 2);
+		const value = serializeObject(obj[key], baseIndent, depth + 1);
 		return `${propIndent}${/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key) ? key : `'${key}'`}: ${value}`;
 	}).join(",\n")}\n${indent}}`;
 }
 /**
 * Parses a Babel ObjectExpression node into a simple JS object (shallow).
-* Helper for KISS principle to avoid duplicating parsing logic.
 */
 function parseObjectExpression(node) {
 	const result = {};
@@ -113,6 +132,15 @@ function parseObjectExpression(node) {
 	});
 	return result;
 }
+/**
+* Unwraps TS expressions like 'as any', '!', etc. to get the underlying expression.
+*/
+function unwrapNode(node) {
+	if (!node) return node;
+	let current = node;
+	while (current.type === "TSAsExpression" || current.type === "TSNonNullExpression" || current.type === "TSSatisfiesExpression" || current.type === "TSTypeAssertion") current = current.expression;
+	return current;
+}
 
 //#endregion
 //#region src/commands/setup/frameworks/vite.ts
@@ -126,6 +154,7 @@ function transformViteConfig(code, options) {
 			sourceType: "module",
 			plugins: ["typescript", "jsx"]
 		});
+		const indent = detectIndent(code);
 		let lastImportEnd = 0;
 		let pluginsArrayStart = -1;
 		let firstPluginStart = -1;
@@ -140,38 +169,35 @@ function transformViteConfig(code, options) {
 			ImportDeclaration(path$1) {
 				if (path$1.node.source.value === PLUGIN_IMPORT$2) {
 					hasImport = true;
-					const defaultSpecifier = path$1.node.specifiers.find((s$1) => s$1.type === "ImportDefaultSpecifier");
-					if (defaultSpecifier && defaultSpecifier.local.type === "Identifier") importedVarName = defaultSpecifier.local.name;
+					const spec = path$1.node.specifiers.find((s$1) => s$1.type === "ImportDefaultSpecifier");
+					if (spec?.local.type === "Identifier") importedVarName = spec.local.name;
 				}
 				if (path$1.node.loc) lastImportEnd = Math.max(lastImportEnd, path$1.node.loc.end.line);
 			},
 			ObjectProperty(path$1) {
 				if (path$1.node.key.type === "Identifier" && path$1.node.key.name === "plugins" && path$1.node.value.type === "ArrayExpression") {
 					hasPluginsArray = true;
-					if (path$1.node.value.start !== null && path$1.node.value.start !== void 0) {
-						pluginsArrayStart = path$1.node.value.start;
-						const elements = path$1.node.value.elements;
-						elements.forEach((element) => {
-							if (element && element.type === "CallExpression" && element.callee.type === "MemberExpression" && element.callee.object.type === "Identifier" && element.callee.object.name === importedVarName && element.callee.property.type === "Identifier" && element.callee.property.name === "vite") {
-								hasPluginUsage = true;
-								if (typeof element.start === "number" && typeof element.end === "number") {
-									usageStart = element.start;
-									usageEnd = element.end;
-								}
-								if (element.arguments.length > 0 && element.arguments[0].type === "ObjectExpression") existingOptionsNode = element.arguments[0];
+					pluginsArrayStart = path$1.node.value.start ?? -1;
+					const elements = path$1.node.value.elements;
+					elements.forEach((rawElement) => {
+						const element = unwrapNode(rawElement);
+						if (element && element.type === "CallExpression" && element.callee.type === "MemberExpression" && element.callee.object.type === "Identifier" && element.callee.object.name === importedVarName && element.callee.property.type === "Identifier" && element.callee.property.name === "vite") {
+							hasPluginUsage = true;
+							if (typeof element.start === "number" && typeof element.end === "number") {
+								usageStart = element.start;
+								usageEnd = element.end;
 							}
-						});
-						if (elements.length > 0 && typeof elements[0]?.start === "number") firstPluginStart = elements[0].start;
-					}
+							if (element.arguments.length > 0 && element.arguments[0].type === "ObjectExpression") existingOptionsNode = element.arguments[0];
+						}
+					});
+					if (elements.length > 0 && elements[0]?.start != null) firstPluginStart = elements[0].start;
 				}
 			}
 		});
 		if (!hasImport) {
 			const importLine = `import ${PLUGIN_VAR_NAME$2} from '${PLUGIN_IMPORT$2}';\n`;
-			if (lastImportEnd > 0) {
-				const insertPos = getInsertPosition(code, lastImportEnd);
-				s.appendLeft(insertPos, importLine);
-			} else s.prepend(importLine);
+			if (lastImportEnd > 0) s.appendLeft(getInsertPosition(code, lastImportEnd), importLine);
+			else s.prepend(importLine);
 		}
 		const cliConfig = {};
 		if (options.entryPath) {
@@ -185,56 +211,42 @@ function transformViteConfig(code, options) {
 		if (options.defaultAgent !== void 0) cliConfig.defaultAgent = options.defaultAgent;
 		if (options.visibleAgents !== void 0) cliConfig.visibleAgents = options.visibleAgents;
 		if (options.publicBaseUrl !== void 0) cliConfig.publicBaseUrl = options.publicBaseUrl;
+		const pluginIndent = indent.repeat(2);
 		if (hasPluginUsage) {
 			const mergedConfig = existingOptionsNode ? parseObjectExpression(existingOptionsNode) : {};
 			Object.assign(mergedConfig, cliConfig);
-			if (usageStart > -1 && usageEnd > -1) {
-				const newPluginCall = `${importedVarName}.vite(${serializeObject(mergedConfig, 6)})`;
-				s.overwrite(usageStart, usageEnd, newPluginCall);
-			}
-		} else {
+			if (usageStart > -1 && usageEnd > -1) s.overwrite(usageStart, usageEnd, `${importedVarName}.vite(${serializeObject(mergedConfig, indent, 3)})`);
+		} else if (hasPluginsArray) {
 			const finalConfig = {
 				enabled: true,
 				...cliConfig
 			};
-			if (hasPluginsArray && firstPluginStart > -1) {
-				const pluginCall = `${importedVarName}.vite(${serializeObject(finalConfig, 6)}),\n    `;
-				s.appendLeft(firstPluginStart, pluginCall);
-			} else if (hasPluginsArray && pluginsArrayStart > -1) {
-				const pluginCall = `\n    ${importedVarName}.vite(${serializeObject(finalConfig, 6)}),\n  `;
-				s.appendLeft(pluginsArrayStart + 1, pluginCall);
-			} else return {
-				success: false,
-				modified: false,
-				error: "Could not find plugins array in config",
-				message: "Please add DevInspector manually to your plugins array"
-			};
-		}
-		if (options.host || options.allowedHosts && options.allowedHosts.length > 0) traverse$2(ast, { ExportDefaultDeclaration(path$1) {
-			if (path$1.node.declaration.type === "CallExpression" && path$1.node.declaration.arguments.length > 0 && path$1.node.declaration.arguments[0].type === "ObjectExpression") {
+			const pluginCall = `${importedVarName}.vite(${serializeObject(finalConfig, indent, 3)})`;
+			if (firstPluginStart > -1) s.appendLeft(firstPluginStart, `${pluginCall},\n${pluginIndent}`);
+			else if (pluginsArrayStart > -1) s.appendLeft(pluginsArrayStart + 1, `\n${pluginIndent}${pluginCall},\n${indent}`);
+		} else return {
+			success: false,
+			modified: false,
+			error: "Could not find plugins array in config",
+			message: "Please add DevInspector manually to your plugins array"
+		};
+		if (options.host || options.allowedHosts?.length) traverse$2(ast, { ExportDefaultDeclaration(path$1) {
+			if (path$1.node.declaration.type === "CallExpression" && path$1.node.declaration.arguments[0]?.type === "ObjectExpression") {
 				const configObj = path$1.node.declaration.arguments[0];
 				const serverProp = configObj.properties.find((p) => p.type === "ObjectProperty" && p.key.type === "Identifier" && p.key.name === "server");
-				if (serverProp && serverProp.value.start !== null) {
+				const serverIndent = indent.repeat(2);
+				if (serverProp?.value.start != null) {
 					const serverContentStart = serverProp.value.start + 1;
-					const serverBlockEnd = serverProp.value.end;
-					if (serverBlockEnd) {
-						const currentServerBlock = code.slice(serverContentStart, serverBlockEnd);
-						let injection = "";
-						if (options.host && !currentServerBlock.includes("host:")) injection += `\n    host: '${options.host}',`;
-						if (options.allowedHosts && options.allowedHosts.length > 0 && !currentServerBlock.includes("allowedHosts:")) {
-							const hostsStr = options.allowedHosts.map((h) => `'${h}'`).join(", ");
-							injection += `\n    allowedHosts: [${hostsStr}],`;
-						}
-						if (injection) s.appendLeft(serverContentStart, injection);
-					}
-				} else if (configObj.start !== null) {
-					let injection = "\n  server: {\n";
-					if (options.host) injection += `    host: '${options.host}',\n`;
-					if (options.allowedHosts && options.allowedHosts.length > 0) {
-						const hostsStr = options.allowedHosts.map((h) => `'${h}'`).join(", ");
-						injection += `    allowedHosts: [${hostsStr}],\n`;
-					}
-					injection += "  },";
+					const currentBlock = code.slice(serverContentStart, serverProp.value.end);
+					let injection = "";
+					if (options.host && !currentBlock.includes("host:")) injection += `\n${serverIndent}host: '${options.host}',`;
+					if (options.allowedHosts?.length && !currentBlock.includes("allowedHosts:")) injection += `\n${serverIndent}allowedHosts: [${options.allowedHosts.map((h) => `'${h}'`).join(", ")}],`;
+					if (injection) s.appendLeft(serverContentStart, injection);
+				} else if (configObj.start != null) {
+					let injection = `\n${indent}server: {\n`;
+					if (options.host) injection += `${serverIndent}host: '${options.host}',\n`;
+					if (options.allowedHosts?.length) injection += `${serverIndent}allowedHosts: [${options.allowedHosts.map((h) => `'${h}'`).join(", ")}],\n`;
+					injection += `${indent}},`;
 					s.appendLeft(configObj.start + 1, injection);
 				}
 			}
@@ -280,8 +292,10 @@ function transformWebpackConfig(code, options) {
 			sourceType: "module",
 			plugins: ["typescript"]
 		});
+		const indent = detectIndent(code);
 		let lastImportEnd = 0;
 		let pluginsArrayStart = -1;
+		let firstPluginStart = -1;
 		let hasImport = false;
 		let hasPluginUsage = false;
 		let importedVarName = PLUGIN_VAR_NAME$1;
@@ -293,43 +307,40 @@ function transformWebpackConfig(code, options) {
 				if (path$1.node.loc) lastImportEnd = Math.max(lastImportEnd, path$1.node.loc.end.line);
 				if (path$1.node.source.value === PLUGIN_IMPORT$1) {
 					hasImport = true;
-					const specifier = path$1.node.specifiers.find((s$1) => s$1.type === "ImportDefaultSpecifier");
-					if (specifier && specifier.local.type === "Identifier") importedVarName = specifier.local.name;
+					const spec = path$1.node.specifiers.find((s$1) => s$1.type === "ImportDefaultSpecifier");
+					if (spec?.local.type === "Identifier") importedVarName = spec.local.name;
 				}
 			},
 			VariableDeclaration(path$1) {
 				if (path$1.node.loc && !isESM) lastImportEnd = Math.max(lastImportEnd, path$1.node.loc.end.line);
-				path$1.node.declarations.forEach((decl) => {
-					if (decl.init?.type === "CallExpression" && decl.init.callee.type === "Identifier" && decl.init.callee.name === "require" && decl.init.arguments[0]?.type === "StringLiteral" && decl.init.arguments[0].value === PLUGIN_IMPORT$1) {
-						hasImport = true;
-						if (decl.id.type === "Identifier") importedVarName = decl.id.name;
-					}
-				});
+				for (const decl of path$1.node.declarations) if (decl.init?.type === "CallExpression" && decl.init.callee.type === "Identifier" && decl.init.callee.name === "require" && decl.init.arguments[0]?.type === "StringLiteral" && decl.init.arguments[0].value === PLUGIN_IMPORT$1 && decl.id.type === "Identifier") {
+					hasImport = true;
+					importedVarName = decl.id.name;
+				}
 			},
 			ObjectProperty(path$1) {
 				if (path$1.node.key.type === "Identifier" && path$1.node.key.name === "plugins" && path$1.node.value.type === "ArrayExpression") {
-					if (path$1.node.value.start !== null && path$1.node.value.start !== void 0) {
-						pluginsArrayStart = path$1.node.value.start;
-						path$1.node.value.elements.forEach((element) => {
-							if (element && element.type === "CallExpression" && element.callee.type === "MemberExpression" && element.callee.object.type === "Identifier" && element.callee.object.name === importedVarName && element.callee.property.type === "Identifier" && element.callee.property.name === "webpack") {
-								hasPluginUsage = true;
-								if (typeof element.start === "number" && typeof element.end === "number") {
-									usageStart = element.start;
-									usageEnd = element.end;
-								}
-								if (element.arguments.length > 0 && element.arguments[0].type === "ObjectExpression") existingOptionsNode = element.arguments[0];
+					pluginsArrayStart = path$1.node.value.start ?? -1;
+					const elements = path$1.node.value.elements;
+					elements.forEach((rawElement) => {
+						const element = unwrapNode(rawElement);
+						if (element && element.type === "CallExpression" && element.callee.type === "MemberExpression" && element.callee.object.type === "Identifier" && element.callee.object.name === importedVarName && element.callee.property.type === "Identifier" && element.callee.property.name === "webpack") {
+							hasPluginUsage = true;
+							if (typeof element.start === "number" && typeof element.end === "number") {
+								usageStart = element.start;
+								usageEnd = element.end;
 							}
-						});
-					}
+							if (element.arguments.length > 0 && element.arguments[0].type === "ObjectExpression") existingOptionsNode = element.arguments[0];
+						}
+					});
+					if (elements.length > 0 && elements[0]?.start != null) firstPluginStart = elements[0].start;
 				}
 			}
 		});
 		if (!hasImport) {
 			const importLine = isESM ? `import ${PLUGIN_VAR_NAME$1} from '${PLUGIN_IMPORT$1}';\n` : `const ${PLUGIN_VAR_NAME$1} = require('${PLUGIN_IMPORT$1}');\n`;
-			if (lastImportEnd > 0) {
-				const insertPos = getInsertPosition(code, lastImportEnd);
-				s.appendLeft(insertPos, importLine);
-			} else s.prepend(importLine);
+			if (lastImportEnd > 0) s.appendLeft(getInsertPosition(code, lastImportEnd), importLine);
+			else s.prepend(importLine);
 		}
 		const cliConfig = {};
 		if (options.entryPath) {
@@ -343,20 +354,23 @@ function transformWebpackConfig(code, options) {
 		if (options.defaultAgent !== void 0) cliConfig.defaultAgent = options.defaultAgent;
 		if (options.visibleAgents !== void 0) cliConfig.visibleAgents = options.visibleAgents;
 		if (options.publicBaseUrl !== void 0) cliConfig.publicBaseUrl = options.publicBaseUrl;
+		const pluginIndent = indent.repeat(2);
 		if (hasPluginUsage) {
 			const mergedConfig = existingOptionsNode ? parseObjectExpression(existingOptionsNode) : {};
 			Object.assign(mergedConfig, cliConfig);
-			if (usageStart > -1 && usageEnd > -1) {
-				const newPluginCall = `${importedVarName}.webpack(${serializeObject(mergedConfig, 6)})`;
-				s.overwrite(usageStart, usageEnd, newPluginCall);
-			}
+			if (usageStart > -1 && usageEnd > -1) s.overwrite(usageStart, usageEnd, `${importedVarName}.webpack(${serializeObject(mergedConfig, indent, 3)})`);
+		} else if (firstPluginStart > -1) {
+			const finalConfig = {
+				enabled: true,
+				...cliConfig
+			};
+			s.appendLeft(firstPluginStart, `${importedVarName}.webpack(${serializeObject(finalConfig, indent, 3)}),\n${pluginIndent}`);
 		} else if (pluginsArrayStart > -1) {
 			const finalConfig = {
 				enabled: true,
 				...cliConfig
 			};
-			const pluginCall = `\n    ${importedVarName}.webpack(${serializeObject(finalConfig, 6)}),`;
-			s.appendLeft(pluginsArrayStart + 1, pluginCall);
+			s.appendLeft(pluginsArrayStart + 1, `\n${pluginIndent}${importedVarName}.webpack(${serializeObject(finalConfig, indent, 3)}),\n${indent}`);
 		} else return {
 			success: false,
 			modified: false,
@@ -409,6 +423,7 @@ function transformNextConfig(code, _options) {
 			sourceType: "module",
 			plugins: ["typescript"]
 		});
+		const indent = detectIndent(code);
 		let lastImportEnd = 0;
 		let nextConfigStart = -1;
 		let hasWebpackProperty = false;
@@ -419,44 +434,39 @@ function transformNextConfig(code, _options) {
 			},
 			VariableDeclarator(path$1) {
 				if (path$1.node.id.type === "Identifier" && path$1.node.id.name === "nextConfig" && path$1.node.init?.type === "ObjectExpression") {
-					if (path$1.node.init.start !== null && path$1.node.init.start !== void 0) nextConfigStart = path$1.node.init.start;
-					path$1.node.init.properties.forEach((prop) => {
-						if (prop.type === "ObjectProperty" && prop.key.type === "Identifier") {
-							if (prop.key.name === "webpack") hasWebpackProperty = true;
-							if (prop.key.name === "turbopack") hasTurbopackProperty = true;
-						}
-					});
+					nextConfigStart = path$1.node.init.start ?? -1;
+					for (const prop of path$1.node.init.properties) if (prop.type === "ObjectProperty" && prop.key.type === "Identifier") {
+						if (prop.key.name === "webpack") hasWebpackProperty = true;
+						if (prop.key.name === "turbopack") hasTurbopackProperty = true;
+					}
 				}
 			}
 		});
 		const importLine = `import ${PLUGIN_VAR_NAME}, { turbopackDevInspector } from '${PLUGIN_IMPORT}';\n`;
-		if (lastImportEnd > 0) {
-			const insertPos = getInsertPosition(code, lastImportEnd);
-			s.appendLeft(insertPos, importLine);
-		} else s.prepend(importLine);
+		if (lastImportEnd > 0) s.appendLeft(getInsertPosition(code, lastImportEnd), importLine);
+		else s.prepend(importLine);
 		if (nextConfigStart > -1 && !hasWebpackProperty && !hasTurbopackProperty) {
-			const pluginOptions = "{ enabled: true }";
+			const i1 = indent, i2 = indent.repeat(2);
+			indent.repeat(3);
 			const webpackConfig = `
-  webpack: (config) => {
-    config.plugins.push(
-      ${PLUGIN_VAR_NAME}.webpack(${pluginOptions})
-    );
-    return config;
-  },
-  turbopack: {
-    rules: turbopackDevInspector(${pluginOptions}),
-  },`;
+${i1}webpack: (config) => {
+${i2}config.plugins.push(${PLUGIN_VAR_NAME}.webpack({ enabled: true }));
+${i2}return config;
+${i1}},
+${i1}turbopack: {
+${i2}rules: turbopackDevInspector({ enabled: true }),
+${i1}},`;
 			s.appendLeft(nextConfigStart + 1, webpackConfig);
 		} else if (hasWebpackProperty || hasTurbopackProperty) return {
 			success: false,
 			modified: false,
-			message: `${hasWebpackProperty ? "webpack" : "turbopack"} property already exists. Please add DevInspector manually to avoid conflicts`
+			message: `${hasWebpackProperty ? "webpack" : "turbopack"} property already exists. Please add DevInspector manually`
 		};
 		else return {
 			success: false,
 			modified: false,
 			error: "Could not find nextConfig object",
-			message: "Please add DevInspector manually to your Next.js config"
+			message: "Please add DevInspector manually"
 		};
 		return {
 			success: true,
@@ -486,6 +496,7 @@ function transformNextLayout(code) {
 			sourceType: "module",
 			plugins: ["typescript", "jsx"]
 		});
+		const indent = detectIndent(code);
 		let lastImportEnd = 0;
 		let bodyStart = -1;
 		traverse(ast, {
@@ -493,23 +504,18 @@ function transformNextLayout(code) {
 				if (path$1.node.loc) lastImportEnd = Math.max(lastImportEnd, path$1.node.loc.end.line);
 			},
 			JSXElement(path$1) {
-				if (path$1.node.openingElement.name.type === "JSXIdentifier" && path$1.node.openingElement.name.name === "body" && path$1.node.start !== null) {
-					const openingEnd = path$1.node.openingElement.end;
-					if (openingEnd !== null && openingEnd !== void 0) bodyStart = openingEnd;
-				}
+				if (path$1.node.openingElement.name.type === "JSXIdentifier" && path$1.node.openingElement.name.name === "body" && path$1.node.openingElement.end != null) bodyStart = path$1.node.openingElement.end;
 			}
 		});
 		const importLine = `import { DevInspector } from "${COMPONENT_IMPORT}";\n`;
-		if (lastImportEnd > 0) {
-			const insertPos = getInsertPosition(code, lastImportEnd);
-			s.appendLeft(insertPos, importLine);
-		} else s.prepend(importLine);
-		if (bodyStart > -1) s.appendLeft(bodyStart, "\n        <DevInspector />");
+		if (lastImportEnd > 0) s.appendLeft(getInsertPosition(code, lastImportEnd), importLine);
+		else s.prepend(importLine);
+		if (bodyStart > -1) s.appendLeft(bodyStart, `\n${indent.repeat(4)}<DevInspector />`);
 		else return {
 			success: false,
 			modified: false,
 			error: "Could not find <body> element",
-			message: "Please add <DevInspector /> manually to your layout"
+			message: "Please add <DevInspector /> manually"
 		};
 		return {
 			success: true,

package/dist/config-updater.cjs

@@ -87714,9 +87714,54 @@ function getInspectorCSS() {
 	console.warn("⚠️  Inspector CSS not found. Run `pnpm build:client` first.");
 	return null;
 }
+function getSidebarScript() {
+	const possiblePaths = [
+		path.default.resolve(process.cwd(), "packages/unplugin-dev-inspector/client/dist/sidebar.js"),
+		path.default.resolve(__dirname$1, "../../client/dist/sidebar.js"),
+		path.default.resolve(__dirname$1, "../client/dist/sidebar.js"),
+		path.default.resolve(process.cwd(), "node_modules/@mcpc-tech/unplugin-dev-inspector-mcp/client/dist/sidebar.js")
+	];
+	for (const scriptPath of possiblePaths) try {
+		if (fs.default.existsSync(scriptPath)) return fs.default.readFileSync(scriptPath, "utf-8");
+	} catch (error) {
+		continue;
+	}
+	return null;
+}
+function getSidebarCSS() {
+	const possiblePaths = [
+		path.default.resolve(process.cwd(), "packages/unplugin-dev-inspector/client/dist/sidebar.css"),
+		path.default.resolve(__dirname$1, "../../client/dist/sidebar.css"),
+		path.default.resolve(__dirname$1, "../client/dist/sidebar.css"),
+		path.default.resolve(process.cwd(), "node_modules/@mcpc-tech/unplugin-dev-inspector-mcp/client/dist/sidebar.css")
+	];
+	for (const cssPath of possiblePaths) try {
+		if (fs.default.existsSync(cssPath)) return fs.default.readFileSync(cssPath, "utf-8");
+	} catch (error) {
+		continue;
+	}
+	return null;
+}
+function getSidebarHTML() {
+	const possiblePaths = [
+		path.default.resolve(process.cwd(), "packages/unplugin-dev-inspector/client/sidebar.html"),
+		path.default.resolve(__dirname$1, "../../client/sidebar.html"),
+		path.default.resolve(__dirname$1, "../client/sidebar.html"),
+		path.default.resolve(process.cwd(), "node_modules/@mcpc-tech/unplugin-dev-inspector-mcp/client/sidebar.html")
+	];
+	for (const htmlPath of possiblePaths) try {
+		if (fs.default.existsSync(htmlPath)) return fs.default.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__")) {
@@ -87725,8 +87770,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;

package/dist/config-updater.js

@@ -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;