@0x1f320.sh/why-did-you-render-mcp 1.0.0-dev.2 → 1.0.0-dev.20

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.
@@ -126,6 +196,7 @@ Browser (project-b) ──┤
 - **Multiple MCP instances** can run simultaneously. Only the first instance starts the WebSocket server; others gracefully skip. All instances share the same JSONL data directory.
 - **Multi-project support** — Each project is identified by `location.origin`. Render data is stored in per-project JSONL files.
 - **No daemon required** — Each MCP instance is independent. The WebSocket server is opportunistically claimed by whichever instance starts first.
+- **Value dictionary deduplication** — Render reports often repeat the same `prevValue`/`nextValue` objects across thousands of entries. Each JSONL file stores a content-addressed dictionary on its first line, mapping xxhash-wasm hashes to unique values. Render lines reference them via `@@ref:<hash>` sentinels instead of inlining the full object, dramatically reducing file size. Reads hydrate refs transparently.
 
 ## Configuration
 

package/dist/client/index.cjs

@@ -1,92 +1 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-//#region src/client/utils/describe-value.ts
-function describeValue(value) {
-	if (value === null) return "null";
-	if (value === void 0) return "undefined";
-	if (typeof value === "function") return `function ${value.name || "anonymous"}`;
-	if (typeof value !== "object") return String(value);
-	if (Array.isArray(value)) return `Array(${value.length})`;
-	const name = Object.getPrototypeOf(value)?.constructor?.name;
-	if (name && name !== "Object") return name;
-	return "Object";
-}
-//#endregion
-//#region src/client/utils/sanitize-differences.ts
-function sanitizeDifferences(diffs) {
-	if (!Array.isArray(diffs)) return false;
-	return diffs.map((diff) => ({
-		pathString: diff.pathString,
-		diffType: diff.diffType,
-		prevValue: describeValue(diff.prevValue),
-		nextValue: describeValue(diff.nextValue)
-	}));
-}
-//#endregion
-//#region src/client/utils/sanitize-reason.ts
-function sanitizeReason(reason) {
-	return {
-		propsDifferences: sanitizeDifferences(reason.propsDifferences),
-		stateDifferences: sanitizeDifferences(reason.stateDifferences),
-		hookDifferences: sanitizeDifferences(reason.hookDifferences)
-	};
-}
-//#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", () => {
-			for (const msg of queue) ws?.send(JSON.stringify(msg));
-			queue = [];
-		});
-		ws.addEventListener("close", () => {
-			ws = null;
-			setTimeout(connect, 1e3);
-		});
-		ws.addEventListener("error", () => {
-			ws?.close();
-		});
-	}
-	connect();
-	function send(msg) {
-		if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify(msg));
-		else queue.push(msg);
-	}
-	return { notifier(info) {
-		send({
-			type: "render",
-			projectId,
-			commitId,
-			payload: {
-				displayName: info.displayName,
-				reason: sanitizeReason(info.reason),
-				hookName: info.hookName
-			}
-		});
-	} };
-}
-//#endregion
-exports.buildOptions = buildOptions;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`socket.io-client`),l=require(`error-stack-parser`);l=s(l);const u=[`whyDidYouRender`,`react-dom`,`react.development`,`react.production`,`scheduler.`,`installHook`,`console.`],d=[`trackHookChanges`,`WDYRFunctionalComponent`,`Object.notifier`,`notifier`,`console.trace`];function f(e){return u.some(t=>e.includes(t))}function p(e){return d.some(t=>e===t)}function m(e){return e.replace(/WDYR$/,``)}function h(e){let t=e.startsWith(`new `)?e.slice(4):e,n=t.lastIndexOf(`.`);return m(n>=0?t.slice(n+1):t)}function g(e){return/^use[A-Z]/.test(e)}function _(e){let t;try{t=l.default.parse(e)}catch{return[]}let n=[];for(let e of t){let t=e.fileName??``;if(!t||f(t))continue;let r=e.functionName;if(!r||p(r))continue;let i=h(r);i&&n.push({type:g(i)?`hook`:`component`,name:i,location:{path:t,line:e.lineNumber??0}})}return n}const v=Symbol.for(`react.element`),y=Symbol.for(`react.transitional.element`),b=Symbol.for(`react.memo`),x=Symbol.for(`react.forward_ref`);function S(e){if(typeof e!=`object`||!e)return!1;let t=e;return t.$$typeof===v||t.$$typeof===y||t.$$typeof===60103}function C(e){let t=!1,n=!1,r=e;for(let e=0;e<5&&!(typeof r!=`object`||!r);e++){let e=r;if(e.$$typeof===b)t=!0,r=e.type;else if(e.$$typeof===x)n=!0,r=e.render;else break}let i=`Unknown`;return typeof r==`string`?i=r:typeof r==`function`&&(i=r.displayName||r.name||`Anonymous`),{name:i,memo:t,forwardRef:n}}function w(e,t,n){let r=C(e.type),i={};if(e.props&&typeof e.props==`object`)for(let r of Object.keys(e.props))r!==`children`&&(i[r]=T(e.props[r],t,n+1));return{type:`react-node`,component:r,props:i}}function T(e,t,n){if(e==null)return null;if(typeof e==`function`)return{type:`function`,name:e.name||`anonymous`};if(typeof e==`boolean`)return e;if(typeof e==`number`)return Number.isNaN(e)?`NaN`:Number.isFinite(e)?Object.is(e,-0)?`-0`:e:e>0?`Infinity`:`-Infinity`;if(typeof e==`string`)return e;if(typeof e==`bigint`||typeof e==`symbol`)return e.toString();if(t.has(e))return`[Circular]`;if(n>=8)return`[MaxDepth]`;if(t.add(e),S(e))return w(e,t,n);if(Array.isArray(e))return e.map(e=>T(e,t,n+1));let r=Object.getPrototypeOf(e)?.constructor?.name;if(r&&r!==`Object`){if(e instanceof Date)return e.toISOString();if(e instanceof RegExp)return String(e);if(e instanceof Map){let r={};for(let[i,a]of e.entries())r[String(i)]=T(a,t,n+1);return{type:`Map`,entries:r}}if(e instanceof Set)return{type:`Set`,values:[...e].map(e=>T(e,t,n+1))};if(e instanceof Promise)return`Promise`;if(e instanceof Error)return{type:`Error`,name:e.name,message:e.message};if(typeof Node<`u`&&e instanceof Node&&e instanceof Element){let t={};for(let n of e.attributes)t[n.name]=n.value;return{type:`dom`,tagName:e.tagName.toLowerCase(),attrs:t}}return{type:`class`,name:r}}let i={};for(let r of Object.keys(e))i[r]=T(e[r],t,n+1);return i}function E(e){return T(e,new WeakSet,0)}function D(e){return Array.isArray(e)?e.map(e=>({pathString:e.pathString,diffType:e.diffType,prevValue:E(e.prevValue),nextValue:E(e.nextValue)})):!1}function O(e){return{propsDifferences:D(e.propsDifferences),stateDifferences:D(e.stateDifferences),hookDifferences:D(e.hookDifferences)}}function k(e){console.log(`%c[WDYR MCP]%c ${e}`,`color: #38bdf8; font-weight: bold`,`color: inherit; font-weight: normal`)}function A(e){globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__||(globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__={supportsFiber:!0,inject(){},onCommitFiberRoot(){},onCommitFiberUnmount(){}});let t=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__,n=t.onCommitFiberRoot.bind(t);t.onCommitFiberRoot=(...t)=>(e(),n(...t))}function j(e){let t={};return e.include&&(t.include=e.include.map(e=>e.source)),e.exclude&&(t.exclude=e.exclude.map(e=>e.source)),e.trackAllPureComponents!=null&&(t.trackAllPureComponents=e.trackAllPureComponents),e.trackHooks!=null&&(t.trackHooks=e.trackHooks),e.trackExtraHooks&&(t.trackExtraHooks=e.trackExtraHooks.map(([,e])=>e)),e.logOnDifferentValues!=null&&(t.logOnDifferentValues=e.logOnDifferentValues),e.logOwnerReasons!=null&&(t.logOwnerReasons=e.logOwnerReasons),t}function M(e){let{wsUrl:t,projectId:n,notifier:r,...i}=e??{},a=t??`http://localhost:4649`,o=n??globalThis.location?.origin??`default`,s=0;A(()=>{s++});let l=(0,c.io)(a,{reconnection:!0,reconnectionDelay:1e3,reconnectionDelayMax:3e4,transports:[`websocket`]});l.on(`connect`,()=>{k(`Connected to ${a}`),e&&l.emit(`config`,j(e),o)}),l.on(`disconnect`,()=>{k(`Disconnected, reconnecting...`)});let u=null,d=!1;function f(){d=!1,!(!u||u.reports.length===0)&&(l.emit(`render-batch`,u.reports,o,u.commitId),u=null)}return{...i,notifier(e){let t=_(Error()),n={displayName:e.displayName,reason:O(e.reason),hookName:e.hookName,...t.length>0&&{stackFrames:t}};u&&u.commitId===s?u.reports.push(n):(u&&f(),u={commitId:s,reports:[n]}),d||(d=!0,queueMicrotask(f)),r&&r(e)}}}exports.buildOptions=M;

package/dist/client/index.d.cts

@@ -1,13 +1,11 @@
-import { UpdateInfo } from "@welldone-software/why-did-you-render";
+import { WhyDidYouRenderOptions } from "@welldone-software/why-did-you-render";
 
 //#region src/client/index.d.ts
 sideEffect();
-interface ClientOptions {
+interface ClientOptions extends WhyDidYouRenderOptions {
   wsUrl?: string;
   projectId?: string;
 }
-declare function buildOptions(opts?: ClientOptions): {
-  notifier(info: UpdateInfo): void;
-};
+declare function buildOptions(opts?: ClientOptions): WhyDidYouRenderOptions;
 //#endregion
 export { ClientOptions, buildOptions };

package/dist/client/index.d.ts

@@ -1,13 +1,11 @@
-import { UpdateInfo } from "@welldone-software/why-did-you-render";
+import { WhyDidYouRenderOptions } from "@welldone-software/why-did-you-render";
 
 //#region src/client/index.d.ts
 sideEffect();
-interface ClientOptions {
+interface ClientOptions extends WhyDidYouRenderOptions {
   wsUrl?: string;
   projectId?: string;
 }
-declare function buildOptions(opts?: ClientOptions): {
-  notifier(info: UpdateInfo): void;
-};
+declare function buildOptions(opts?: ClientOptions): WhyDidYouRenderOptions;
 //#endregion
 export { ClientOptions, buildOptions };

package/dist/client/index.js

@@ -1,91 +1 @@
-//#region src/client/utils/describe-value.ts
-function describeValue(value) {
-	if (value === null) return "null";
-	if (value === void 0) return "undefined";
-	if (typeof value === "function") return `function ${value.name || "anonymous"}`;
-	if (typeof value !== "object") return String(value);
-	if (Array.isArray(value)) return `Array(${value.length})`;
-	const name = Object.getPrototypeOf(value)?.constructor?.name;
-	if (name && name !== "Object") return name;
-	return "Object";
-}
-//#endregion
-//#region src/client/utils/sanitize-differences.ts
-function sanitizeDifferences(diffs) {
-	if (!Array.isArray(diffs)) return false;
-	return diffs.map((diff) => ({
-		pathString: diff.pathString,
-		diffType: diff.diffType,
-		prevValue: describeValue(diff.prevValue),
-		nextValue: describeValue(diff.nextValue)
-	}));
-}
-//#endregion
-//#region src/client/utils/sanitize-reason.ts
-function sanitizeReason(reason) {
-	return {
-		propsDifferences: sanitizeDifferences(reason.propsDifferences),
-		stateDifferences: sanitizeDifferences(reason.stateDifferences),
-		hookDifferences: sanitizeDifferences(reason.hookDifferences)
-	};
-}
-//#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", () => {
-			for (const msg of queue) ws?.send(JSON.stringify(msg));
-			queue = [];
-		});
-		ws.addEventListener("close", () => {
-			ws = null;
-			setTimeout(connect, 1e3);
-		});
-		ws.addEventListener("error", () => {
-			ws?.close();
-		});
-	}
-	connect();
-	function send(msg) {
-		if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify(msg));
-		else queue.push(msg);
-	}
-	return { notifier(info) {
-		send({
-			type: "render",
-			projectId,
-			commitId,
-			payload: {
-				displayName: info.displayName,
-				reason: sanitizeReason(info.reason),
-				hookName: info.hookName
-			}
-		});
-	} };
-}
-//#endregion
-export { buildOptions };
+import{io as e}from"socket.io-client";import t from"error-stack-parser";const n=[`whyDidYouRender`,`react-dom`,`react.development`,`react.production`,`scheduler.`,`installHook`,`console.`],r=[`trackHookChanges`,`WDYRFunctionalComponent`,`Object.notifier`,`notifier`,`console.trace`];function i(e){return n.some(t=>e.includes(t))}function a(e){return r.some(t=>e===t)}function o(e){return e.replace(/WDYR$/,``)}function s(e){let t=e.startsWith(`new `)?e.slice(4):e,n=t.lastIndexOf(`.`);return o(n>=0?t.slice(n+1):t)}function c(e){return/^use[A-Z]/.test(e)}function l(e){let n;try{n=t.parse(e)}catch{return[]}let r=[];for(let e of n){let t=e.fileName??``;if(!t||i(t))continue;let n=e.functionName;if(!n||a(n))continue;let o=s(n);o&&r.push({type:c(o)?`hook`:`component`,name:o,location:{path:t,line:e.lineNumber??0}})}return r}const u=Symbol.for(`react.element`),d=Symbol.for(`react.transitional.element`),f=Symbol.for(`react.memo`),p=Symbol.for(`react.forward_ref`);function m(e){if(typeof e!=`object`||!e)return!1;let t=e;return t.$$typeof===u||t.$$typeof===d||t.$$typeof===60103}function h(e){let t=!1,n=!1,r=e;for(let e=0;e<5&&!(typeof r!=`object`||!r);e++){let e=r;if(e.$$typeof===f)t=!0,r=e.type;else if(e.$$typeof===p)n=!0,r=e.render;else break}let i=`Unknown`;return typeof r==`string`?i=r:typeof r==`function`&&(i=r.displayName||r.name||`Anonymous`),{name:i,memo:t,forwardRef:n}}function g(e,t,n){let r=h(e.type),i={};if(e.props&&typeof e.props==`object`)for(let r of Object.keys(e.props))r!==`children`&&(i[r]=_(e.props[r],t,n+1));return{type:`react-node`,component:r,props:i}}function _(e,t,n){if(e==null)return null;if(typeof e==`function`)return{type:`function`,name:e.name||`anonymous`};if(typeof e==`boolean`)return e;if(typeof e==`number`)return Number.isNaN(e)?`NaN`:Number.isFinite(e)?Object.is(e,-0)?`-0`:e:e>0?`Infinity`:`-Infinity`;if(typeof e==`string`)return e;if(typeof e==`bigint`||typeof e==`symbol`)return e.toString();if(t.has(e))return`[Circular]`;if(n>=8)return`[MaxDepth]`;if(t.add(e),m(e))return g(e,t,n);if(Array.isArray(e))return e.map(e=>_(e,t,n+1));let r=Object.getPrototypeOf(e)?.constructor?.name;if(r&&r!==`Object`){if(e instanceof Date)return e.toISOString();if(e instanceof RegExp)return String(e);if(e instanceof Map){let r={};for(let[i,a]of e.entries())r[String(i)]=_(a,t,n+1);return{type:`Map`,entries:r}}if(e instanceof Set)return{type:`Set`,values:[...e].map(e=>_(e,t,n+1))};if(e instanceof Promise)return`Promise`;if(e instanceof Error)return{type:`Error`,name:e.name,message:e.message};if(typeof Node<`u`&&e instanceof Node&&e instanceof Element){let t={};for(let n of e.attributes)t[n.name]=n.value;return{type:`dom`,tagName:e.tagName.toLowerCase(),attrs:t}}return{type:`class`,name:r}}let i={};for(let r of Object.keys(e))i[r]=_(e[r],t,n+1);return i}function v(e){return _(e,new WeakSet,0)}function y(e){return Array.isArray(e)?e.map(e=>({pathString:e.pathString,diffType:e.diffType,prevValue:v(e.prevValue),nextValue:v(e.nextValue)})):!1}function b(e){return{propsDifferences:y(e.propsDifferences),stateDifferences:y(e.stateDifferences),hookDifferences:y(e.hookDifferences)}}function x(e){console.log(`%c[WDYR MCP]%c ${e}`,`color: #38bdf8; font-weight: bold`,`color: inherit; font-weight: normal`)}function S(e){globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__||(globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__={supportsFiber:!0,inject(){},onCommitFiberRoot(){},onCommitFiberUnmount(){}});let t=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__,n=t.onCommitFiberRoot.bind(t);t.onCommitFiberRoot=(...t)=>(e(),n(...t))}function C(e){let t={};return e.include&&(t.include=e.include.map(e=>e.source)),e.exclude&&(t.exclude=e.exclude.map(e=>e.source)),e.trackAllPureComponents!=null&&(t.trackAllPureComponents=e.trackAllPureComponents),e.trackHooks!=null&&(t.trackHooks=e.trackHooks),e.trackExtraHooks&&(t.trackExtraHooks=e.trackExtraHooks.map(([,e])=>e)),e.logOnDifferentValues!=null&&(t.logOnDifferentValues=e.logOnDifferentValues),e.logOwnerReasons!=null&&(t.logOwnerReasons=e.logOwnerReasons),t}function w(t){let{wsUrl:n,projectId:r,notifier:i,...a}=t??{},o=n??`http://localhost:4649`,s=r??globalThis.location?.origin??`default`,c=0;S(()=>{c++});let u=e(o,{reconnection:!0,reconnectionDelay:1e3,reconnectionDelayMax:3e4,transports:[`websocket`]});u.on(`connect`,()=>{x(`Connected to ${o}`),t&&u.emit(`config`,C(t),s)}),u.on(`disconnect`,()=>{x(`Disconnected, reconnecting...`)});let d=null,f=!1;function p(){f=!1,!(!d||d.reports.length===0)&&(u.emit(`render-batch`,d.reports,s,d.commitId),d=null)}return{...a,notifier(e){let t=l(Error()),n={displayName:e.displayName,reason:b(e.reason),hookName:e.hookName,...t.length>0&&{stackFrames:t}};d&&d.commitId===c?d.reports.push(n):(d&&p(),d={commitId:c,reports:[n]}),f||(f=!0,queueMicrotask(p)),i&&i(e)}}}export{w as buildOptions};

package/dist/server/index.js

@@ -1,384 +1,12 @@
 #!/usr/bin/env node
-import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
-import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
-import { z } from "zod";
-import { appendFileSync, existsSync, mkdirSync, readFileSync, readdirSync, unlinkSync } from "node:fs";
-import { homedir } from "node:os";
-import { join } from "node:path";
-import { WebSocketServer } from "ws";
-//#region src/server/store/utils/read-jsonl.ts
-function readJsonl(file) {
-	if (!existsSync(file)) return [];
-	return readFileSync(file, "utf-8").split("\n").filter(Boolean).map((line) => JSON.parse(line));
-}
-//#endregion
-//#region src/server/store/utils/sanitize-project-id.ts
-function sanitizeProjectId(projectId) {
-	return projectId.replaceAll(/[^a-zA-Z0-9_.-]/g, "_");
-}
-//#endregion
-//#region src/server/store/utils/to-result.ts
-function toResult(stored) {
-	return {
-		project: stored.projectId,
-		displayName: stored.displayName,
-		reason: stored.reason,
-		...stored.hookName != null && { hookName: stored.hookName },
-		...stored.commitId != null && { commitId: stored.commitId }
-	};
-}
-//#endregion
-//#region src/server/store/render-store.ts
-const FLUSH_DELAY_MS = 200;
-var RenderStore = class {
-	dir;
-	buffers = /* @__PURE__ */ new Map();
-	timers = /* @__PURE__ */ new Map();
-	constructor(dir) {
-		this.dir = dir ?? join(homedir(), ".wdyr-mcp", "renders");
-		mkdirSync(this.dir, { recursive: true });
-	}
-	addRender(report, projectId, commitId) {
-		const stored = {
-			...report,
-			projectId,
-			...commitId != null && { commitId }
-		};
-		let buf = this.buffers.get(projectId);
-		if (!buf) {
-			buf = [];
-			this.buffers.set(projectId, buf);
-		}
-		buf.push(stored);
-		const existing = this.timers.get(projectId);
-		if (existing) clearTimeout(existing);
-		this.timers.set(projectId, setTimeout(() => this.flush(projectId), FLUSH_DELAY_MS));
-	}
-	flush(projectId) {
-		if (projectId) this.flushProject(projectId);
-		else for (const id of this.buffers.keys()) this.flushProject(id);
-	}
-	flushProject(projectId) {
-		const buf = this.buffers.get(projectId);
-		if (!buf || buf.length === 0) return;
-		const lines = buf.map((s) => JSON.stringify(s)).join("\n");
-		appendFileSync(this.projectFile(projectId), `${lines}\n`);
-		buf.length = 0;
-		const timer = this.timers.get(projectId);
-		if (timer) {
-			clearTimeout(timer);
-			this.timers.delete(projectId);
-		}
-	}
-	getAllRenders(projectId) {
-		this.flush(projectId);
-		if (projectId) return readJsonl(this.projectFile(projectId)).map(toResult);
-		return this.jsonlFiles().flatMap((f) => readJsonl(join(this.dir, f)).map(toResult));
-	}
-	getRendersByComponent(componentName, projectId) {
-		return this.getAllRenders(projectId).filter((r) => r.displayName === componentName);
-	}
-	clearRenders(projectId) {
-		if (projectId) {
-			this.buffers.delete(projectId);
-			const timer = this.timers.get(projectId);
-			if (timer) {
-				clearTimeout(timer);
-				this.timers.delete(projectId);
-			}
-			const file = this.projectFile(projectId);
-			if (existsSync(file)) unlinkSync(file);
-		} else {
-			for (const [id, timer] of this.timers) clearTimeout(timer);
-			this.buffers.clear();
-			this.timers.clear();
-			for (const f of this.jsonlFiles()) unlinkSync(join(this.dir, f));
-		}
-	}
-	getProjects() {
-		this.flush();
-		const projects = /* @__PURE__ */ new Set();
-		for (const f of this.jsonlFiles()) {
-			const firstLine = readFileSync(join(this.dir, f), "utf-8").split("\n")[0];
-			if (!firstLine) continue;
-			const stored = JSON.parse(firstLine);
-			projects.add(stored.projectId);
-		}
-		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 = {};
-		for (const r of renders) {
-			summary[r.project] ??= {};
-			const project = summary[r.project];
-			project[r.displayName] = (project[r.displayName] ?? 0) + 1;
-		}
-		return summary;
-	}
-	projectFile(projectId) {
-		return join(this.dir, `${sanitizeProjectId(projectId)}.jsonl`);
-	}
-	jsonlFiles() {
-		return readdirSync(this.dir).filter((f) => f.endsWith(".jsonl"));
-	}
-};
-//#endregion
-//#region src/server/store/index.ts
-const store = new RenderStore();
-//#endregion
-//#region src/server/tools/utils/resolve-project.ts
-/**
-* Resolves the project to use. If a project is explicitly given, use it.
-* If only one project exists, auto-select it. If multiple exist, return
-* a message asking the agent to disambiguate.
-*/
-function resolveProject(project) {
-	if (project) return { projectId: project };
-	const projects = store.getProjects();
-	if (projects.length === 0) return { projectId: void 0 };
-	if (projects.length === 1) return { projectId: projects[0] };
-	return {
-		projectId: void 0,
-		error: [
-			"Multiple projects are recording render data. Ask the user which project they are working on (e.g. their dev server URL like http://localhost:3000).",
-			"",
-			"Active projects:",
-			...projects.map((p) => `- ${p}`)
-		].join("\n")
-	};
-}
-//#endregion
-//#region src/server/tools/utils/text-result.ts
-function textResult(text) {
-	return { content: [{
-		type: "text",
-		text
-	}] };
-}
-//#endregion
-//#region src/server/tools/clear-renders.ts
-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.",
-		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);
-		store.clearRenders(resolved.projectId);
-		return textResult(resolved.projectId ? `Render data cleared for ${resolved.projectId}.` : "All render data cleared.");
-	});
-}
-//#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$3(server) {
-	server.registerTool("get_projects", {
-		title: "Get Projects",
-		description: "Returns a list of project identifiers (browser origin URLs) that have recorded render data.",
-		inputSchema: {}
-	}, async () => {
-		const projects = store.getProjects();
-		if (projects.length === 0) return textResult("No projects have recorded render data yet.");
-		return textResult(`Active projects:\n${projects.map((p) => `- ${p}`).join("\n")}`);
-	});
-}
-//#endregion
-//#region src/server/tools/get-render-summary.ts
-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.",
-		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 summary = store.getSummary(resolved.projectId);
-		if (Object.keys(summary).length === 0) return textResult("No unnecessary renders recorded yet.");
-		const lines = [];
-		for (const [projectId, components] of Object.entries(summary)) {
-			lines.push(`[${projectId}]`);
-			for (const [name, count] of Object.entries(components)) lines.push(`  ${name}: ${count} re-render(s)`);
-		}
-		return textResult(`Unnecessary re-render summary:\n\n${lines.join("\n")}`);
-	});
-}
-//#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", {
-		title: "Get Unnecessary Renders",
-		description: "Returns all unnecessary 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.",
-		inputSchema: {
-			component: z.string().optional().describe("Filter by component name. Omit to get all renders."),
-			project: z.string().optional().describe("Project identifier (the browser's origin URL, e.g. http://localhost:3000). Omit to auto-detect.")
-		}
-	}, async ({ component, project }) => {
-		const resolved = resolveProject(project);
-		if (resolved.error) return textResult(resolved.error);
-		const renders = component ? store.getRendersByComponent(component, resolved.projectId) : store.getAllRenders(resolved.projectId);
-		if (renders.length === 0) return textResult(component ? `No unnecessary renders recorded for "${component}".` : "No unnecessary renders recorded yet. Make sure the browser is connected and triggering re-renders.");
-		return textResult(JSON.stringify(renders, null, 2));
-	});
-}
-//#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);
-}
-//#endregion
-//#region src/server/liveness.ts
-const DEFAULT_INTERVAL_MS = 3e4;
-var HeartbeatManager = class {
-	connections = /* @__PURE__ */ new Map();
-	timer;
-	constructor(wss, store, intervalMs = DEFAULT_INTERVAL_MS) {
-		this.wss = wss;
-		this.store = store;
-		this.timer = setInterval(() => this.check(), intervalMs);
-	}
-	trackConnection(ws) {
-		this.connections.set(ws, {
-			isAlive: true,
-			projectId: null
-		});
-		ws.on("pong", () => {
-			const meta = this.connections.get(ws);
-			if (meta) meta.isAlive = true;
-		});
-		ws.on("close", () => {
-			this.connections.delete(ws);
-		});
-	}
-	setProjectId(ws, projectId) {
-		const meta = this.connections.get(ws);
-		if (meta) meta.projectId = projectId;
-	}
-	stop() {
-		clearInterval(this.timer);
-		this.connections.clear();
-	}
-	check() {
-		for (const [ws, meta] of this.connections) {
-			if (!meta.isAlive) {
-				this.connections.delete(ws);
-				ws.terminate();
-				if (meta.projectId && !this.hasOtherConnection(ws, meta.projectId)) {
-					console.error(`[wdyr-mcp] client for ${meta.projectId} is dead, clearing render data`);
-					this.store.clearRenders(meta.projectId);
-				}
-				continue;
-			}
-			meta.isAlive = false;
-			ws.ping();
-		}
-	}
-	hasOtherConnection(deadWs, projectId) {
-		for (const [ws, meta] of this.connections) if (ws !== deadWs && meta.projectId === projectId) return true;
-		return false;
-	}
-};
-//#endregion
-//#region src/server/ws.ts
-function createWsServer(port) {
-	const wss = new WebSocketServer({
-		port,
-		host: "127.0.0.1"
-	});
-	const heartbeat = new HeartbeatManager(wss, store);
-	wss.on("error", (err) => {
-		if (err.code === "EADDRINUSE") console.error(`[wdyr-mcp] Port ${port} already in use, another instance owns the WS server. Skipping.`);
-		else console.error("[wdyr-mcp] WS server error:", err);
-	});
-	wss.on("listening", () => {
-		console.error(`[wdyr-mcp] WebSocket server listening on ws://localhost:${port}`);
-	});
-	wss.on("connection", (ws) => {
-		console.error(`[wdyr-mcp] browser connected (ws://localhost:${port})`);
-		heartbeat.trackConnection(ws);
-		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, msg.commitId);
-				}
-			} catch {
-				console.error("[wdyr-mcp] invalid message received");
-			}
-		});
-		ws.on("close", () => {
-			console.error("[wdyr-mcp] browser disconnected");
-		});
-	});
-	wss.on("close", () => {
-		heartbeat.stop();
-	});
-	return wss;
-}
-//#endregion
-//#region src/server/index.ts
-const DEFAULT_WS_PORT = 4649;
-const server = new McpServer({
-	name: "why-did-you-render",
-	version: "0.0.0"
-});
-registerTools(server);
-async function main() {
-	createWsServer(Number(process.env.WDYR_WS_PORT) || DEFAULT_WS_PORT);
-	const transport = new StdioServerTransport();
-	await server.connect(transport);
-	console.error("[wdyr-mcp] MCP server running on stdio");
-}
-main().catch((error) => {
-	console.error("[wdyr-mcp] Fatal error:", error);
-	process.exit(1);
-});
-//#endregion
-export {};
+import{McpServer as e}from"@modelcontextprotocol/sdk/server/mcp.js";import{StdioServerTransport as t}from"@modelcontextprotocol/sdk/server/stdio.js";import{z as n}from"zod";import{existsSync as r,mkdirSync as i,readFileSync as a,readdirSync as o,unlinkSync as s,writeFileSync as c}from"node:fs";import{homedir as l}from"node:os";import{join as u}from"node:path";import d from"xxhash-wasm";import f from"node:http";import{Server as p}from"socket.io";const m=`@@dict`,h=`@@ref:`;let g;const _=d().then(e=>{g=e.h64ToString});function v(){return _}function y(e){return g(JSON.stringify(e))}function b(e){return typeof e==`object`&&!!e}function x(e,t){return e?e.map(e=>{let{prevValue:n,nextValue:r}=e;if(b(n)){let e=y(n);t[e]??=n,n=`${h}${e}`}if(b(r)){let e=y(r);t[e]??=r,r=`${h}${e}`}return n===e.prevValue&&r===e.nextValue?e:{...e,prevValue:n,nextValue:r}}):!1}function S(e,t){let{propsDifferences:n,stateDifferences:r,hookDifferences:i}=e.reason,a=x(n,t),o=x(r,t),s=x(i,t);return a===n&&o===r&&s===i?e:{...e,reason:{propsDifferences:a,stateDifferences:o,hookDifferences:s}}}function C(e,t){return e?e.map(e=>{let{prevValue:n,nextValue:r}=e;return typeof n==`string`&&n.startsWith(h)&&(n=t[n.slice(6)]??n),typeof r==`string`&&r.startsWith(h)&&(r=t[r.slice(6)]??r),n===e.prevValue&&r===e.nextValue?e:{...e,prevValue:n,nextValue:r}}):!1}function w(e,t){let{propsDifferences:n,stateDifferences:r,hookDifferences:i}=e.reason,a=C(n,t),o=C(r,t),s=C(i,t);return a===n&&o===r&&s===i?e:{...e,reason:{propsDifferences:a,stateDifferences:o,hookDifferences:s}}}function T(e){if(!r(e))return[];let t=a(e,`utf-8`).split(`
+`).filter(Boolean);if(t.length===0)return[];let n,i=0,o=JSON.parse(t[0]);`@@dict`in o&&(n=o[m],i=1);let s=t.slice(i).map(e=>JSON.parse(e));return n?s.map(e=>w(e,n)):s}function E(e){return e.replaceAll(/[^a-zA-Z0-9_.-]/g,`_`)}function D(e){return{project:e.projectId,displayName:e.displayName,reason:e.reason,...e.hookName!=null&&{hookName:e.hookName},...e.commitId!=null&&{commitId:e.commitId},...e.timestamp!=null&&{timestamp:e.timestamp}}}const O=`nocommit`,k=new class{dir;buffers=new Map;timers=new Map;dicts=new Map;bufferMeta=new Map;trackedComponents=new Map;wdyrConfigs=new Map;constructor(e){this.dir=e??u(l(),`.wdyr-mcp`,`renders`),i(this.dir,{recursive:!0})}addRender(e,t,n){let r={...e,projectId:t,timestamp:Date.now(),...n!=null&&{commitId:n}},i=this.bufferKey(t,n),a=this.buffers.get(i);a||(a=[],this.buffers.set(i,a),this.bufferMeta.set(i,{projectId:t,commitId:n})),a.push(r);let o=this.timers.get(i);o&&clearTimeout(o),this.timers.set(i,setTimeout(()=>{this.flushAsync(t,n).catch(e=>console.error(`[wdyr-mcp] flush error for ${i}:`,e))},200))}async flushAsync(e,t){await v(),this.flush(e,t)}flush(e,t){if(e!=null&&t!==void 0)this.flushBuffer(this.bufferKey(e,t));else if(e!=null)for(let t of this.bufferKeysForProject(e))this.flushBuffer(t);else for(let e of[...this.buffers.keys()])this.flushBuffer(e)}flushBuffer(e){let t=this.buffers.get(e);if(!t||t.length===0)return;let n=this.bufferMeta.get(e);if(!n)return;let r=this.dicts.get(e);r||(r={},this.dicts.set(e,r));let i=t.map(e=>S(e,r)),a=this.commitFile(n.projectId,n.commitId),o=this.readDataLines(a),s=i.map(e=>JSON.stringify(e)),l=[...o,...s];c(a,`${(Object.keys(r).length>0?[JSON.stringify({[m]:r}),...l]:l).join(`
+`)}\n`),t.length=0;let u=this.timers.get(e);u&&(clearTimeout(u),this.timers.delete(e))}readDataLines(e){return r(e)?a(e,`utf-8`).split(`
+`).filter(e=>!(!e||e.startsWith(`{"@@dict"`))):[]}getAllRenders(e){return this.flush(e),e?this.projectFiles(e).flatMap(e=>T(u(this.dir,e)).map(D)):this.jsonlFiles().flatMap(e=>T(u(this.dir,e)).map(D))}getRendersByComponent(e,t){return this.getAllRenders(t).filter(t=>t.displayName===e)}clearRenders(e){if(e){for(let t of this.bufferKeysForProject(e)){this.buffers.delete(t),this.dicts.delete(t),this.bufferMeta.delete(t);let e=this.timers.get(t);e&&(clearTimeout(e),this.timers.delete(t))}for(let t of this.projectFiles(e))s(u(this.dir,t))}else{for(let[,e]of this.timers)clearTimeout(e);this.buffers.clear(),this.timers.clear(),this.dicts.clear(),this.bufferMeta.clear();for(let e of this.jsonlFiles())s(u(this.dir,e))}}clearRendersByComponent(e,t){this.flush(t);let n=t?this.projectFiles(t):this.jsonlFiles(),r=0;for(let t of n){let n=u(this.dir,t),i=T(n),a=i.length,o=i.filter(t=>t.displayName!==e);r+=a-o.length,o.length===0?(s(n),this.clearBuffersForFile(t)):o.length<a&&(this.rewriteFile(n,o),this.clearBuffersForFile(t))}return r}clearRendersByCommit(e,t){this.flush(t);let n=t?this.projectFiles(t):this.jsonlFiles(),r=0;for(let t of n){let n=this.parseFilename(t);n?.commitId!=null&&n.commitId<e&&(s(u(this.dir,t)),this.clearBuffersForFile(t),r++)}return r}getProjects(){this.flush();let e=new Set,t=new Set;for(let n of this.jsonlFiles()){let r=this.parseFilename(n);if(!r||t.has(r.projectSanitized))continue;t.add(r.projectSanitized);let i=a(u(this.dir,n),`utf-8`).split(`
+`);for(let t of i){if(!t)continue;let n=JSON.parse(t);if(!(`@@dict`in n)){e.add(n.projectId);break}}}return[...e]}getCommitIds(e){this.flush(e);let t=e?this.projectFiles(e):this.jsonlFiles(),n=new Set;for(let e of t){let t=this.parseFilename(e);t?.commitId!=null&&n.add(t.commitId)}return[...n].sort((e,t)=>e-t)}getCommits(e){this.flush(e);let t=e?this.projectFiles(e):this.jsonlFiles(),n=[];for(let e of t){let t=this.parseFilename(e);if(t?.commitId==null)continue;let r=T(u(this.dir,e));r.length!==0&&n.push({commitId:t.commitId,timestamp:r.find(e=>e.timestamp!=null)?.timestamp??null,renderCount:r.length,components:[...new Set(r.map(e=>e.displayName))]})}return n.sort((e,t)=>e.commitId-t.commitId)}getRendersByCommit(e,t){if(t)return this.flush(t,e),T(this.commitFile(t,e)).map(D);this.flush();let n=`_commit_${e}.jsonl`;return this.jsonlFiles().filter(e=>e.endsWith(n)).flatMap(e=>T(u(this.dir,e)).map(D))}getSummary(e){let t=this.getAllRenders(e),n={};for(let e of t){n[e.project]??={};let t=n[e.project];t[e.displayName]??={count:0,reasons:{props:0,state:0,hooks:0}};let r=t[e.displayName];r.count++,Array.isArray(e.reason.propsDifferences)&&r.reasons.props++,Array.isArray(e.reason.stateDifferences)&&r.reasons.state++,Array.isArray(e.reason.hookDifferences)&&r.reasons.hooks++}return n}getSummaryByCommit(e){let t=this.getAllRenders(e),n={};for(let e of t){if(e.commitId==null)continue;n[e.project]??={},n[e.project][e.commitId]??={};let t=n[e.project][e.commitId];t[e.displayName]??={count:0,reasons:{props:0,state:0,hooks:0}};let r=t[e.displayName];r.count++,Array.isArray(e.reason.propsDifferences)&&r.reasons.props++,Array.isArray(e.reason.stateDifferences)&&r.reasons.state++,Array.isArray(e.reason.hookDifferences)&&r.reasons.hooks++}return n}setTrackedComponents(e,t){this.trackedComponents.set(t,e)}getTrackedComponents(e){let t={},n=e?[e]:this.getProjects();for(let e of n){let n=[...new Set(this.getAllRenders(e).map(e=>e.displayName))];t[e]={registered:this.trackedComponents.get(e)??[],observed:n}}return t}setWdyrConfig(e,t){this.wdyrConfigs.set(t,e)}getWdyrConfig(e){let t={};if(e){let n=this.wdyrConfigs.get(e);n&&(t[e]=n)}else for(let[e,n]of this.wdyrConfigs)t[e]=n;return t}rewriteFile(e,t){c(e,`${t.map(e=>JSON.stringify(e)).join(`
+`)}\n`)}clearBuffersForFile(e){let t=this.parseFilename(e);if(t)for(let[e,n]of this.bufferMeta){if(E(n.projectId)!==t.projectSanitized||!(t.commitId==null?n.commitId==null:n.commitId===t.commitId))continue;this.buffers.delete(e),this.dicts.delete(e),this.bufferMeta.delete(e);let r=this.timers.get(e);r&&(clearTimeout(r),this.timers.delete(e))}}bufferKey(e,t){return`${e}\0${t??O}`}bufferKeysForProject(e){let t=`${e}\0`;return[...this.buffers.keys()].filter(e=>e.startsWith(t))}commitFile(e,t){let n=E(e),r=t==null?`_${O}`:`_commit_${t}`;return u(this.dir,`${n}${r}.jsonl`)}projectFiles(e){let t=E(e);return o(this.dir).filter(e=>e.startsWith(t)&&e.endsWith(`.jsonl`))}parseFilename(e){if(!e.endsWith(`.jsonl`))return null;let t=e.slice(0,-6),n=t.match(/^(.+)_commit_(\d+)$/);if(n)return{projectSanitized:n[1],commitId:Number(n[2])};let r=t.match(/^(.+)_nocommit$/);return r?{projectSanitized:r[1]}:{projectSanitized:t}}jsonlFiles(){return o(this.dir).filter(e=>e.endsWith(`.jsonl`))}};function A(e){if(e)return{projectId:e};let t=k.getProjects();return t.length===0?{projectId:void 0}:t.length===1?{projectId:t[0]}:{projectId:void 0,error:[`Multiple projects are recording render data. Ask the user which project they are working on (e.g. their dev server URL like http://localhost:3000).`,``,`Active projects:`,...t.map(e=>`- ${e}`)].join(`
+`)}}function j(e){return{content:[{type:`text`,text:e}]}}function M(e){e.registerTool(`clear_renders`,{title:`Clear Renders`,description:`Clears collected render data. Supports filtering by component name or by commit ID threshold. When no filter is given, clears all data. If multiple projects are active and no project is specified, the tool will ask you to disambiguate.`,inputSchema:{project:n.string().optional().describe(`Project identifier (the browser's origin URL, e.g. http://localhost:3000). Omit to auto-detect.`),component:n.string().optional().describe(`Clear only renders for this component (by displayName).`),beforeCommit:n.number().optional().describe(`Clear all renders from commits with an ID strictly less than this value.`)}},async({project:e,component:t,beforeCommit:n})=>{let r=A(e);return r.error?j(r.error):t?j(`Cleared ${k.clearRendersByComponent(t,r.projectId)} render(s) for component "${t}".`):n==null?(k.clearRenders(r.projectId),j(r.projectId?`Render data cleared for ${r.projectId}.`:`All render data cleared.`)):j(`Cleared renders from ${k.clearRendersByCommit(n,r.projectId)} commit file(s) before commit #${n}.`)})}function N(e){e.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:n.string().optional().describe(`Project identifier (the browser's origin URL, e.g. http://localhost:3000). Omit to auto-detect.`)}},async({project:e})=>{let t=A(e);if(t.error)return j(t.error);let n=k.getCommits(t.projectId);return n.length===0?j(`No commits recorded yet. Make sure the browser is connected and triggering re-renders.`):j(JSON.stringify(n,null,2))})}function P(e){e.registerTool(`get_projects`,{title:`Get Projects`,description:`Returns a list of project identifiers (browser origin URLs) that have recorded render data.`,inputSchema:{}},async()=>{let e=k.getProjects();return e.length===0?j(`No projects have recorded render data yet.`):j(`Active projects:\n${e.map(e=>`- ${e}`).join(`
+`)}`)})}function F(e){e.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.`,inputSchema:{project:n.string().optional().describe(`Project identifier (the browser's origin URL, e.g. http://localhost:3000). Omit to auto-detect.`),groupBy:n.enum([`commit`]).optional().describe(`Group results by commit. When set to 'commit', returns per-commit render summaries instead of a single aggregate.`)}},async({project:e,groupBy:t})=>{let n=A(e);return n.error?j(n.error):t===`commit`?R(n.projectId):L(n.projectId)})}function I(e){let t=[];return e.props>0&&t.push(`props: ${e.props}`),e.state>0&&t.push(`state: ${e.state}`),e.hooks>0&&t.push(`hooks: ${e.hooks}`),t.length>0?` — ${t.join(`, `)}`:``}function L(e){let t=k.getSummary(e);if(Object.keys(t).length===0)return j(`No renders recorded yet.`);let n=[];for(let[e,r]of Object.entries(t)){n.push(`[${e}]`);for(let[e,{count:t,reasons:i}]of Object.entries(r))n.push(`  ${e}: ${t} re-render(s)${I(i)}`)}return j(`Re-render summary:\n\n${n.join(`
+`)}`)}function R(e){let t=k.getSummaryByCommit(e);if(Object.keys(t).length===0)return j(`No renders with commit IDs recorded yet.`);let n=[];for(let[e,r]of Object.entries(t)){n.push(`[${e}]`);let t=Object.keys(r).map(Number).sort((e,t)=>e-t);for(let e of t){let t=r[e],i=Object.values(t).reduce((e,t)=>e+t.count,0);n.push(`  Commit #${e} (${i} re-render(s)):`);for(let[e,{count:r,reasons:i}]of Object.entries(t))n.push(`    ${e}: ${r}${I(i)}`)}}return j(`Re-render summary (by commit):\n\n${n.join(`
+`)}`)}function z(e){e.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.`,inputSchema:{commitId:n.number().describe(`The React commit ID to filter by.`),component:n.string().optional().describe(`Filter by component name. Omit to get all renders.`),project:n.string().optional().describe(`Project identifier (the browser's origin URL, e.g. http://localhost:3000). Omit to auto-detect.`)}},async({commitId:e,component:t,project:n})=>{let r=A(n);if(r.error)return j(r.error);let i=k.getRendersByCommit(e,r.projectId);return t&&(i=i.filter(e=>e.displayName===t)),i.length===0?j(t?`No renders recorded for component "${t}" in commit ${e}.`:`No renders recorded for commit ${e}.`):j(JSON.stringify(i,null,2))})}function B(e){e.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.`,inputSchema:{component:n.string().optional().describe(`Filter by component name. Omit to get all renders.`),project:n.string().optional().describe(`Project identifier (the browser's origin URL, e.g. http://localhost:3000). Omit to auto-detect.`)}},async({component:e,project:t})=>{let n=A(t);if(n.error)return j(n.error);let r=e?k.getRendersByComponent(e,n.projectId):k.getAllRenders(n.projectId);return r.length===0?j(e?`No renders recorded for "${e}".`:`No renders recorded yet. Make sure the browser is connected and triggering re-renders.`):j(JSON.stringify(r,null,2))})}function V(e){let t=[];if(e.include?.length){t.push(`  include:`);for(let n of e.include)t.push(`    - /${n}/`)}if(e.exclude?.length){t.push(`  exclude:`);for(let n of e.exclude)t.push(`    - /${n}/`)}if(e.trackAllPureComponents!=null&&t.push(`  trackAllPureComponents: ${e.trackAllPureComponents}`),e.trackHooks!=null&&t.push(`  trackHooks: ${e.trackHooks}`),e.trackExtraHooks?.length){t.push(`  trackExtraHooks:`);for(let n of e.trackExtraHooks)t.push(`    - ${n}`)}return e.logOnDifferentValues!=null&&t.push(`  logOnDifferentValues: ${e.logOnDifferentValues}`),e.logOwnerReasons!=null&&t.push(`  logOwnerReasons: ${e.logOwnerReasons}`),t}function H(e){e.registerTool(`get_tracked_components`,{title:`Get Tracked Components`,description:`Returns the why-did-you-render configuration for the connected project, including include/exclude filters and tracking options. Also shows components observed in render data. If multiple projects are active and no project is specified, the tool will ask you to disambiguate.`,inputSchema:{project:n.string().optional().describe(`Project identifier (the browser's origin URL, e.g. http://localhost:3000). Omit to auto-detect.`)}},async({project:e})=>{let t=A(e);if(t.error)return j(t.error);let n=k.getWdyrConfig(t.projectId),r=k.getTrackedComponents(t.projectId),i=Object.keys(n).length>0,a=Object.keys(r).length>0;if(!i&&!a)return j(`No configuration or tracked components found. Make sure the browser is connected and triggering re-renders.`);let o=[],s=new Set([...Object.keys(n),...Object.keys(r)]);for(let e of s){o.push(`[${e}]`);let t=n[e];if(t){o.push(`Configuration:`);let e=V(t);e.length>0?o.push(...e):o.push(`  (default options)`)}let i=r[e];if(i?.observed.length){o.push(`Observed in renders:`);for(let e of i.observed)o.push(`  - ${e}`)}}return j(o.join(`
+`))})}function U(e){B(e),F(e),N(e),z(e),P(e),H(e),M(e)}function W(e){let t=f.createServer(),n=new p(t,{cors:{origin:`*`},serveClient:!1});return n.on(`connection`,t=>{console.error(`[wdyr-mcp] browser connected (http://localhost:${e})`),t.data.projectId=null,t.on(`render`,(e,n,r)=>{t.data.projectId=n,k.addRender(e,n,r)}),t.on(`render-batch`,(e,n,r)=>{t.data.projectId=n;for(let t of e)k.addRender(t,n,r)}),t.on(`register`,(e,n)=>{t.data.projectId=n,k.setTrackedComponents(e,n)}),t.on(`config`,(e,n)=>{t.data.projectId=n,k.setWdyrConfig(e,n)}),t.on(`disconnect`,()=>{console.error(`[wdyr-mcp] browser disconnected`);let e=t.data.projectId;e&&([...n.sockets.sockets.values()].some(n=>n.id!==t.id&&n.data.projectId===e)||(console.error(`[wdyr-mcp] last client for ${e} disconnected, clearing render data`),k.clearRenders(e)))})}),t.on(`error`,t=>{t.code===`EADDRINUSE`?console.error(`[wdyr-mcp] Port ${e} already in use, another instance owns the WS server. Skipping.`):console.error(`[wdyr-mcp] server error:`,t)}),t.listen(e,`127.0.0.1`,()=>{console.error(`[wdyr-mcp] socket.io server listening on http://localhost:${e}`)}),n}const G=new e({name:`why-did-you-render`,version:`0.0.0`});U(G);async function K(){let e=W(Number(process.env.WDYR_WS_PORT)||4649),n=new t;await G.connect(n),console.error(`[wdyr-mcp] MCP server running on stdio`);let r=!1;async function i(){r||(r=!0,console.error(`[wdyr-mcp] Shutting down…`),e?.close(),await G.close(),process.exit(0))}process.stdin.on(`end`,i),process.on(`SIGTERM`,i),process.on(`SIGINT`,i)}K().catch(e=>{console.error(`[wdyr-mcp] Fatal error:`,e),process.exit(1)});export{};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0x1f320.sh/why-did-you-render-mcp",
-  "version": "1.0.0-dev.2",
+  "version": "1.0.0-dev.20",
   "type": "module",
   "description": "MCP server that collects why-did-you-render data from browser and exposes it to coding agents",
   "license": "MIT",
@@ -34,9 +34,7 @@
       "require": "./dist/client/index.cjs"
     }
   },
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "build": "tsdown",
     "dev": "tsdown --watch",
@@ -49,13 +47,18 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.12.1",
-    "ws": "^8.18.0",
+    "error-stack-parser": "^2.1.4",
+    "socket.io": "^4.8.3",
+    "socket.io-client": "^4.8.3",
+    "xxhash-wasm": "^1.1.0",
     "zod": "^3.24.4"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/exec": "^7.1.0",
+    "@semantic-release/git": "^10.0.1",
     "@types/node": "^22.14.1",
-    "@types/ws": "^8.18.0",
     "@vitest/coverage-v8": "^4.1.2",
     "semantic-release": "^25.0.3",
     "tsdown": "^0.12.4",