@0x1f320.sh/why-did-you-render-mcp 1.0.0-dev.13 → 1.0.0-dev.15

package/dist/client/index.cjs

@@ -206,25 +206,34 @@ function buildOptions(opts) {
 		});
 		pendingBatch = null;
 	}
-	return { notifier(info) {
-		const report = {
-			displayName: info.displayName,
-			reason: sanitizeReason(info.reason),
-			hookName: info.hookName
-		};
-		if (pendingBatch && pendingBatch.commitId === commitId) pendingBatch.reports.push(report);
-		else {
-			if (pendingBatch) flushBatch();
-			pendingBatch = {
-				commitId,
-				reports: [report]
+	return {
+		registerComponents(components) {
+			send({
+				type: "register",
+				projectId,
+				components
+			});
+		},
+		notifier(info) {
+			const report = {
+				displayName: info.displayName,
+				reason: sanitizeReason(info.reason),
+				hookName: info.hookName
 			};
+			if (pendingBatch && pendingBatch.commitId === commitId) pendingBatch.reports.push(report);
+			else {
+				if (pendingBatch) flushBatch();
+				pendingBatch = {
+					commitId,
+					reports: [report]
+				};
+			}
+			if (!flushScheduled) {
+				flushScheduled = true;
+				queueMicrotask(flushBatch);
+			}
 		}
-		if (!flushScheduled) {
-			flushScheduled = true;
-			queueMicrotask(flushBatch);
-		}
-	} };
+	};
 }
 //#endregion
 exports.buildOptions = buildOptions;

package/dist/client/index.d.cts

@@ -7,6 +7,7 @@ interface ClientOptions {
   projectId?: string;
 }
 declare function buildOptions(opts?: ClientOptions): {
+  registerComponents(components: string[]): void;
   notifier(info: UpdateInfo): void;
 };
 //#endregion

package/dist/client/index.d.ts

@@ -7,6 +7,7 @@ interface ClientOptions {
   projectId?: string;
 }
 declare function buildOptions(opts?: ClientOptions): {
+  registerComponents(components: string[]): void;
   notifier(info: UpdateInfo): void;
 };
 //#endregion

package/dist/client/index.js

@@ -205,25 +205,34 @@ function buildOptions(opts) {
 		});
 		pendingBatch = null;
 	}
-	return { notifier(info) {
-		const report = {
-			displayName: info.displayName,
-			reason: sanitizeReason(info.reason),
-			hookName: info.hookName
-		};
-		if (pendingBatch && pendingBatch.commitId === commitId) pendingBatch.reports.push(report);
-		else {
-			if (pendingBatch) flushBatch();
-			pendingBatch = {
-				commitId,
-				reports: [report]
+	return {
+		registerComponents(components) {
+			send({
+				type: "register",
+				projectId,
+				components
+			});
+		},
+		notifier(info) {
+			const report = {
+				displayName: info.displayName,
+				reason: sanitizeReason(info.reason),
+				hookName: info.hookName
 			};
+			if (pendingBatch && pendingBatch.commitId === commitId) pendingBatch.reports.push(report);
+			else {
+				if (pendingBatch) flushBatch();
+				pendingBatch = {
+					commitId,
+					reports: [report]
+				};
+			}
+			if (!flushScheduled) {
+				flushScheduled = true;
+				queueMicrotask(flushBatch);
+			}
 		}
-		if (!flushScheduled) {
-			flushScheduled = true;
-			queueMicrotask(flushBatch);
-		}
-	} };
+	};
 }
 //#endregion
 export { buildOptions };

package/dist/server/index.js

@@ -130,6 +130,7 @@ var RenderStore = class {
 	timers = /* @__PURE__ */ new Map();
 	dicts = /* @__PURE__ */ new Map();
 	bufferMeta = /* @__PURE__ */ new Map();
+	trackedComponents = /* @__PURE__ */ new Map();
 	constructor(dir) {
 		this.dir = dir ?? join(homedir(), ".wdyr-mcp", "renders");
 		mkdirSync(this.dir, { recursive: true });
@@ -272,7 +273,19 @@ var RenderStore = class {
 		for (const r of renders) {
 			summary[r.project] ??= {};
 			const project = summary[r.project];
-			project[r.displayName] = (project[r.displayName] ?? 0) + 1;
+			project[r.displayName] ??= {
+				count: 0,
+				reasons: {
+					props: 0,
+					state: 0,
+					hooks: 0
+				}
+			};
+			const entry = project[r.displayName];
+			entry.count++;
+			if (Array.isArray(r.reason.propsDifferences)) entry.reasons.props++;
+			if (Array.isArray(r.reason.stateDifferences)) entry.reasons.state++;
+			if (Array.isArray(r.reason.hookDifferences)) entry.reasons.hooks++;
 		}
 		return summary;
 	}
@@ -284,10 +297,37 @@ var RenderStore = class {
 			summary[r.project] ??= {};
 			summary[r.project][r.commitId] ??= {};
 			const commit = summary[r.project][r.commitId];
-			commit[r.displayName] = (commit[r.displayName] ?? 0) + 1;
+			commit[r.displayName] ??= {
+				count: 0,
+				reasons: {
+					props: 0,
+					state: 0,
+					hooks: 0
+				}
+			};
+			const entry = commit[r.displayName];
+			entry.count++;
+			if (Array.isArray(r.reason.propsDifferences)) entry.reasons.props++;
+			if (Array.isArray(r.reason.stateDifferences)) entry.reasons.state++;
+			if (Array.isArray(r.reason.hookDifferences)) entry.reasons.hooks++;
 		}
 		return summary;
 	}
+	setTrackedComponents(components, projectId) {
+		this.trackedComponents.set(projectId, components);
+	}
+	getTrackedComponents(projectId) {
+		const result = {};
+		const projects = projectId ? [projectId] : this.getProjects();
+		for (const proj of projects) {
+			const observed = [...new Set(this.getAllRenders(proj).map((r) => r.displayName))];
+			result[proj] = {
+				registered: this.trackedComponents.get(proj) ?? [],
+				observed
+			};
+		}
+		return result;
+	}
 	bufferKey(projectId, commitId) {
 		return `${projectId}\0${commitId ?? NOCOMMIT}`;
 	}
@@ -355,7 +395,7 @@ function textResult(text) {
 }
 //#endregion
 //#region src/server/tools/clear-renders.ts
-function register$5(server) {
+function register$6(server) {
 	server.registerTool("clear_renders", {
 		title: "Clear Renders",
 		description: "Clears collected render data. If multiple projects are active and no project is specified, the tool will ask you to disambiguate.",
@@ -369,7 +409,7 @@ function register$5(server) {
 }
 //#endregion
 //#region src/server/tools/get-commits.ts
-function register$4(server) {
+function register$5(server) {
 	server.registerTool("get_commits", {
 		title: "Get Commits",
 		description: "Returns a list of React commit IDs that have recorded render data for a project. Use these IDs with get_renders_by_commit to inspect individual commits.",
@@ -384,7 +424,7 @@ function register$4(server) {
 }
 //#endregion
 //#region src/server/tools/get-projects.ts
-function register$3(server) {
+function register$4(server) {
 	server.registerTool("get_projects", {
 		title: "Get Projects",
 		description: "Returns a list of project identifiers (browser origin URLs) that have recorded render data.",
@@ -397,7 +437,7 @@ function register$3(server) {
 }
 //#endregion
 //#region src/server/tools/get-render-summary.ts
-function register$2(server) {
+function register$3(server) {
 	server.registerTool("get_render_summary", {
 		title: "Get Render Summary",
 		description: "Returns a summary of re-renders grouped by component name with counts. Use groupBy: 'commit' to get per-commit breakdowns instead of a single aggregate. If multiple projects are active and no project is specified, the tool will ask you to disambiguate.",
@@ -412,13 +452,20 @@ function register$2(server) {
 		return aggregateSummary(resolved.projectId);
 	});
 }
+function formatReasons(reasons) {
+	const parts = [];
+	if (reasons.props > 0) parts.push(`props: ${reasons.props}`);
+	if (reasons.state > 0) parts.push(`state: ${reasons.state}`);
+	if (reasons.hooks > 0) parts.push(`hooks: ${reasons.hooks}`);
+	return parts.length > 0 ? ` — ${parts.join(", ")}` : "";
+}
 function aggregateSummary(projectId) {
 	const summary = store.getSummary(projectId);
 	if (Object.keys(summary).length === 0) return textResult("No renders recorded yet.");
 	const lines = [];
 	for (const [proj, components] of Object.entries(summary)) {
 		lines.push(`[${proj}]`);
-		for (const [name, count] of Object.entries(components)) lines.push(`  ${name}: ${count} re-render(s)`);
+		for (const [name, { count, reasons }] of Object.entries(components)) lines.push(`  ${name}: ${count} re-render(s)${formatReasons(reasons)}`);
 	}
 	return textResult(`Re-render summary:\n\n${lines.join("\n")}`);
 }
@@ -431,16 +478,16 @@ function commitSummary(projectId) {
 		const sortedCommitIds = Object.keys(commits).map(Number).sort((a, b) => a - b);
 		for (const commitId of sortedCommitIds) {
 			const components = commits[commitId];
-			const total = Object.values(components).reduce((s, c) => s + c, 0);
+			const total = Object.values(components).reduce((s, c) => s + c.count, 0);
 			lines.push(`  Commit #${commitId} (${total} re-render(s)):`);
-			for (const [name, count] of Object.entries(components)) lines.push(`    ${name}: ${count}`);
+			for (const [name, { count, reasons }] of Object.entries(components)) lines.push(`    ${name}: ${count}${formatReasons(reasons)}`);
 		}
 	}
 	return textResult(`Re-render summary (by commit):\n\n${lines.join("\n")}`);
 }
 //#endregion
 //#region src/server/tools/get-renders-by-commit.ts
-function register$1(server) {
+function register$2(server) {
 	server.registerTool("get_renders_by_commit", {
 		title: "Get Renders by Commit",
 		description: "Returns all re-renders for a specific React commit ID. Use get_commits first to discover available commit IDs.",
@@ -460,7 +507,7 @@ function register$1(server) {
 }
 //#endregion
 //#region src/server/tools/get-renders.ts
-function register(server) {
+function register$1(server) {
 	server.registerTool("get_renders", {
 		title: "Get Renders",
 		description: "Returns all re-renders collected from the browser. If multiple projects are active and no project is specified, the tool will ask you to disambiguate by asking the user for their dev server URL.",
@@ -477,14 +524,43 @@ function register(server) {
 	});
 }
 //#endregion
+//#region src/server/tools/get-tracked-components.ts
+function register(server) {
+	server.registerTool("get_tracked_components", {
+		title: "Get Tracked Components",
+		description: "Returns the list of components being tracked by why-did-you-render. Shows both explicitly registered components (sent by the client) and components observed in render data. If multiple projects are active and no project is specified, the tool will ask you to disambiguate.",
+		inputSchema: { project: z.string().optional().describe("Project identifier (the browser's origin URL, e.g. http://localhost:3000). Omit to auto-detect.") }
+	}, async ({ project }) => {
+		const resolved = resolveProject(project);
+		if (resolved.error) return textResult(resolved.error);
+		const tracked = store.getTrackedComponents(resolved.projectId);
+		if (Object.keys(tracked).length === 0) return textResult("No tracked components found. Make sure the browser is connected and triggering re-renders.");
+		const lines = [];
+		for (const [proj, { registered, observed }] of Object.entries(tracked)) {
+			lines.push(`[${proj}]`);
+			if (registered.length > 0) {
+				lines.push("  Registered:");
+				for (const name of registered) lines.push(`    - ${name}`);
+			}
+			if (observed.length > 0) {
+				lines.push("  Observed in renders:");
+				for (const name of observed) lines.push(`    - ${name}`);
+			}
+			if (registered.length === 0 && observed.length === 0) lines.push("  No components tracked yet.");
+		}
+		return textResult(lines.join("\n"));
+	});
+}
+//#endregion
 //#region src/server/tools/index.ts
 function registerTools(server) {
-	register(server);
-	register$2(server);
-	register$4(server);
 	register$1(server);
 	register$3(server);
 	register$5(server);
+	register$2(server);
+	register$4(server);
+	register(server);
+	register$6(server);
 }
 //#endregion
 //#region src/server/liveness.ts
@@ -563,6 +639,7 @@ function createWsServer(port) {
 				heartbeat.setProjectId(ws, projectId);
 				if (msg.type === "render") store.addRender(msg.payload, projectId, msg.commitId);
 				else if (msg.type === "render-batch") for (const report of msg.payload) store.addRender(report, projectId, msg.commitId);
+				else if (msg.type === "register") store.setTrackedComponents(msg.components, projectId);
 			} catch {
 				console.error("[wdyr-mcp] invalid message received");
 			}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0x1f320.sh/why-did-you-render-mcp",
-  "version": "1.0.0-dev.13",
+  "version": "1.0.0-dev.15",
   "type": "module",
   "description": "MCP server that collects why-did-you-render data from browser and exposes it to coding agents",
   "license": "MIT",