@buoy-gg/highlight-updates 7.0.21 → 7.0.23

package/lib/commonjs/highlight-updates/components/IsolatedRenderList.js

@@ -23,7 +23,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  */
 
 // Free tier limit for tracked components
-const FREE_TIER_COMPONENT_LIMIT = 25;
+
 /**
  * Isolated list component that owns the render subscription.
  * Parent component does NOT re-render when renders change.
@@ -62,16 +62,19 @@ function IsolatedRenderListInner({
   }, [searchText, filters, onRendersChange]);
 
   // Limit visible components for free tier
+  // `isPro` stays a prop so callers can force the unlimited view; the tier cap
+  // applies otherwise. useLimit() already returns Infinity for Pro, so the two
+  // agree — this only preserves the prop contract for cross-package callers.
+  const tierLimit = (0, _sharedUi.useLimit)("highlightUpdates.components");
+  const componentLimit = isPro ? Infinity : tierLimit;
   const visibleRenders = (0, _react.useMemo)(() => {
-    if (isPro) return renders;
-    return renders.slice(0, FREE_TIER_COMPONENT_LIMIT);
-  }, [renders, isPro]);
+    return renders.slice(0, componentLimit);
+  }, [renders, componentLimit]);
 
   // Calculate locked component count
   const lockedComponentCount = (0, _react.useMemo)(() => {
-    if (isPro) return 0;
-    return Math.max(0, renders.length - FREE_TIER_COMPONENT_LIMIT);
-  }, [renders.length, isPro]);
+    return Math.max(0, renders.length - componentLimit);
+  }, [renders.length, componentLimit]);
 
   // Stable keyExtractor - moved outside to avoid recreation
   const keyExtractor = (0, _react.useCallback)(item => item.id, []);

package/lib/commonjs/highlight-updates/components/RenderDetailView.js

@@ -26,7 +26,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  */
 
 // Free tier limit for render history events
-const FREE_TIER_EVENT_LIMIT = 5;
 function RenderDetailView({
   render,
   disableInternalFooter = false,
@@ -52,11 +51,12 @@ function RenderDetailView({
   const totalEvents = events.length;
   const currentEvent = events[selectedEventIndex];
 
-  // Calculate hidden events for free tier
-  const hiddenEventCount = (0, _react.useMemo)(() => {
-    if (isPro) return 0;
-    return Math.max(0, totalEvents - FREE_TIER_EVENT_LIMIT);
-  }, [isPro, totalEvents]);
+  // `isPro` stays a prop so callers can force the unlimited view; the tier cap
+  // applies otherwise. useLimit() already returns Infinity for Pro, so the two
+  // agree — this only preserves the prop contract for cross-package callers.
+  const tierLimit = (0, _sharedUi.useLimit)("highlightUpdates.detailEvents");
+  const eventLimit = isPro ? Infinity : tierLimit;
+  const hiddenEventCount = (0, _react.useMemo)(() => Math.max(0, totalEvents - eventLimit), [eventLimit, totalEvents]);
 
   // Use current event's cause if available, otherwise fall back to lastRenderCause
   const displayCause = currentEvent?.cause || render.lastRenderCause;
@@ -68,12 +68,12 @@ function RenderDetailView({
     }
   }, [selectedEventIndex, onEventIndexChange]);
   const goToNext = (0, _react.useCallback)(() => {
-    // Limit navigation for free tier users
-    const maxIndex = isPro ? totalEvents - 1 : Math.min(FREE_TIER_EVENT_LIMIT - 1, totalEvents - 1);
+    // Infinity - 1 is Infinity, so an unlimited tier just gets totalEvents - 1.
+    const maxIndex = Math.min(eventLimit - 1, totalEvents - 1);
     if (selectedEventIndex < maxIndex) {
       onEventIndexChange(selectedEventIndex + 1);
     }
-  }, [selectedEventIndex, totalEvents, onEventIndexChange, isPro]);
+  }, [selectedEventIndex, totalEvents, onEventIndexChange, eventLimit]);
 
   // Memoize copy data
   const copyData = (0, _react.useMemo)(() => (0, _rendersExportFormatter.generateSingleComponentExport)(render), [render]);

package/lib/commonjs/highlight-updates/components/RenderHistoryViewer.js

@@ -21,8 +21,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * Shows current state view or diff view between renders.
  */
 
-// Free tier limit for render history events
-const FREE_TIER_EVENT_LIMIT = 3;
 /**
  * Format timestamp with milliseconds
  */
@@ -63,18 +61,16 @@ function RenderHistoryViewer({
     return [...render.renderHistory].sort((a, b) => a.timestamp - b.timestamp);
   }, [render.renderHistory]);
 
-  // Limit visible events for free tier (show most recent N events)
-  const events = (0, _react.useMemo)(() => {
-    if (isPro) return allEvents;
-    // Take the most recent events (last N in the sorted list)
-    return allEvents.slice(-FREE_TIER_EVENT_LIMIT);
-  }, [allEvents, isPro]);
+  // `isPro` stays a prop so callers can force the unlimited view; the tier cap
+  // applies otherwise. useLimit() already returns Infinity for Pro, so the two
+  // agree — this only preserves the prop contract for cross-package callers.
+  const tierLimit = (0, _sharedUi.useLimit)("highlightUpdates.historyEvents");
+  const eventLimit = isPro ? Infinity : tierLimit;
 
-  // Calculate how many events are locked
-  const lockedEventCount = (0, _react.useMemo)(() => {
-    if (isPro) return 0;
-    return Math.max(0, allEvents.length - FREE_TIER_EVENT_LIMIT);
-  }, [allEvents.length, isPro]);
+  // Show the most recent N events (negative index clamps to 0, so an
+  // unlimited tier returns the whole list).
+  const events = (0, _react.useMemo)(() => allEvents.slice(-eventLimit), [allEvents, eventLimit]);
+  const lockedEventCount = (0, _react.useMemo)(() => Math.max(0, allEvents.length - eventLimit), [allEvents.length, eventLimit]);
   const totalEvents = events.length;
   const currentEvent = events[selectedEventIndex];
   const previousEvent = selectedEventIndex > 0 ? events[selectedEventIndex - 1] : null;
@@ -470,11 +466,12 @@ function RenderHistoryFooter({
     return [...render.renderHistory].sort((a, b) => a.timestamp - b.timestamp);
   }, [render.renderHistory]);
 
-  // Limit visible events for free tier (show most recent N events)
-  const events = (0, _react.useMemo)(() => {
-    if (isPro) return allEvents;
-    return allEvents.slice(-FREE_TIER_EVENT_LIMIT);
-  }, [allEvents, isPro]);
+  // Same cap as RenderHistoryViewer above; `isPro` remains a caller override.
+  const tierLimit = (0, _sharedUi.useLimit)("highlightUpdates.historyEvents");
+  const eventLimit = isPro ? Infinity : tierLimit;
+
+  // Most recent N (negative index clamps to 0, so unlimited returns all).
+  const events = (0, _react.useMemo)(() => allEvents.slice(-eventLimit), [allEvents, eventLimit]);
   const totalEvents = events.length;
   const currentEvent = events[selectedEventIndex];
   const goToPrevious = (0, _react.useCallback)(() => {

package/lib/commonjs/highlight-updates/utils/CommitProfiler.js

@@ -45,9 +45,11 @@ const TOP_COMPONENTS_CAP = 20;
 let hookInstalled = false;
 let active = false;
 let sawDurations = false;
+let captureDetail = false;
 let totalCommits = 0;
 let totalRenders = 0;
 let totalRenderMs = 0;
+let totalCauses = {};
 let buckets = new Map();
 function getHook() {
   if (typeof global === "undefined") return null;
@@ -119,13 +121,129 @@ function isFrameworkWrapperName(name) {
   }
   return false;
 }
-function recordRender(fiber) {
+
+/** Bound on prop keys compared per render, so a fat props object can't stall a commit. */
+const MAX_PROPS_COMPARED = 40;
+/** Bound on distinct changed-prop key names remembered per component (detail tier). */
+const MAX_CHANGED_KEYS = 5;
+
+/**
+ * Are two values for the same prop key equivalent despite differing identity?
+ *
+ * Functions always count as equivalent: a fresh arrow per render is THE
+ * unstable-prop bug, and there's no way to compare behaviour anyway. Plain
+ * objects and arrays compare one level deep, which catches `style={{...}}`
+ * and `data={[...]}`. Anything else falls through to a real value change.
+ */
+function isEquivalentValue(a, b) {
+  if (Object.is(a, b)) return true;
+  const ta = typeof a;
+  if (ta !== typeof b) return false;
+  if (ta === "function") return true;
+  if (a === null || b === null || ta !== "object") return false;
+  const aIsArray = Array.isArray(a);
+  if (aIsArray !== Array.isArray(b)) return false;
+  if (aIsArray) {
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) if (!Object.is(a[i], b[i])) return false;
+    return true;
+  }
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  for (let i = 0; i < keysA.length; i++) {
+    const k = keysA[i];
+    if (!Object.prototype.hasOwnProperty.call(b, k)) return false;
+    if (!Object.is(a[k], b[k])) return false;
+  }
+  return true;
+}
+/**
+ * Why did this fiber render?
+ *
+ * Simpler than the overlay's RenderCauseDetector, and deliberately so: that
+ * one carries WeakMap fallbacks and fiber-swap detection because traceUpdates
+ * hands it fibers at an ambiguous moment. Here we're inside onCommitFiberRoot
+ * walking the committed tree, so `fiber` is current and `fiber.alternate` is
+ * previous by definition. Porting the swap logic would be cargo-cult.
+ */
+function detectCause(fiber, wantKeys) {
+  const prev = fiber.alternate;
+  if (!prev) return {
+    cause: "mount"
+  };
+  const nextProps = fiber.memoizedProps;
+  const prevProps = prev.memoizedProps;
+  if (nextProps !== prevProps && nextProps && prevProps) {
+    let sawChange = false;
+    let sawValueChange = false;
+    let changedKeys;
+    const keys = Object.keys(nextProps);
+    const limit = keys.length < MAX_PROPS_COMPARED ? keys.length : MAX_PROPS_COMPARED;
+    for (let i = 0; i < limit; i++) {
+      const k = keys[i];
+      const a = prevProps[k];
+      const b = nextProps[k];
+      if (Object.is(a, b)) continue;
+      sawChange = true;
+      if (wantKeys) {
+        if (!changedKeys) changedKeys = [];
+        if (changedKeys.length < MAX_CHANGED_KEYS) changedKeys.push(k);
+      }
+      if (!isEquivalentValue(a, b)) {
+        sawValueChange = true;
+        if (!wantKeys) break; // cause is settled; only keys need the full pass
+      }
+    }
+    // A removed key counts as a real change; cheap to detect via key count.
+    if (!sawValueChange && Object.keys(prevProps).length !== keys.length) {
+      sawChange = true;
+      sawValueChange = true;
+    }
+    if (sawChange) {
+      return {
+        cause: sawValueChange ? "props" : "propsUnstable",
+        changedKeys
+      };
+    }
+  }
+
+  // No prop change of substance. Own state/hooks next.
+  if (prev.memoizedState !== fiber.memoizedState) return {
+    cause: "hooks"
+  };
+  return {
+    cause: "parent"
+  };
+}
+
+/**
+ * Nearest ancestor that ALSO rendered this commit and is worth naming — i.e.
+ * skipping framework wrappers, which are never where a fix goes. Answers "who
+ * dragged this along", which is the actionable half of a cascade.
+ */
+function nearestRenderedAncestorName(fiber) {
+  for (let p = fiber.return; p != null; p = p.return) {
+    if (!isCompositeTag(p.tag)) continue;
+    if ((getFlags(p) & PerformedWork) === 0) continue;
+    const name = getComponentName(p);
+    if (isFrameworkWrapperName(name)) continue;
+    return name;
+  }
+  return undefined;
+}
+function recordRender(fiber, parentName) {
   const name = getComponentName(fiber);
   const selfMs = computeSelfMs(fiber);
   if (selfMs !== null) sawDurations = true;
   const ms = selfMs ?? 0;
   totalRenders += 1;
   totalRenderMs += ms;
+  const {
+    cause,
+    changedKeys
+  } = detectCause(fiber, captureDetail);
+  totalCauses[cause] = (totalCauses[cause] ?? 0) + 1;
 
   // Framework wrappers count toward totals but never surface as a row.
   if (isFrameworkWrapperName(name)) return;
@@ -136,13 +254,27 @@ function recordRender(fiber) {
     bucket = {
       renders: 0,
       totalSelfMs: 0,
-      maxSelfMs: 0
+      maxSelfMs: 0,
+      causes: {}
     };
     buckets.set(name, bucket);
   }
   bucket.renders += 1;
   bucket.totalSelfMs += ms;
   if (ms > bucket.maxSelfMs) bucket.maxSelfMs = ms;
+  bucket.causes[cause] = (bucket.causes[cause] ?? 0) + 1;
+  if (captureDetail) {
+    if (changedKeys) {
+      if (!bucket.changedProps) bucket.changedProps = new Set();
+      for (let i = 0; i < changedKeys.length; i++) {
+        if (bucket.changedProps.size >= MAX_CHANGED_KEYS) break;
+        bucket.changedProps.add(changedKeys[i]);
+      }
+    }
+    // First parent wins — a component rendered under several parents is rare,
+    // and the first is the one that showed up in the heaviest commit.
+    if (parentName && !bucket.parentName) bucket.parentName = parentName;
+  }
 }
 
 /**
@@ -161,13 +293,21 @@ function handleCommit(root) {
     let skipSubtree = false;
     const composite = isCompositeTag(fiber.tag);
     if (composite) {
-      // Prune Buoy's own devtools UI wholesale.
-      if ((0, _devtoolsComponentNames.isDevToolsComponentName)(getComponentName(fiber))) {
+      const compositeName = getComponentName(fiber);
+      // Only Buoy's render-tracking UI gets its SUBTREE pruned — walking it
+      // feeds its own renders back in and loops. Everything else that's merely
+      // devtools noise is skipped as a NODE and we keep descending: app
+      // components live underneath Buoy chrome, and pruning a subtree on a name
+      // match is what made a stray "Virtualized" prefix hide every FlatList in
+      // every app.
+      if ((0, _devtoolsComponentNames.isRenderLoopUnsafeName)(compositeName)) {
         skipSubtree = true;
+      } else if ((0, _devtoolsComponentNames.isDevToolsComponentName)(compositeName)) {
+        // skip this node, keep walking its children
       } else if ((getFlags(fiber) & PerformedWork) !== 0) {
         // PerformedWork is the only trustworthy "rendered this commit"
         // signal — actualDuration is stale on bailed-out fibers.
-        recordRender(fiber);
+        recordRender(fiber, captureDetail ? nearestRenderedAncestorName(fiber) : undefined);
       }
     }
     if (!skipSubtree) {
@@ -230,14 +370,24 @@ function isCapturing() {
   return active;
 }
 
-/** Begin a capture window, discarding any previous unclaimed data. */
-function startCapture() {
+/**
+ * Begin a capture window, discarding any previous unclaimed data.
+ *
+ * `detail` turns on the allocating tier — changed prop key names and parent
+ * component names. Causes themselves are always classified: it costs a shallow
+ * prop compare, against a `computeSelfMs` that already walks every direct
+ * child on every render, and the wasted-render total is the number most worth
+ * seeing without having to know to ask for it.
+ */
+function startCapture(opts) {
   if (!ensureHookInstalled()) return;
   buckets = new Map();
   sawDurations = false;
+  captureDetail = opts?.detail === true;
   totalCommits = 0;
   totalRenders = 0;
   totalRenderMs = 0;
+  totalCauses = {};
   active = true;
 }
 
@@ -253,19 +403,31 @@ function stopCapture() {
     renders: b.renders,
     totalMs: round2(b.totalSelfMs),
     maxMs: round2(b.maxSelfMs),
-    avgMs: b.renders > 0 ? round2(b.totalSelfMs / b.renders) : 0
+    avgMs: b.renders > 0 ? round2(b.totalSelfMs / b.renders) : 0,
+    causes: b.causes,
+    ...(b.changedProps && b.changedProps.size > 0 ? {
+      changedProps: Array.from(b.changedProps)
+    } : null),
+    ...(b.parentName ? {
+      parentName: b.parentName
+    } : null)
   }));
   const summary = {
     totalCommits,
     totalRenders,
     capturedDurations: sawDurations,
     totalRenderMs: round2(totalRenderMs),
+    // Parent cascades and identity-only prop churn are both removable without
+    // changing behaviour — together they're the recoverable share.
+    wastedRenders: (totalCauses.parent ?? 0) + (totalCauses.propsUnstable ?? 0),
+    causes: totalCauses,
     topComponents
   };
   buckets = new Map();
   totalCommits = 0;
   totalRenders = 0;
   totalRenderMs = 0;
+  totalCauses = {};
   return summary;
 }
 function round2(n) {

package/lib/commonjs/highlight-updates/utils/HighlightUpdatesController.js

@@ -555,7 +555,12 @@ function isOurOverlayNode(stateNode) {
 
         // Only check other dev tools if excludeDevTools is enabled
         if (excludeDevTools) {
-          if (_devtoolsComponentNames.OTHER_DEV_TOOLS_COMPONENTS.has(name)) {
+          // Two sets, same meaning: COMPONENTS is the original list, EXACT
+          // holds the names that used to be matched by over-broad prefixes
+          // (the "Virtualized" that hid every FlatList, the "Dial" that hid
+          // every Dialog). Both paths must consult both, or Buoy's own chrome
+          // starts flashing highlight boxes in one of them and not the other.
+          if (_devtoolsComponentNames.OTHER_DEV_TOOLS_COMPONENTS.has(name) || _devtoolsComponentNames.OTHER_DEV_TOOLS_EXACT.has(name)) {
             result = true;
             break;
           }

package/lib/commonjs/highlight-updates/utils/devtoolsComponentNames.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.OTHER_DEV_TOOLS_PREFIXES = exports.OTHER_DEV_TOOLS_COMPONENTS = exports.HIGHLIGHT_OVERLAY_PREFIXES = exports.HIGHLIGHT_OVERLAY_COMPONENTS = void 0;
+exports.OTHER_DEV_TOOLS_PREFIXES = exports.OTHER_DEV_TOOLS_EXACT = exports.OTHER_DEV_TOOLS_COMPONENTS = exports.HIGHLIGHT_OVERLAY_PREFIXES = exports.HIGHLIGHT_OVERLAY_COMPONENTS = void 0;
 exports.isCapturingBuoyToolRenders = isCapturingBuoyToolRenders;
 exports.isDevToolsComponentName = isDevToolsComponentName;
 exports.isJsTopComponentName = isJsTopComponentName;
 exports.isPerfMonitorComponentName = isPerfMonitorComponentName;
+exports.isRenderLoopUnsafeName = isRenderLoopUnsafeName;
 exports.setCaptureBuoyToolRenders = setCaptureBuoyToolRenders;
 // ============================================================================
 // Buoy devtools component-name sets, shared by HighlightUpdatesController's
@@ -66,16 +67,37 @@ const OTHER_DEV_TOOLS_COMPONENTS = exports.OTHER_DEV_TOOLS_COMPONENTS = new Set(
 // separately). The modal/table re-render on every 250ms snapshot tick.
 "TaskTable", "TaskRow", "BusySparkline"]);
 
-// Other dev tools prefixes - can be toggled via excludeDevTools setting
-const OTHER_DEV_TOOLS_PREFIXES = exports.OTHER_DEV_TOOLS_PREFIXES = ["JsModal", "TreeDiff", "DataViewer", "DiffView", "DiffSummary", "Virtualized",
-// Floating menu prefixes
-"Floating", "Minimized", "Dial", "Expandable", "Chevron", "Glitch", "Settings", "Onboarding", "DevTools", "ImageOverlay",
+/**
+ * Other dev-tools prefixes — noise reduction, toggleable via excludeDevTools.
+ *
+ * EVERY ENTRY HERE MUST BE BUOY-NAMESPACED. These are prefix matches, and a
+ * match hides the component from render reports. Generic English words do not
+ * belong in this list, because app components share them.
+ *
+ * This list used to contain `Virtualized`, meant for Buoy's own
+ * VirtualizedDataExplorer. React Native's FlatList renders a `VirtualizedList`,
+ * so the prefix matched — and because CommitProfiler pruned the whole subtree
+ * on a match, Buoy could not see inside ANY FlatList or SectionList in ANY
+ * app. Lists are the number-one source of render problems in React Native, and
+ * the render tools were blind to all of them. `Dial` was the same trap:
+ * "Dialog".startsWith("Dial") is true, so every Dialog vanished too.
+ *
+ * Names that are generic on their own now live in OTHER_DEV_TOOLS_COMPONENTS
+ * as exact matches instead.
+ */
+const OTHER_DEV_TOOLS_PREFIXES = exports.OTHER_DEV_TOOLS_PREFIXES = ["JsModal", "ImageOverlay",
 // Perf-monitor prefixes (safe: user code is Perf*, buoy code is
 // PerfMonitor* / PerfHud*)
 "PerfMonitor", "PerfHud",
 // JS TOP (js-top package)
 "JsTop"];
 
+/**
+ * Buoy component names that were previously matched by over-broad prefixes.
+ * Exact matches only — see the warning above.
+ */
+const OTHER_DEV_TOOLS_EXACT = exports.OTHER_DEV_TOOLS_EXACT = new Set(["VirtualizedDataExplorer", "TreeDiffView", "TreeDiffRow", "DataViewer", "DiffView", "DiffSummary", "FloatingDevTools", "FloatingMenu", "FloatingBubble", "MinimizedDock", "DialMenu", "DialItem", "ExpandableSection", "ChevronIcon", "GlitchText", "SettingsModal", "SettingsRow", "OnboardingFlow", "DevToolsMenu"]);
+
 // ── Bench "profile our own tools" mode ──────────────────────────────────
 // When enabled (by a dedicated benchmark screen, e.g. the example app's
 // /tool-bench page), render capture INCLUDES Buoy's tool UI so we can
@@ -140,8 +162,27 @@ function isDevToolsComponentName(name) {
     return isPerfMonitorComponentName(name) || isJsTopComponentName(name);
   }
   if (OTHER_DEV_TOOLS_COMPONENTS.has(name)) return true;
+  if (OTHER_DEV_TOOLS_EXACT.has(name)) return true;
   for (let i = 0; i < OTHER_DEV_TOOLS_PREFIXES.length; i++) {
     if (name.startsWith(OTHER_DEV_TOOLS_PREFIXES[i])) return true;
   }
   return false;
+}
+
+/**
+ * Is this name one whose SUBTREE must be skipped, not merely the node?
+ *
+ * Only the always-excluded group qualifies: walking Buoy's own render-tracking
+ * UI feeds its own renders back in and loops. Everything else in
+ * `isDevToolsComponentName` is noise reduction — hide the row, but keep
+ * walking, because app components live underneath Buoy chrome (a tool modal
+ * renders the host app behind it) and pruning on a NAME is how one bad prefix
+ * cost us every FlatList in every app.
+ */
+function isRenderLoopUnsafeName(name) {
+  if (HIGHLIGHT_OVERLAY_COMPONENTS.has(name)) return true;
+  for (let i = 0; i < HIGHLIGHT_OVERLAY_PREFIXES.length; i++) {
+    if (name.startsWith(HIGHLIGHT_OVERLAY_PREFIXES[i])) return true;
+  }
+  return false;
 }

package/lib/commonjs/sync/highlightUpdatesSyncAdapter.js

@@ -7,6 +7,7 @@ exports.highlightUpdatesSyncAdapter = void 0;
 var _HighlightUpdatesController = _interopRequireDefault(require("../highlight-updates/utils/HighlightUpdatesController"));
 var _RenderTracker = require("../highlight-updates/utils/RenderTracker");
 var _screenElements = require("../highlight-updates/utils/screenElements");
+var _CommitProfiler = require("../highlight-updates/utils/CommitProfiler");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function ensureInitialized() {
   if (!_HighlightUpdatesController.default.isInitialized()) {
@@ -65,6 +66,41 @@ function jsonSafeRender(render) {
   }
 }
 
+/**
+ * Measurement window for automated callers (MCP `measure_renders`).
+ *
+ * Backed by CommitProfiler, NOT the RenderTracker that feeds the overlay, and
+ * the difference is the whole point. RenderTracker tracks HOST VIEWS: ask it
+ * why `DealRow` re-rendered and it answers about the native `View` inside it —
+ * "props changed: accessibilityState, accessibilityValue" — which is true and
+ * useless. CommitProfiler walks COMPOSITE fibers, so it answers about the
+ * component you named: which of ITS props changed, whether they changed by
+ * value or only by identity, and which parent dragged it along.
+ *
+ * It also touches none of the user's overlay state — no enabling, no clearing
+ * counters someone was collecting, nothing drawn on screen. A measurement is
+ * invisible.
+ */
+function beginMeasurement() {
+  if (!_CommitProfiler.CommitProfiler.isSupported()) {
+    return {
+      ok: false,
+      reason: "render capture needs a dev build with the React DevTools hook available"
+    };
+  }
+  _CommitProfiler.CommitProfiler.startCapture({
+    detail: true
+  });
+  return {
+    ok: true
+  };
+}
+function endMeasurement() {
+  return {
+    summary: _CommitProfiler.CommitProfiler.stopCapture()
+  };
+}
+
 /**
  * Sync adapter for the highlight-updates tool, consumed by
  * @buoy-gg/external-sync's `useExternalSync` (structurally matches its
@@ -81,7 +117,9 @@ function jsonSafeRender(render) {
  * stay on the device. Dashboards fetch them via `getRenderDetail`.
  */
 const highlightUpdatesSyncAdapter = exports.highlightUpdatesSyncAdapter = {
-  version: 2,
+  // v3: beginMeasurement / endMeasurement — a CommitProfiler capture window
+  // for automated callers, with per-component causes. Invisible to the user.
+  version: 3,
   getSnapshot: () => ({
     enabled: _HighlightUpdatesController.default.isEnabled(),
     frozen: _HighlightUpdatesController.default.getFrozen(),
@@ -103,6 +141,10 @@ const highlightUpdatesSyncAdapter = exports.highlightUpdatesSyncAdapter = {
     };
   },
   actions: {
+    // Capture window for automated callers (MCP `measure_renders`). Pairs:
+    // begin -> drive the UI -> end. `end` always restores.
+    beginMeasurement: () => beginMeasurement(),
+    endMeasurement: () => endMeasurement(),
     /**
      * On-demand detail: one component's real renderHistory + lastRenderCause
      * (including hookChanges). Wire-form snapshots omit those.

package/lib/module/highlight-updates/components/IsolatedRenderList.js

@@ -15,11 +15,10 @@ import React, { useState, useEffect, useRef, useCallback, memo, useMemo } from "
 import { View, Text, FlatList, StyleSheet } from "react-native";
 import { RenderTracker } from "../utils/RenderTracker";
 import { RenderListItem } from "./RenderListItem";
-import { Activity, Lock, buoyColors } from "@buoy-gg/shared-ui";
+import { Activity, Lock, buoyColors, useLimit } from "@buoy-gg/shared-ui";
 
 // Free tier limit for tracked components
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const FREE_TIER_COMPONENT_LIMIT = 25;
 /**
  * Isolated list component that owns the render subscription.
  * Parent component does NOT re-render when renders change.
@@ -58,16 +57,19 @@ function IsolatedRenderListInner({
   }, [searchText, filters, onRendersChange]);
 
   // Limit visible components for free tier
+  // `isPro` stays a prop so callers can force the unlimited view; the tier cap
+  // applies otherwise. useLimit() already returns Infinity for Pro, so the two
+  // agree — this only preserves the prop contract for cross-package callers.
+  const tierLimit = useLimit("highlightUpdates.components");
+  const componentLimit = isPro ? Infinity : tierLimit;
   const visibleRenders = useMemo(() => {
-    if (isPro) return renders;
-    return renders.slice(0, FREE_TIER_COMPONENT_LIMIT);
-  }, [renders, isPro]);
+    return renders.slice(0, componentLimit);
+  }, [renders, componentLimit]);
 
   // Calculate locked component count
   const lockedComponentCount = useMemo(() => {
-    if (isPro) return 0;
-    return Math.max(0, renders.length - FREE_TIER_COMPONENT_LIMIT);
-  }, [renders.length, isPro]);
+    return Math.max(0, renders.length - componentLimit);
+  }, [renders.length, componentLimit]);
 
   // Stable keyExtractor - moved outside to avoid recreation
   const keyExtractor = useCallback(item => item.id, []);

package/lib/module/highlight-updates/components/RenderDetailView.js

@@ -14,13 +14,12 @@
 
 import React, { useMemo, useState, useCallback } from "react";
 import { View, Text, TouchableOpacity, ScrollView, StyleSheet } from "react-native";
-import { CopyButton, formatRelativeTime, PlusIcon, MinusIcon, EventStepperFooter, Lock, buoyColors } from "@buoy-gg/shared-ui";
+import { CopyButton, formatRelativeTime, PlusIcon, MinusIcon, EventStepperFooter, Lock, buoyColors, useLimit } from "@buoy-gg/shared-ui";
 import { TreeDiffViewer } from "@buoy-gg/shared-ui/dataViewer";
 import { CAUSE_CONFIG, COMPONENT_CAUSE_CONFIG } from "./RenderCauseBadge";
 import { generateSingleComponentExport } from "../utils/rendersExportFormatter";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Free tier limit for render history events
-const FREE_TIER_EVENT_LIMIT = 5;
 export function RenderDetailView({
   render,
   disableInternalFooter = false,
@@ -46,11 +45,12 @@ export function RenderDetailView({
   const totalEvents = events.length;
   const currentEvent = events[selectedEventIndex];
 
-  // Calculate hidden events for free tier
-  const hiddenEventCount = useMemo(() => {
-    if (isPro) return 0;
-    return Math.max(0, totalEvents - FREE_TIER_EVENT_LIMIT);
-  }, [isPro, totalEvents]);
+  // `isPro` stays a prop so callers can force the unlimited view; the tier cap
+  // applies otherwise. useLimit() already returns Infinity for Pro, so the two
+  // agree — this only preserves the prop contract for cross-package callers.
+  const tierLimit = useLimit("highlightUpdates.detailEvents");
+  const eventLimit = isPro ? Infinity : tierLimit;
+  const hiddenEventCount = useMemo(() => Math.max(0, totalEvents - eventLimit), [eventLimit, totalEvents]);
 
   // Use current event's cause if available, otherwise fall back to lastRenderCause
   const displayCause = currentEvent?.cause || render.lastRenderCause;
@@ -62,12 +62,12 @@ export function RenderDetailView({
     }
   }, [selectedEventIndex, onEventIndexChange]);
   const goToNext = useCallback(() => {
-    // Limit navigation for free tier users
-    const maxIndex = isPro ? totalEvents - 1 : Math.min(FREE_TIER_EVENT_LIMIT - 1, totalEvents - 1);
+    // Infinity - 1 is Infinity, so an unlimited tier just gets totalEvents - 1.
+    const maxIndex = Math.min(eventLimit - 1, totalEvents - 1);
     if (selectedEventIndex < maxIndex) {
       onEventIndexChange(selectedEventIndex + 1);
     }
-  }, [selectedEventIndex, totalEvents, onEventIndexChange, isPro]);
+  }, [selectedEventIndex, totalEvents, onEventIndexChange, eventLimit]);
 
   // Memoize copy data
   const copyData = useMemo(() => generateSingleComponentExport(render), [render]);