@0x1f320.sh/why-did-you-render-mcp 1.0.0-dev.1 → 1.0.0-dev.3

package/README.md

@@ -94,11 +94,20 @@ Once both the MCP server and your React dev server are running, interact with yo
 | --- | --- |
 | `get_unnecessary_renders` | Returns all captured unnecessary re-renders. Optionally filter by `component` name. |
 | `get_render_summary` | Returns a summary of re-renders grouped by component with counts. |
+| `get_commits` | Lists React commit IDs that have recorded render data. Use these IDs with `get_renders_by_commit`. |
+| `get_renders_by_commit` | Returns all unnecessary re-renders for a specific React commit ID. |
 | `get_projects` | Lists all active projects (identified by their origin URL). |
 | `clear_renders` | Clears all stored render data. Optionally scope to a specific project. |
 
 When multiple projects are active, tools accept an optional `project` parameter (the browser's origin URL, e.g. `http://localhost:3000`). If omitted and only one project exists, it is auto-selected.
 
+### Commit-level grouping
+
+Each render report is tagged with a React **commit ID**, allowing agents to inspect which components re-rendered together in the same commit. The client tracks commits by hooking into `__REACT_DEVTOOLS_GLOBAL_HOOK__.onCommitFiberRoot`, which React calls synchronously once per commit. A typical workflow:
+
+1. Call `get_commits` to list available commit IDs
+2. Call `get_renders_by_commit` with a specific ID to see all renders in that commit
+
 ## Architecture
 
 ```

package/dist/client/index.cjs

@@ -33,11 +33,29 @@ function sanitizeReason(reason) {
 //#endregion
 //#region src/client/index.ts
 const DEFAULT_WS_URL = "ws://localhost:4649";
+function patchDevToolsHook(onCommit) {
+	if (!globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__) globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
+		supportsFiber: true,
+		inject() {},
+		onCommitFiberRoot() {},
+		onCommitFiberUnmount() {}
+	};
+	const hook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+	const original = hook.onCommitFiberRoot.bind(hook);
+	hook.onCommitFiberRoot = (...args) => {
+		onCommit();
+		return original(...args);
+	};
+}
 function buildOptions(opts) {
 	const wsUrl = opts?.wsUrl ?? DEFAULT_WS_URL;
 	const projectId = opts?.projectId ?? globalThis.location?.origin ?? "default";
 	let ws = null;
 	let queue = [];
+	let commitId = 0;
+	patchDevToolsHook(() => {
+		commitId++;
+	});
 	function connect() {
 		ws = new WebSocket(wsUrl);
 		ws.addEventListener("open", () => {
@@ -57,16 +75,37 @@ function buildOptions(opts) {
 		if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify(msg));
 		else queue.push(msg);
 	}
-	return { notifier(info) {
+	let pendingBatch = null;
+	let flushScheduled = false;
+	function flushBatch() {
+		flushScheduled = false;
+		if (!pendingBatch || pendingBatch.reports.length === 0) return;
 		send({
-			type: "render",
+			type: "render-batch",
 			projectId,
-			payload: {
-				displayName: info.displayName,
-				reason: sanitizeReason(info.reason),
-				hookName: info.hookName
-			}
+			commitId: pendingBatch.commitId,
+			payload: pendingBatch.reports
 		});
+		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]
+			};
+		}
+		if (!flushScheduled) {
+			flushScheduled = true;
+			queueMicrotask(flushBatch);
+		}
 	} };
 }
 //#endregion

package/dist/client/index.d.cts

@@ -1,6 +1,7 @@
 import { UpdateInfo } from "@welldone-software/why-did-you-render";
 
 //#region src/client/index.d.ts
+sideEffect();
 interface ClientOptions {
   wsUrl?: string;
   projectId?: string;

package/dist/client/index.d.ts

@@ -1,6 +1,7 @@
 import { UpdateInfo } from "@welldone-software/why-did-you-render";
 
 //#region src/client/index.d.ts
+sideEffect();
 interface ClientOptions {
   wsUrl?: string;
   projectId?: string;

package/dist/client/index.js

@@ -32,11 +32,29 @@ function sanitizeReason(reason) {
 //#endregion
 //#region src/client/index.ts
 const DEFAULT_WS_URL = "ws://localhost:4649";
+function patchDevToolsHook(onCommit) {
+	if (!globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__) globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
+		supportsFiber: true,
+		inject() {},
+		onCommitFiberRoot() {},
+		onCommitFiberUnmount() {}
+	};
+	const hook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+	const original = hook.onCommitFiberRoot.bind(hook);
+	hook.onCommitFiberRoot = (...args) => {
+		onCommit();
+		return original(...args);
+	};
+}
 function buildOptions(opts) {
 	const wsUrl = opts?.wsUrl ?? DEFAULT_WS_URL;
 	const projectId = opts?.projectId ?? globalThis.location?.origin ?? "default";
 	let ws = null;
 	let queue = [];
+	let commitId = 0;
+	patchDevToolsHook(() => {
+		commitId++;
+	});
 	function connect() {
 		ws = new WebSocket(wsUrl);
 		ws.addEventListener("open", () => {
@@ -56,16 +74,37 @@ function buildOptions(opts) {
 		if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify(msg));
 		else queue.push(msg);
 	}
-	return { notifier(info) {
+	let pendingBatch = null;
+	let flushScheduled = false;
+	function flushBatch() {
+		flushScheduled = false;
+		if (!pendingBatch || pendingBatch.reports.length === 0) return;
 		send({
-			type: "render",
+			type: "render-batch",
 			projectId,
-			payload: {
-				displayName: info.displayName,
-				reason: sanitizeReason(info.reason),
-				hookName: info.hookName
-			}
+			commitId: pendingBatch.commitId,
+			payload: pendingBatch.reports
 		});
+		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]
+			};
+		}
+		if (!flushScheduled) {
+			flushScheduled = true;
+			queueMicrotask(flushBatch);
+		}
 	} };
 }
 //#endregion

package/dist/server/index.js

@@ -23,7 +23,8 @@ function toResult(stored) {
 		project: stored.projectId,
 		displayName: stored.displayName,
 		reason: stored.reason,
-		...stored.hookName != null && { hookName: stored.hookName }
+		...stored.hookName != null && { hookName: stored.hookName },
+		...stored.commitId != null && { commitId: stored.commitId }
 	};
 }
 //#endregion
@@ -37,10 +38,11 @@ var RenderStore = class {
 		this.dir = dir ?? join(homedir(), ".wdyr-mcp", "renders");
 		mkdirSync(this.dir, { recursive: true });
 	}
-	addRender(report, projectId) {
+	addRender(report, projectId, commitId) {
 		const stored = {
 			...report,
-			projectId
+			projectId,
+			...commitId != null && { commitId }
 		};
 		let buf = this.buffers.get(projectId);
 		if (!buf) {
@@ -104,6 +106,13 @@ var RenderStore = class {
 		}
 		return [...projects];
 	}
+	getCommitIds(projectId) {
+		const renders = this.getAllRenders(projectId);
+		return [...new Set(renders.map((r) => r.commitId).filter((id) => id != null))];
+	}
+	getRendersByCommit(commitId, projectId) {
+		return this.getAllRenders(projectId).filter((r) => r.commitId === commitId);
+	}
 	getSummary(projectId) {
 		const renders = this.getAllRenders(projectId);
 		const summary = {};
@@ -156,7 +165,7 @@ function textResult(text) {
 }
 //#endregion
 //#region src/server/tools/clear-renders.ts
-function register$3(server) {
+function register$5(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.",
@@ -169,8 +178,23 @@ function register$3(server) {
 	});
 }
 //#endregion
+//#region src/server/tools/get-commits.ts
+function register$4(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.",
+		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 commitIds = store.getCommitIds(resolved.projectId);
+		if (commitIds.length === 0) return textResult("No commits recorded yet. Make sure the browser is connected and triggering re-renders.");
+		return textResult(JSON.stringify(commitIds));
+	});
+}
+//#endregion
 //#region src/server/tools/get-projects.ts
-function register$2(server) {
+function register$3(server) {
 	server.registerTool("get_projects", {
 		title: "Get Projects",
 		description: "Returns a list of project identifiers (browser origin URLs) that have recorded render data.",
@@ -183,7 +207,7 @@ function register$2(server) {
 }
 //#endregion
 //#region src/server/tools/get-render-summary.ts
-function register$1(server) {
+function register$2(server) {
 	server.registerTool("get_render_summary", {
 		title: "Get Render Summary",
 		description: "Returns a summary of unnecessary re-renders grouped by component name with counts. If multiple projects are active and no project is specified, the tool will ask you to disambiguate.",
@@ -202,6 +226,24 @@ function register$1(server) {
 	});
 }
 //#endregion
+//#region src/server/tools/get-renders-by-commit.ts
+function register$1(server) {
+	server.registerTool("get_renders_by_commit", {
+		title: "Get Renders by Commit",
+		description: "Returns all unnecessary re-renders for a specific React commit ID. Use get_commits first to discover available commit IDs.",
+		inputSchema: {
+			commitId: z.number().describe("The React commit ID to filter by."),
+			project: z.string().optional().describe("Project identifier (the browser's origin URL, e.g. http://localhost:3000). Omit to auto-detect.")
+		}
+	}, async ({ commitId, project }) => {
+		const resolved = resolveProject(project);
+		if (resolved.error) return textResult(resolved.error);
+		const renders = store.getRendersByCommit(commitId, resolved.projectId);
+		if (renders.length === 0) return textResult(`No renders recorded for commit ${commitId}.`);
+		return textResult(JSON.stringify(renders, null, 2));
+	});
+}
+//#endregion
 //#region src/server/tools/get-unnecessary-renders.ts
 function register(server) {
 	server.registerTool("get_unnecessary_renders", {
@@ -223,9 +265,11 @@ function register(server) {
 //#region src/server/tools/index.ts
 function registerTools(server) {
 	register(server);
-	register$1(server);
 	register$2(server);
+	register$4(server);
+	register$1(server);
 	register$3(server);
+	register$5(server);
 }
 //#endregion
 //#region src/server/liveness.ts
@@ -300,11 +344,10 @@ function createWsServer(port) {
 		ws.on("message", (raw) => {
 			try {
 				const msg = JSON.parse(String(raw));
-				if (msg.type === "render") {
-					const projectId = msg.projectId ?? "default";
-					heartbeat.setProjectId(ws, projectId);
-					store.addRender(msg.payload, projectId);
-				}
+				const projectId = msg.projectId ?? "default";
+				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);
 			} 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.1",
+  "version": "1.0.0-dev.3",
   "type": "module",
   "description": "MCP server that collects why-did-you-render data from browser and exposes it to coding agents",
   "license": "MIT",