metro-mcp 0.1.1 → 0.2.0

package/README.md

@@ -87,10 +87,11 @@ metro-mcp connects to your running Metro dev server the same way Chrome DevTools
 | **navigation** | 4 | React Navigation / Expo Router state |
 | **accessibility** | 3 | Accessibility auditing |
 | **commands** | 2 | Custom app commands |
+| **profiler** | 5 | CPU profiling (Hermes CDP) + React render tracking |
 | **maestro** | 2 | Maestro test flow generation |
 | **appium** | 3 | Appium/WebdriverIO Jest test generation |
 
-**Total: 50 tools, 7 resources, 7 prompts** — see the [full tools reference](docs/tools.md).
+**Total: 55 tools, 9 resources, 7 prompts** — see the [full tools reference](docs/tools.md).
 
 ## App Integration (Optional)
 
@@ -98,7 +99,7 @@ Register custom commands and expose state to the MCP server — no package neede
 
 ```typescript
 if (__DEV__) {
-  global.__METRO_MCP__ = {
+  globalThis.__METRO_MCP__ = {
     commands: {
       // Run custom actions from the MCP client
       login: async ({ email, password }) => {
@@ -121,7 +122,7 @@ if (__DEV__) {
 
 Use `list_commands` and `run_command` to call these from the MCP client.
 
-For enhanced features like real-time Redux action tracking, navigation events, and performance marks, see the [optional client SDK](docs/sdk.md).
+For enhanced features like real-time Redux action tracking, navigation events, performance marks, and React render profiling, see the [optional client SDK](docs/sdk.md) and [profiling guide](docs/profiling.md).
 
 ## Configuration
 

package/dist/bin/metro-mcp.js

@@ -32,6 +32,9 @@ var DEFAULT_CONFIG = {
   },
   network: {
     interceptFetch: false
+  },
+  profiler: {
+    newArchitecture: true
   }
 };
 async function loadConfig(args) {
@@ -101,12 +104,16 @@ function mergeConfig(target, source) {
     if (source.network.interceptFetch !== undefined)
       target.network.interceptFetch = source.network.interceptFetch;
   }
+  if (source.profiler) {
+    if (source.profiler.newArchitecture !== undefined)
+      target.profiler.newArchitecture = source.profiler.newArchitecture;
+  }
 }
 
 // src/server.ts
 import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
-import { z as z19 } from "zod";
+import { z as z20 } from "zod";
 
 // src/metro/connection.ts
 var logger2 = createLogger("cdp");
@@ -3349,6 +3356,526 @@ var appiumPlugin = definePlugin({
   }
 });
 
+// src/plugins/profiler.ts
+import { z as z19 } from "zod";
+var SKIP_FN_NAMES = new Set(["(root)", "(idle)", "(program)"]);
+function analyzeCpuProfile(profile, topN, includeNative) {
+  const durationMs = (profile.endTime - profile.startTime) / 1000;
+  const samples = profile.samples ?? [];
+  const parentMap = new Map;
+  for (const node of profile.nodes) {
+    for (const childId of node.children ?? [])
+      parentMap.set(childId, node.id);
+  }
+  const selfSamplesMap = new Map;
+  const totalSamplesMap = new Map;
+  for (const nodeId of samples) {
+    selfSamplesMap.set(nodeId, (selfSamplesMap.get(nodeId) ?? 0) + 1);
+    let current = nodeId;
+    const visited = new Set;
+    while (current !== undefined && !visited.has(current)) {
+      visited.add(current);
+      totalSamplesMap.set(current, (totalSamplesMap.get(current) ?? 0) + 1);
+      current = parentMap.get(current);
+    }
+  }
+  const total = samples.length || 1;
+  const stats = [];
+  for (const node of profile.nodes) {
+    const self = selfSamplesMap.get(node.id) ?? 0;
+    const tot = totalSamplesMap.get(node.id) ?? 0;
+    if (self === 0 && tot === 0)
+      continue;
+    const fnName = node.callFrame.functionName || "(anonymous)";
+    if (SKIP_FN_NAMES.has(fnName))
+      continue;
+    if (!includeNative && (!node.callFrame.url || node.callFrame.url.startsWith("native ")))
+      continue;
+    stats.push({
+      functionName: fnName,
+      url: node.callFrame.url ?? "",
+      lineNumber: node.callFrame.lineNumber + 1,
+      selfMs: parseFloat((self / total * durationMs).toFixed(2)),
+      selfPercent: parseFloat((self / total * 100).toFixed(1)),
+      totalMs: parseFloat((tot / total * durationMs).toFixed(2)),
+      totalPercent: parseFloat((tot / total * 100).toFixed(1))
+    });
+  }
+  stats.sort((a, b) => b.selfMs - a.selfMs);
+  return { durationMs: parseFloat(durationMs.toFixed(2)), sampleCount: samples.length, topFunctions: stats.slice(0, topN), totalSamplesMap, selfSamplesMap };
+}
+var BAR_WIDTH = 24;
+var MAX_DEPTH = 8;
+var MIN_PERCENT = 0.5;
+function bar(value, max) {
+  const filled = max > 0 ? Math.max(1, Math.round(value / max * BAR_WIDTH)) : 0;
+  return "\u2588".repeat(filled).padEnd(BAR_WIDTH);
+}
+function barPct(pct) {
+  return "\u2588".repeat(Math.max(1, Math.round(pct / 100 * BAR_WIDTH))).padEnd(BAR_WIDTH);
+}
+function trunc(s, max) {
+  return s.length > max ? s.slice(0, max - 1) + "\u2026" : s;
+}
+function memoSavings(r) {
+  return r.baseDuration > 0 ? parseFloat(((r.baseDuration - r.actualDuration) / r.baseDuration * 100).toFixed(1)) : null;
+}
+function buildCpuFlamegraph(profile, analysis) {
+  const { durationMs, sampleCount, totalSamplesMap, selfSamplesMap, topFunctions } = analysis;
+  const nodeMap = new Map(profile.nodes.map((n) => [n.id, n]));
+  const lines = [];
+  lines.push("=== CPU Flamegraph (by total time) ===");
+  lines.push(`Duration: ${durationMs}ms | Samples: ${sampleCount}`);
+  lines.push("");
+  function renderNode(nodeId, depth) {
+    if (depth > MAX_DEPTH)
+      return;
+    const node = nodeMap.get(nodeId);
+    if (!node)
+      return;
+    const fnName = node.callFrame.functionName || "(anonymous)";
+    if (SKIP_FN_NAMES.has(fnName) && depth === 0) {
+      for (const c of node.children ?? [])
+        renderNode(c, depth);
+      return;
+    }
+    const total = totalSamplesMap.get(nodeId) ?? 0;
+    const self = selfSamplesMap.get(nodeId) ?? 0;
+    const totalPct = sampleCount > 0 ? total / sampleCount * 100 : 0;
+    const selfPct = sampleCount > 0 ? self / sampleCount * 100 : 0;
+    if (totalPct < MIN_PERCENT && depth > 0)
+      return;
+    const indent = "  ".repeat(depth);
+    const hasChildren = (node.children ?? []).some((c) => sampleCount > 0 && (totalSamplesMap.get(c) ?? 0) / sampleCount * 100 >= MIN_PERCENT);
+    const label = trunc(fnName, 30).padEnd(30);
+    const ms = parseFloat(((hasChildren ? total : self) / (sampleCount || 1) * durationMs).toFixed(1));
+    const pct = hasChildren ? totalPct : selfPct;
+    lines.push(`${indent}${hasChildren ? "\u25BC" : "\u25A0"} ${label} ${pct.toFixed(1).padStart(5)}% ${barPct(pct)} ${ms}ms ${hasChildren ? "total" : "self"}`);
+    for (const c of node.children ?? [])
+      renderNode(c, depth + 1);
+  }
+  if (profile.nodes.length > 0)
+    renderNode(profile.nodes[0].id, 0);
+  else
+    lines.push("(no profile data)");
+  lines.push("");
+  lines.push("=== Ranked by Self Time ===");
+  if (topFunctions.length === 0) {
+    lines.push("(no data)");
+  } else {
+    const hdr = ` #  ${"Function".padEnd(30)} ${"Self%".padStart(6)}  ${"Self ms".padStart(8)}  ${"Total%".padStart(6)}  ${"Total ms".padStart(9)}  Location`;
+    lines.push(hdr);
+    lines.push("-".repeat(hdr.length));
+    topFunctions.forEach((f, i) => lines.push(` ${String(i + 1).padStart(2)}  ${trunc(f.functionName, 30).padEnd(30)} ${`${f.selfPercent}%`.padStart(6)}  ${`${f.selfMs}ms`.padStart(8)}  ${`${f.totalPercent}%`.padStart(6)}  ${`${f.totalMs}ms`.padStart(9)}  ${f.url ? `${f.url}:${f.lineNumber}` : "(unknown)"}`));
+  }
+  return lines.join(`
+`);
+}
+function buildDevToolsChart(profile) {
+  const lines = [];
+  const totalDuration = profile.reduce((s, c) => s + c.duration, 0);
+  lines.push("=== React DevTools Profile ===");
+  lines.push(`${profile.length} commit${profile.length !== 1 ? "s" : ""} | ${totalDuration.toFixed(1)}ms total`);
+  lines.push("");
+  const byName = new Map;
+  for (const commit of profile) {
+    for (const comp of commit.components) {
+      const entry = byName.get(comp.name) ?? { totalActual: 0, totalSelf: 0, commits: 0 };
+      entry.totalActual += comp.actualMs;
+      entry.totalSelf += comp.selfMs;
+      entry.commits++;
+      byName.set(comp.name, entry);
+    }
+  }
+  const sorted = [...byName.entries()].map(([name, s]) => ({ name, ...s, avgActual: s.totalActual / s.commits, avgSelf: s.totalSelf / s.commits })).sort((a, b) => b.totalActual - a.totalActual);
+  const maxTotal = sorted[0]?.totalActual ?? 1;
+  lines.push("=== Components by Total Actual Duration ===");
+  const hdr = ` #  ${"Component".padEnd(30)} ${"Commits".padStart(8)}  ${"Total".padStart(9)}  ${"Avg".padStart(8)}  ${"Self avg".padStart(9)}  Chart`;
+  lines.push(hdr);
+  lines.push("-".repeat(hdr.length + BAR_WIDTH));
+  sorted.forEach((s, i) => lines.push(` ${String(i + 1).padStart(2)}  ${trunc(s.name, 30).padEnd(30)} ${String(s.commits).padStart(8)}  ${`${s.totalActual.toFixed(1)}ms`.padStart(9)}  ${`${s.avgActual.toFixed(1)}ms`.padStart(8)}  ${`${s.avgSelf.toFixed(1)}ms`.padStart(9)}  ${bar(s.totalActual, maxTotal)}`));
+  return lines.join(`
+`);
+}
+function buildRenderChart(renders) {
+  const lines = [];
+  const sorted = [...renders].sort((a, b) => b.actualDuration - a.actualDuration);
+  const maxActual = sorted[0]?.actualDuration ?? 1;
+  lines.push("=== React Renders \u2014 Ranked by Actual Duration ===");
+  const hdr = ` #  ${"Component".padEnd(26)} ${"Phase".padEnd(14)} ${"Actual".padStart(8)}  ${"Base".padStart(8)}  Savings  Chart`;
+  lines.push(hdr);
+  lines.push("-".repeat(hdr.length + BAR_WIDTH));
+  sorted.forEach((r, i) => {
+    const savings = memoSavings(r);
+    lines.push(` ${String(i + 1).padStart(2)}  ${trunc(r.id, 26).padEnd(26)} ${r.phase.padEnd(14)} ${`${r.actualDuration.toFixed(1)}ms`.padStart(8)}  ${`${r.baseDuration.toFixed(1)}ms`.padStart(8)}  ${savings !== null ? `${savings.toFixed(0)}%`.padStart(7) : "    n/a"}  ${bar(r.actualDuration, maxActual)}`);
+  });
+  const byId = new Map;
+  for (const r of renders) {
+    const e = byId.get(r.id) ?? { totalActual: 0, count: 0, phases: new Set };
+    e.totalActual += r.actualDuration;
+    e.count++;
+    e.phases.add(r.phase);
+    byId.set(r.id, e);
+  }
+  const summaries = [...byId.entries()].map(([id, s]) => ({ id, avg: s.totalActual / s.count, count: s.count, phases: [...s.phases].join(", ") })).sort((a, b) => b.avg - a.avg);
+  lines.push("");
+  lines.push("=== Summary by Component ===");
+  const sHdr = ` ${"Component".padEnd(28)} ${"Renders".padStart(8)}  ${"Avg actual".padStart(11)}  Phases`;
+  lines.push(sHdr);
+  lines.push("-".repeat(sHdr.length));
+  for (const s of summaries)
+    lines.push(` ${trunc(s.id, 28).padEnd(28)} ${String(s.count).padStart(8)}  ${`${s.avg.toFixed(1)}ms`.padStart(11)}  ${s.phases}`);
+  return lines.join(`
+`);
+}
+var DEVTOOLS_START_EXPR = `(function() {
+  var hook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (!hook) return { error: 'no-hook' };
+
+  // Path 1: renderer has startProfiling (React DevTools backend connected)
+  var count = 0;
+  if (hook.renderers && typeof hook.renderers.forEach === 'function') {
+    hook.renderers.forEach(function(r) {
+      if (typeof r.startProfiling === 'function') { r.startProfiling(true); count++; }
+    });
+  }
+  if (count > 0) return { ok: true, method: 'startProfiling', count: count };
+
+  // Path 2: patch onCommitFiberRoot \u2014 works without DevTools backend.
+  // React calls this on every commit; fiber.actualDuration is tracked in dev builds.
+  if (typeof hook.onCommitFiberRoot === 'undefined') return { error: 'no-hook-method' };
+  var orig = hook.onCommitFiberRoot;
+  var commits = [];
+  hook.onCommitFiberRoot = function(rendererID, root, priorityLevel) {
+    if (orig) try { orig.call(this, rendererID, root, priorityLevel); } catch(e) {}
+    if (commits.length >= MAX_COMMITS) return;
+    var components = [];
+    var stack = root && root.current ? [root.current] : [];
+    var depth = 0;
+    while (stack.length > 0 && depth < 2000) {
+      depth++;
+      var fiber = stack.pop();
+      var ad = fiber.actualDuration;
+      if (typeof ad === 'number' && ad > 0.01) {
+        var name = null;
+        var type = fiber.type;
+        if (typeof type === 'function') { name = type.displayName || type.name || null; }
+        else if (typeof type === 'string') { name = type; }
+        if (name) components.push({ name: name, actualMs: ad, selfMs: fiber.selfBaseDuration || 0 });
+      }
+      if (fiber.sibling) stack.push(fiber.sibling);
+      if (fiber.child) stack.push(fiber.child);
+    }
+    if (components.length > 0) {
+      components.sort(function(a, b) { return b.actualMs - a.actualMs; });
+      commits.push({ timestamp: Date.now(), duration: (root && root.current && root.current.actualDuration) || 0, components: components });
+    }
+  };
+  var MAX_COMMITS = 500;
+  globalThis.__METRO_MCP_PROFILER__ = { commits: commits, orig: orig, max: MAX_COMMITS };
+  return { ok: true, method: 'commit-hook', count: 1 };
+})()`;
+var DEVTOOLS_STOP_EXPR = `(function() {
+  var hook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+
+  // Path 1: renderer had startProfiling (DevTools backend path)
+  if (hook && hook.renderers && typeof hook.renderers.forEach === 'function') {
+    var rdCommits = [];
+    hook.renderers.forEach(function(renderer) {
+      if (typeof renderer.stopProfiling !== 'function') return;
+      renderer.stopProfiling();
+      if (typeof renderer.getProfilingData !== 'function') return;
+      var data; try { data = renderer.getProfilingData(); } catch(e) { return; }
+      if (!data || !data.commitData) return;
+      var infoMap = data.displayInfoMap;
+      data.commitData.forEach(function(commit) {
+        var components = [];
+        var fiberActual = commit.fiberActualDurations;
+        var fiberSelf = commit.fiberSelfDurations;
+        if (fiberActual && typeof fiberActual.forEach === 'function') {
+          fiberActual.forEach(function(actualMs, fiberId) {
+            var selfMs = (fiberSelf && fiberSelf.get ? fiberSelf.get(fiberId) : 0) || 0;
+            var name = String(fiberId);
+            if (infoMap && infoMap.get) { var info = infoMap.get(fiberId); if (info) name = info.displayName || info.type || name; }
+            if (actualMs > 0.01) components.push({ name: name, actualMs: actualMs, selfMs: selfMs });
+          });
+        }
+        components.sort(function(a, b) { return b.actualMs - a.actualMs; });
+        rdCommits.push({ timestamp: commit.timestamp || 0, duration: commit.duration || 0, components: components });
+      });
+    });
+    if (rdCommits.length > 0) return rdCommits;
+  }
+
+  // Path 2: commit-hook patch
+  var profiler = globalThis.__METRO_MCP_PROFILER__;
+  if (!profiler) return null;
+  if (hook) hook.onCommitFiberRoot = profiler.orig;
+  var data = profiler.commits.slice();
+  globalThis.__METRO_MCP_PROFILER__ = undefined;
+  return data;
+})()`;
+var READ_RENDERS_EXPR = `(function() {
+  var mcp = globalThis.__METRO_MCP__;
+  return (mcp && Array.isArray(mcp.renders)) ? mcp.renders.slice() : null;
+})()`;
+var READ_AND_CLEAR_EXPR = `(function() {
+  var mcp = globalThis.__METRO_MCP__;
+  if (!mcp || !Array.isArray(mcp.renders)) return null;
+  var data = mcp.renders.slice();
+  if (typeof mcp.clearRenders === 'function') mcp.clearRenders();
+  return data;
+})()`;
+var NOT_SETUP_MSG = 'No render data available. Add <Profiler id="..." onRender={trackRender}> to your app and import trackRender from metro-mcp/client.';
+var CONSOLE_PROFILE_TITLE = "metro-mcp";
+var profilerPlugin = definePlugin({
+  name: "profiler",
+  version: "0.1.0",
+  description: "CPU profiling via React DevTools hook (primary) or CDP Profiler domain, plus React render tracking",
+  async setup(ctx) {
+    let profilingMode = null;
+    let lastCpuProfile = null;
+    let lastCpuAnalysis = null;
+    let lastDevToolsProfile = null;
+    const profilerConfig = ctx.config.profiler;
+    const newArchitecture = profilerConfig?.newArchitecture ?? true;
+    function isFuseboxTarget() {
+      return ctx.cdp.getTarget()?.reactNative?.capabilities?.prefersFuseboxFrontend === true;
+    }
+    function shouldSkipCdpFallback() {
+      return newArchitecture || isFuseboxTarget();
+    }
+    let pendingConsoleProfile = null;
+    if (!newArchitecture) {
+      ctx.cdp.on("Profiler.consoleProfileFinished", (params) => {
+        const { title, profile } = params;
+        if (title === CONSOLE_PROFILE_TITLE && pendingConsoleProfile) {
+          clearTimeout(pendingConsoleProfile.timer);
+          pendingConsoleProfile.resolve(profile);
+          pendingConsoleProfile = null;
+        }
+      });
+    }
+    async function buildFlamegraphText() {
+      const sections = [];
+      if (lastDevToolsProfile && lastDevToolsProfile.length > 0) {
+        sections.push(buildDevToolsChart(lastDevToolsProfile));
+      } else if (lastCpuProfile && lastCpuAnalysis) {
+        sections.push(buildCpuFlamegraph(lastCpuProfile, lastCpuAnalysis));
+      } else {
+        sections.push("(no profile \u2014 call start_profiling, interact, then stop_profiling)");
+      }
+      sections.push("");
+      try {
+        const raw = await ctx.evalInApp(READ_RENDERS_EXPR);
+        sections.push(raw && raw.length > 0 ? buildRenderChart(raw) : `=== React Renders ===
+${raw === null ? NOT_SETUP_MSG : "No renders recorded yet."}`);
+      } catch {
+        sections.push(`=== React Renders ===
+${NOT_SETUP_MSG}`);
+      }
+      return sections.join(`
+`);
+    }
+    ctx.registerTool("start_profiling", {
+      description: "Start profiling the running React Native app. " + "Primary path: injects into the React DevTools hook (__REACT_DEVTOOLS_GLOBAL_HOOK__) via evalInApp \u2014 " + "captures all component render durations without requiring <Profiler> wrappers, works on all architectures. " + "Fallback (legacy arch only): CDP Profiler domain for JS CPU call-graph sampling. " + "Perform the interaction you want to measure, then call stop_profiling.",
+      parameters: z19.object({
+        samplingInterval: z19.number().int().min(100).max(1e5).default(1000).describe("CDP fallback only: sampling interval in microseconds (default 1000).")
+      }),
+      handler: async ({ samplingInterval }) => {
+        if (profilingMode !== null)
+          return "A profiling session is already active. Call stop_profiling first.";
+        try {
+          const result = await ctx.evalInApp(DEVTOOLS_START_EXPR);
+          if (result?.ok) {
+            profilingMode = "devtools-hook";
+            const method = result.method === "commit-hook" ? "fiber commit hook (no DevTools backend required)" : `renderer.startProfiling (${result.count} renderer${result.count !== 1 ? "s" : ""})`;
+            return `Profiling started via ${method}. Perform the interaction you want to measure, then call stop_profiling.`;
+          }
+          if (result?.error === "no-hook") {
+            ctx.logger.debug("React DevTools hook not found, trying CDP fallback");
+          } else if (result?.error === "no-hook-method") {
+            ctx.logger.debug("DevTools hook found but onCommitFiberRoot unavailable, trying CDP fallback");
+          }
+        } catch (e) {
+          ctx.logger.debug(`DevTools hook injection failed: ${e instanceof Error ? e.message : String(e)}`);
+        }
+        if (shouldSkipCdpFallback()) {
+          return "CPU profiling unavailable: __REACT_DEVTOOLS_GLOBAL_HOOK__ is not present in this JS environment. " + `This can happen if the app has not yet rendered or is running in a context where React is not active.
+
+` + "Try calling any tool that interacts with the app first (e.g. get_component_tree), then retry start_profiling.";
+        }
+        try {
+          await ctx.cdp.send("Profiler.enable");
+          await ctx.cdp.send("Profiler.setSamplingInterval", { interval: samplingInterval });
+          await ctx.cdp.send("Profiler.start");
+          profilingMode = "cdp";
+          return `Profiling started via CDP (sampling every ${samplingInterval} \xB5s). Perform the interaction you want to measure, then call stop_profiling.`;
+        } catch (cdpErr) {
+          const msg = cdpErr instanceof Error ? cdpErr.message : String(cdpErr);
+          if (!msg.includes("Unsupported method") && !msg.includes("not supported")) {
+            return `Failed to start profiling: ${msg}`;
+          }
+        }
+        try {
+          await ctx.evalInApp(`console.profile(${JSON.stringify(CONSOLE_PROFILE_TITLE)})`);
+          profilingMode = "console";
+          return "Profiling started via console.profile(). Perform the interaction you want to measure, then call stop_profiling.";
+        } catch (consoleErr) {
+          return `Failed to start profiling: all paths exhausted \u2014 ${consoleErr instanceof Error ? consoleErr.message : String(consoleErr)}`;
+        }
+      }
+    });
+    ctx.registerTool("stop_profiling", {
+      description: "Stop profiling and return an analysis of the captured data. " + "DevTools hook mode: returns top components by total render duration across all commits. " + "CDP mode: returns top JS functions by self time and total time. " + "Must call start_profiling first.",
+      parameters: z19.object({
+        topN: z19.number().int().min(1).max(100).default(20).describe("Number of top entries to return."),
+        includeNative: z19.boolean().default(false).describe("CDP mode only: include native/internal Hermes frames.")
+      }),
+      handler: async ({ topN, includeNative }) => {
+        if (profilingMode === null)
+          return "No profiling session in progress. Call start_profiling first.";
+        try {
+          if (profilingMode === "devtools-hook") {
+            const raw = await ctx.evalInApp(DEVTOOLS_STOP_EXPR);
+            profilingMode = null;
+            if (!raw || raw.length === 0) {
+              return { mode: "devtools-hook", commitCount: 0, message: "No commits recorded \u2014 profiling window may be too short." };
+            }
+            lastDevToolsProfile = raw;
+            const byName = new Map;
+            for (const commit of raw) {
+              for (const comp of commit.components) {
+                const e = byName.get(comp.name) ?? { totalActual: 0, totalSelf: 0, commits: 0 };
+                e.totalActual += comp.actualMs;
+                e.totalSelf += comp.selfMs;
+                e.commits++;
+                byName.set(comp.name, e);
+              }
+            }
+            const topComponents = [...byName.entries()].map(([name, s]) => ({ name, commits: s.commits, totalActualMs: parseFloat(s.totalActual.toFixed(2)), avgActualMs: parseFloat((s.totalActual / s.commits).toFixed(2)), avgSelfMs: parseFloat((s.totalSelf / s.commits).toFixed(2)) })).sort((a, b) => b.totalActualMs - a.totalActualMs).slice(0, topN);
+            const totalDuration = raw.reduce((s, c) => s + c.duration, 0);
+            return { mode: "devtools-hook", commitCount: raw.length, totalDurationMs: parseFloat(totalDuration.toFixed(2)), topComponents };
+          }
+          let profile;
+          if (profilingMode === "cdp") {
+            const result = await ctx.cdp.send("Profiler.stop");
+            await ctx.cdp.send("Profiler.disable").catch(() => {});
+            profile = result.profile;
+          } else {
+            const profilePromise = new Promise((resolve, reject) => {
+              const timer = setTimeout(() => {
+                pendingConsoleProfile = null;
+                reject(new Error("Timed out waiting for profileEnd data (10s)."));
+              }, 1e4);
+              pendingConsoleProfile = { resolve, reject, timer };
+            });
+            await ctx.evalInApp(`console.profileEnd(${JSON.stringify(CONSOLE_PROFILE_TITLE)})`);
+            profile = await profilePromise;
+          }
+          profilingMode = null;
+          lastCpuProfile = profile;
+          lastCpuAnalysis = analyzeCpuProfile(profile, topN, includeNative);
+          const { durationMs, sampleCount, topFunctions } = lastCpuAnalysis;
+          if (sampleCount === 0)
+            return { mode: "cdp", durationMs, sampleCount: 0, message: "No samples collected.", topFunctions: [] };
+          return {
+            mode: "cdp",
+            durationMs,
+            sampleCount,
+            samplingRateMs: parseFloat((durationMs / sampleCount).toFixed(3)),
+            topFunctions: topFunctions.map((f) => ({
+              functionName: f.functionName,
+              location: f.url ? `${f.url}:${f.lineNumber}` : "(unknown)",
+              selfTime: `${f.selfMs}ms (${f.selfPercent}%)`,
+              totalTime: `${f.totalMs}ms (${f.totalPercent}%)`
+            }))
+          };
+        } catch (err) {
+          profilingMode = null;
+          return `Failed to stop profiling: ${err instanceof Error ? err.message : String(err)}`;
+        }
+      }
+    });
+    ctx.registerTool("get_profile_status", {
+      description: "Check whether profiling is active, which mode is in use, and whether a previous profile is available.",
+      parameters: z19.object({}),
+      handler: async () => ({
+        isProfiling: profilingMode !== null,
+        profilingMode,
+        hasDevToolsProfile: lastDevToolsProfile !== null,
+        hasCpuProfile: lastCpuProfile !== null,
+        lastDevToolsCommits: lastDevToolsProfile?.length ?? null,
+        lastCpuDurationMs: lastCpuProfile ? parseFloat(((lastCpuProfile.endTime - lastCpuProfile.startTime) / 1000).toFixed(2)) : null,
+        newArchitectureMode: newArchitecture
+      })
+    });
+    ctx.registerTool("get_flamegraph", {
+      description: "Return the current profiling results as a human-readable text chart. " + "Shows React DevTools component profile (if captured), CPU flamegraph (if CDP profile captured), " + "and React render data from <Profiler> components (if set up). " + "Call stop_profiling first to populate the profile data.",
+      parameters: z19.object({}),
+      handler: buildFlamegraphText
+    });
+    ctx.registerTool("get_react_renders", {
+      description: "Read React render timing data collected via <Profiler onRender={trackRender}>. " + "Returns all recorded renders sorted by actualDuration descending, with memoization savings from baseDuration. " + "Requires importing trackRender from metro-mcp/client. Use clear=true to reset the buffer.",
+      parameters: z19.object({
+        clear: z19.boolean().default(false).describe("Clear the render buffer after reading.")
+      }),
+      handler: async ({ clear }) => {
+        try {
+          const raw = await ctx.evalInApp(clear ? READ_AND_CLEAR_EXPR : READ_RENDERS_EXPR);
+          if (!raw)
+            return NOT_SETUP_MSG;
+          if (raw.length === 0)
+            return clear ? "Render buffer cleared (was already empty)." : "No renders recorded yet.";
+          return [...raw].sort((a, b) => b.actualDuration - a.actualDuration).map((r) => ({
+            id: r.id,
+            phase: r.phase,
+            actualDuration: parseFloat(r.actualDuration.toFixed(2)),
+            baseDuration: parseFloat(r.baseDuration.toFixed(2)),
+            memoSavingsPercent: memoSavings(r),
+            startTime: r.startTime,
+            commitTime: r.commitTime
+          }));
+        } catch (err) {
+          return `Failed to read render data: ${err instanceof Error ? err.message : String(err)}`;
+        }
+      }
+    });
+    ctx.registerResource("metro://profiler/flamegraph", {
+      name: "profiler-flamegraph",
+      description: "Human-readable profiling output: React DevTools component chart or CPU flamegraph, plus React render chart from <Profiler> components.",
+      mimeType: "text/plain",
+      handler: buildFlamegraphText
+    });
+    ctx.registerResource("metro://profiler/data", {
+      name: "profiler-data",
+      description: "Raw JSON profiling data: React DevTools commit data or CDP Profile object, plus React render records.",
+      mimeType: "application/json",
+      handler: async () => {
+        let renders = [];
+        try {
+          const raw = await ctx.evalInApp(READ_RENDERS_EXPR);
+          if (Array.isArray(raw))
+            renders = raw;
+        } catch {}
+        return JSON.stringify({
+          mode: lastDevToolsProfile ? "devtools-hook" : lastCpuProfile ? "cdp" : null,
+          devtools: lastDevToolsProfile ?? null,
+          cpu: lastCpuProfile && lastCpuAnalysis ? {
+            durationMs: lastCpuAnalysis.durationMs,
+            sampleCount: lastCpuAnalysis.sampleCount,
+            nodes: lastCpuProfile.nodes,
+            samples: lastCpuProfile.samples,
+            timeDeltas: lastCpuProfile.timeDeltas,
+            analysis: { topFunctions: lastCpuAnalysis.topFunctions }
+          } : null,
+          renders: renders.map((r) => ({ ...r, memoSavingsPercent: memoSavings(r) }))
+        }, null, 2);
+      }
+    });
+  }
+});
+
 // src/plugins/prompts.ts
 var promptsPlugin = definePlugin({
   name: "prompts",
@@ -3390,17 +3917,27 @@ var promptsPlugin = definePlugin({
       ]
     });
     ctx.registerPrompt("debug-performance", {
-      description: "Analyze performance: network timing, render analysis",
+      description: "Profile JS CPU usage and React render performance, then summarize findings with a flamegraph",
       handler: async () => [
         {
           role: "user",
           content: `I need to analyze my React Native app's performance. Please:
-1. Get network requests with timing data (get_network_requests)
-2. Check for slow requests (search_network \u2014 look for responses > 1s)
-3. Check console logs for performance warnings (get_console_logs with search for "slow" or "performance")
-4. Get the component tree to check for deep nesting (get_component_tree with structureOnly=true)
-5. Check for re-render indicators in logs
-6. Summarize performance findings and recommendations`
+1. Check the current profiler status (get_profile_status)
+2. Clear any existing React render data (get_react_renders with clear=true)
+3. Start CPU profiling (start_profiling with default samplingInterval)
+4. Tell me to perform the interaction I want to profile, then wait for me to confirm it's done
+5. After I confirm:
+   a. Stop CPU profiling and get the analysis (stop_profiling)
+   b. Read React render timings (get_react_renders)
+   c. Read the flamegraph resource (metro://profiler/flamegraph) for a combined visual breakdown
+   d. Check for slow network requests (search_network \u2014 look for responses > 1s)
+   e. Check console logs for perf warnings (get_console_logs with search="slow" or "perf")
+6. Summarize:
+   - Top JS CPU hotspots by self time \u2014 which function and file is burning the most CPU
+   - Slowest React component renders and whether memoization (memo/useMemo) is helping \u2014 compare actualDuration vs baseDuration
+   - Components that re-render frequently (high count in the summary)
+   - Any slow network requests contributing to perceived slowness
+   - Concrete, prioritised recommendations`
         }
       ]
     });
@@ -3503,6 +4040,7 @@ var BUILT_IN_PLUGINS = [
   commandsPlugin,
   maestroPlugin,
   appiumPlugin,
+  profilerPlugin,
   promptsPlugin
 ];
 async function startServer(config) {
@@ -3526,7 +4064,7 @@ async function startServer(config) {
       cdp: cdpClient,
       registerTool: (name, toolConfig) => {
         try {
-          mcpServer.tool(name, toolConfig.description, toolConfig.parameters instanceof z19.ZodObject ? toolConfig.parameters.shape : { input: toolConfig.parameters }, async (args) => {
+          mcpServer.tool(name, toolConfig.description, toolConfig.parameters instanceof z20.ZodObject ? toolConfig.parameters.shape : { input: toolConfig.parameters }, async (args) => {
             try {
               const result = await toolConfig.handler(args);
               const content = typeof result === "string" ? result : JSON.stringify(result, null, 2);
@@ -3557,7 +4095,7 @@ async function startServer(config) {
           const argsShape = {};
           if (promptConfig.arguments) {
             for (const arg of promptConfig.arguments) {
-              argsShape[arg.name] = arg.required ? z19.string() : z19.string().optional();
+              argsShape[arg.name] = arg.required ? z20.string() : z20.string().optional();
             }
           }
           mcpServer.prompt(name, promptConfig.description, argsShape, async (args) => {