@0x1f320.sh/why-did-you-render-mcp 1.0.0-dev.7 → 1.0.0-dev.9

package/README.md

@@ -1,5 +1,9 @@
 # why-did-you-render-mcp
 
+[![npm version](https://img.shields.io/npm/v/@0x1f320.sh/why-did-you-render-mcp.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@0x1f320.sh/why-did-you-render-mcp)
+[![CI](https://img.shields.io/github/actions/workflow/status/0x1f320/why-did-you-render-mcp/ci.yml?style=flat&colorA=000000&colorB=000000)](https://github.com/0x1f320/why-did-you-render-mcp/actions/workflows/ci.yml)
+[![license](https://img.shields.io/npm/l/@0x1f320.sh/why-did-you-render-mcp?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@0x1f320.sh/why-did-you-render-mcp)
+
 An [MCP](https://modelcontextprotocol.io/) server that bridges [why-did-you-render](https://github.com/welldone-software/why-did-you-render) data from the browser to coding agents. It captures unnecessary React re-render reports in real time and exposes them as MCP tools, so agents can diagnose and fix performance issues without manual browser inspection.
 
 ## How It Works
@@ -39,10 +43,8 @@ import whyDidYouRender from "@welldone-software/why-did-you-render";
 import { buildOptions } from "@0x1f320.sh/why-did-you-render-mcp/client";
 
 if (process.env.NODE_ENV === "development") {
-  const { notifier } = buildOptions();
-
   whyDidYouRender(React, {
-    notifier,
+    ...buildOptions(),
     trackAllPureComponents: true,
   });
 }
@@ -59,31 +61,99 @@ const { notifier } = buildOptions({
 
 ### 2. Add the MCP server to your agent
 
-Add the server to your MCP client configuration. For example, in Claude Desktop's `claude_desktop_config.json`:
+<details>
+<summary>Claude Code</summary>
+
+```sh
+claude mcp add why-did-you-render -- npx -y @0x1f320.sh/why-did-you-render-mcp
+```
+
+</details>
+
+<details>
+<summary>Claude Desktop</summary>
+
+```sh
+claude mcp add-json why-did-you-render '{"command":"npx","args":["-y","@0x1f320.sh/why-did-you-render-mcp"]}' -s user
+```
+
+Or manually edit `~/Library/Application Support/Claude/claude_desktop_config.json` (macOS) / `%APPDATA%\Claude\claude_desktop_config.json` (Windows):
+
+```json
+{
+  "mcpServers": {
+    "why-did-you-render": {
+      "command": "npx",
+      "args": ["-y", "@0x1f320.sh/why-did-you-render-mcp"]
+    }
+  }
+}
+```
+
+</details>
+
+<details>
+<summary>Cursor</summary>
+
+```sh
+cursor --add-mcp '{"name":"why-did-you-render","command":"npx","args":["-y","@0x1f320.sh/why-did-you-render-mcp"]}'
+```
+
+Or add to `.cursor/mcp.json` in your project:
 
 ```json
 {
   "mcpServers": {
     "why-did-you-render": {
       "command": "npx",
-      "args": ["@0x1f320.sh/why-did-you-render-mcp"]
+      "args": ["-y", "@0x1f320.sh/why-did-you-render-mcp"]
     }
   }
 }
 ```
 
-Or if you installed it globally:
+</details>
+
+<details>
+<summary>Windsurf</summary>
+
+Add to `~/.codeium/windsurf/mcp_config.json`:
 
 ```json
 {
   "mcpServers": {
     "why-did-you-render": {
-      "command": "why-did-you-render-mcp"
+      "command": "npx",
+      "args": ["-y", "@0x1f320.sh/why-did-you-render-mcp"]
     }
   }
 }
 ```
 
+</details>
+
+<details>
+<summary>VS Code (GitHub Copilot)</summary>
+
+```sh
+code --add-mcp '{"name":"why-did-you-render","command":"npx","args":["-y","@0x1f320.sh/why-did-you-render-mcp"]}'
+```
+
+Or add to `.vscode/mcp.json` in your project:
+
+```json
+{
+  "servers": {
+    "why-did-you-render": {
+      "command": "npx",
+      "args": ["-y", "@0x1f320.sh/why-did-you-render-mcp"]
+    }
+  }
+}
+```
+
+</details>
+
 ### 3. Start your dev server and interact with the app
 
 Once both the MCP server and your React dev server are running, interact with your app in the browser. The agent can now query re-render data using the MCP tools below.

package/dist/client/index.cjs

@@ -135,6 +135,11 @@ function sanitizeReason(reason) {
 //#endregion
 //#region src/client/index.ts
 const DEFAULT_WS_URL = "ws://localhost:4649";
+const PREFIX_STYLE = "color: #38bdf8; font-weight: bold";
+const RESET_STYLE = "color: inherit; font-weight: normal";
+function log(message) {
+	console.log(`%c[WDYR MCP]%c ${message}`, PREFIX_STYLE, RESET_STYLE);
+}
 function patchDevToolsHook(onCommit) {
 	if (!globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__) globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
 		supportsFiber: true,
@@ -165,6 +170,7 @@ function buildOptions(opts) {
 	function connect() {
 		ws = new WebSocket(wsUrl);
 		ws.addEventListener("open", () => {
+			log(`Connected to ${wsUrl}`);
 			retryDelay = BASE_DELAY;
 			for (const msg of queue) ws?.send(JSON.stringify(msg));
 			queue = [];
@@ -175,6 +181,7 @@ function buildOptions(opts) {
 			retryDelay = Math.min(retryDelay * 2, MAX_DELAY);
 		});
 		ws.addEventListener("error", () => {
+			log(`Connection failed (${wsUrl}). Retrying in ${retryDelay / 1e3}s...`);
 			ws?.close();
 		});
 	}

package/dist/client/index.js

@@ -134,6 +134,11 @@ function sanitizeReason(reason) {
 //#endregion
 //#region src/client/index.ts
 const DEFAULT_WS_URL = "ws://localhost:4649";
+const PREFIX_STYLE = "color: #38bdf8; font-weight: bold";
+const RESET_STYLE = "color: inherit; font-weight: normal";
+function log(message) {
+	console.log(`%c[WDYR MCP]%c ${message}`, PREFIX_STYLE, RESET_STYLE);
+}
 function patchDevToolsHook(onCommit) {
 	if (!globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__) globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
 		supportsFiber: true,
@@ -164,6 +169,7 @@ function buildOptions(opts) {
 	function connect() {
 		ws = new WebSocket(wsUrl);
 		ws.addEventListener("open", () => {
+			log(`Connected to ${wsUrl}`);
 			retryDelay = BASE_DELAY;
 			for (const msg of queue) ws?.send(JSON.stringify(msg));
 			queue = [];
@@ -174,6 +180,7 @@ function buildOptions(opts) {
 			retryDelay = Math.min(retryDelay * 2, MAX_DELAY);
 		});
 		ws.addEventListener("error", () => {
+			log(`Connection failed (${wsUrl}). Retrying in ${retryDelay / 1e3}s...`);
 			ws?.close();
 		});
 	}

package/dist/server/index.js

@@ -123,11 +123,13 @@ function toResult(stored) {
 //#endregion
 //#region src/server/store/render-store.ts
 const FLUSH_DELAY_MS = 200;
+const NOCOMMIT = "nocommit";
 var RenderStore = class {
 	dir;
 	buffers = /* @__PURE__ */ new Map();
 	timers = /* @__PURE__ */ new Map();
 	dicts = /* @__PURE__ */ new Map();
+	bufferMeta = /* @__PURE__ */ new Map();
 	constructor(dir) {
 		this.dir = dir ?? join(homedir(), ".wdyr-mcp", "renders");
 		mkdirSync(this.dir, { recursive: true });
@@ -138,46 +140,53 @@ var RenderStore = class {
 			projectId,
 			...commitId != null && { commitId }
 		};
-		let buf = this.buffers.get(projectId);
+		const bk = this.bufferKey(projectId, commitId);
+		let buf = this.buffers.get(bk);
 		if (!buf) {
 			buf = [];
-			this.buffers.set(projectId, buf);
+			this.buffers.set(bk, buf);
+			this.bufferMeta.set(bk, {
+				projectId,
+				commitId
+			});
 		}
 		buf.push(stored);
-		const existing = this.timers.get(projectId);
+		const existing = this.timers.get(bk);
 		if (existing) clearTimeout(existing);
-		this.timers.set(projectId, setTimeout(() => {
-			this.flushAsync(projectId).catch((err) => console.error(`[wdyr-mcp] flush error for ${projectId}:`, err));
+		this.timers.set(bk, setTimeout(() => {
+			this.flushAsync(projectId, commitId).catch((err) => console.error(`[wdyr-mcp] flush error for ${bk}:`, err));
 		}, FLUSH_DELAY_MS));
 	}
-	async flushAsync(projectId) {
+	async flushAsync(projectId, commitId) {
 		await ensureReady();
-		if (projectId) this.flushProject(projectId);
-		else for (const id of this.buffers.keys()) this.flushProject(id);
+		this.flush(projectId, commitId);
 	}
-	flush(projectId) {
-		if (projectId) this.flushProject(projectId);
-		else for (const id of this.buffers.keys()) this.flushProject(id);
+	flush(projectId, commitId) {
+		if (projectId != null && commitId !== void 0) this.flushBuffer(this.bufferKey(projectId, commitId));
+		else if (projectId != null) for (const bk of this.bufferKeysForProject(projectId)) this.flushBuffer(bk);
+		else for (const bk of [...this.buffers.keys()]) this.flushBuffer(bk);
 	}
-	flushProject(projectId) {
-		const buf = this.buffers.get(projectId);
+	flushBuffer(bk) {
+		const buf = this.buffers.get(bk);
 		if (!buf || buf.length === 0) return;
-		let dict = this.dicts.get(projectId);
+		const meta = this.bufferMeta.get(bk);
+		if (!meta) return;
+		let dict = this.dicts.get(bk);
 		if (!dict) {
 			dict = {};
-			this.dicts.set(projectId, dict);
+			this.dicts.set(bk, dict);
 		}
 		const dehydrated = buf.map((r) => dehydrate(r, dict));
-		const file = this.projectFile(projectId);
+		const file = this.commitFile(meta.projectId, meta.commitId);
 		const existingLines = this.readDataLines(file);
 		const newLines = dehydrated.map((r) => JSON.stringify(r));
 		const allDataLines = [...existingLines, ...newLines];
 		writeFileSync(file, `${(Object.keys(dict).length > 0 ? [JSON.stringify({ [DICT_KEY]: dict }), ...allDataLines] : allDataLines).join("\n")}\n`);
 		buf.length = 0;
-		const timer = this.timers.get(projectId);
+		const timer = this.timers.get(bk);
 		if (timer) {
 			clearTimeout(timer);
-			this.timers.delete(projectId);
+			this.timers.delete(bk);
 		}
 	}
 	readDataLines(file) {
@@ -190,7 +199,7 @@ var RenderStore = class {
 	}
 	getAllRenders(projectId) {
 		this.flush(projectId);
-		if (projectId) return readJsonl(this.projectFile(projectId)).map(toResult);
+		if (projectId) return this.projectFiles(projectId).flatMap((f) => readJsonl(join(this.dir, f)).map(toResult));
 		return this.jsonlFiles().flatMap((f) => readJsonl(join(this.dir, f)).map(toResult));
 	}
 	getRendersByComponent(componentName, projectId) {
@@ -198,44 +207,64 @@ var RenderStore = class {
 	}
 	clearRenders(projectId) {
 		if (projectId) {
-			this.buffers.delete(projectId);
-			this.dicts.delete(projectId);
-			const timer = this.timers.get(projectId);
-			if (timer) {
-				clearTimeout(timer);
-				this.timers.delete(projectId);
+			for (const bk of this.bufferKeysForProject(projectId)) {
+				this.buffers.delete(bk);
+				this.dicts.delete(bk);
+				this.bufferMeta.delete(bk);
+				const timer = this.timers.get(bk);
+				if (timer) {
+					clearTimeout(timer);
+					this.timers.delete(bk);
+				}
 			}
-			const file = this.projectFile(projectId);
-			if (existsSync(file)) unlinkSync(file);
+			for (const f of this.projectFiles(projectId)) unlinkSync(join(this.dir, f));
 		} else {
-			for (const [id, timer] of this.timers) clearTimeout(timer);
+			for (const [, timer] of this.timers) clearTimeout(timer);
 			this.buffers.clear();
 			this.timers.clear();
 			this.dicts.clear();
+			this.bufferMeta.clear();
 			for (const f of this.jsonlFiles()) unlinkSync(join(this.dir, f));
 		}
 	}
 	getProjects() {
 		this.flush();
 		const projects = /* @__PURE__ */ new Set();
+		const seen = /* @__PURE__ */ new Set();
 		for (const f of this.jsonlFiles()) {
+			const parsed = this.parseFilename(f);
+			if (!parsed) continue;
+			if (seen.has(parsed.projectSanitized)) continue;
+			seen.add(parsed.projectSanitized);
 			const lines = readFileSync(join(this.dir, f), "utf-8").split("\n");
 			for (const line of lines) {
 				if (!line) continue;
-				const parsed = JSON.parse(line);
-				if ("@@dict" in parsed) continue;
-				projects.add(parsed.projectId);
+				const obj = JSON.parse(line);
+				if ("@@dict" in obj) continue;
+				projects.add(obj.projectId);
 				break;
 			}
 		}
 		return [...projects];
 	}
 	getCommitIds(projectId) {
-		const renders = this.getAllRenders(projectId);
-		return [...new Set(renders.map((r) => r.commitId).filter((id) => id != null))];
+		this.flush(projectId);
+		const files = projectId ? this.projectFiles(projectId) : this.jsonlFiles();
+		const ids = /* @__PURE__ */ new Set();
+		for (const f of files) {
+			const parsed = this.parseFilename(f);
+			if (parsed?.commitId != null) ids.add(parsed.commitId);
+		}
+		return [...ids].sort((a, b) => a - b);
 	}
 	getRendersByCommit(commitId, projectId) {
-		return this.getAllRenders(projectId).filter((r) => r.commitId === commitId);
+		if (projectId) {
+			this.flush(projectId, commitId);
+			return readJsonl(this.commitFile(projectId, commitId)).map(toResult);
+		}
+		this.flush();
+		const suffix = `_commit_${commitId}.jsonl`;
+		return this.jsonlFiles().filter((f) => f.endsWith(suffix)).flatMap((f) => readJsonl(join(this.dir, f)).map(toResult));
 	}
 	getSummary(projectId) {
 		const renders = this.getAllRenders(projectId);
@@ -247,8 +276,33 @@ var RenderStore = class {
 		}
 		return summary;
 	}
-	projectFile(projectId) {
-		return join(this.dir, `${sanitizeProjectId(projectId)}.jsonl`);
+	bufferKey(projectId, commitId) {
+		return `${projectId}\0${commitId ?? NOCOMMIT}`;
+	}
+	bufferKeysForProject(projectId) {
+		const prefix = `${projectId}\0`;
+		return [...this.buffers.keys()].filter((bk) => bk.startsWith(prefix));
+	}
+	commitFile(projectId, commitId) {
+		const sanitized = sanitizeProjectId(projectId);
+		const suffix = commitId != null ? `_commit_${commitId}` : `_${NOCOMMIT}`;
+		return join(this.dir, `${sanitized}${suffix}.jsonl`);
+	}
+	projectFiles(projectId) {
+		const prefix = sanitizeProjectId(projectId);
+		return readdirSync(this.dir).filter((f) => f.startsWith(prefix) && f.endsWith(".jsonl"));
+	}
+	parseFilename(filename) {
+		if (!filename.endsWith(".jsonl")) return null;
+		const base = filename.slice(0, -6);
+		const commitMatch = base.match(/^(.+)_commit_(\d+)$/);
+		if (commitMatch) return {
+			projectSanitized: commitMatch[1],
+			commitId: Number(commitMatch[2])
+		};
+		const nocommitMatch = base.match(/^(.+)_nocommit$/);
+		if (nocommitMatch) return { projectSanitized: nocommitMatch[1] };
+		return { projectSanitized: base };
 	}
 	jsonlFiles() {
 		return readdirSync(this.dir).filter((f) => f.endsWith(".jsonl"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0x1f320.sh/why-did-you-render-mcp",
-  "version": "1.0.0-dev.7",
+  "version": "1.0.0-dev.9",
   "type": "module",
   "description": "MCP server that collects why-did-you-render data from browser and exposes it to coding agents",
   "license": "MIT",
@@ -55,6 +55,8 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
     "@types/node": "^22.14.1",
     "@types/ws": "^8.18.0",
     "@vitest/coverage-v8": "^4.1.2",