@buoy-gg/highlight-updates 5.0.0 → 6.0.1

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

@@ -33,6 +33,7 @@ import { RenderTracker } from "./RenderTracker";
 import { PerformanceLogger, markEventReceived } from "./PerformanceLogger";
 import { detectRenderCause, clearRenderCauseState } from "./RenderCauseDetector";
 import { notifySubscriberCountChange } from "@buoy-gg/shared-ui";
+import { HIGHLIGHT_OVERLAY_COMPONENTS, HIGHLIGHT_OVERLAY_PREFIXES, OTHER_DEV_TOOLS_COMPONENTS, OTHER_DEV_TOOLS_PREFIXES, isCapturingBuoyToolRenders, isPerfMonitorComponentName } from "./devtoolsComponentNames";
 // State
 let globalEnabled = false; // User-controlled toggle for visual highlights
 // When true, tracking + measurement + storage all run as normal, but the
@@ -114,6 +115,10 @@ function getNativeTag(instance) {
   if (inst.canonical) {
     if (inst.canonical.__nativeTag != null) return inst.canonical.__nativeTag;
     if (inst.canonical._nativeTag != null) return inst.canonical._nativeTag;
+    // Modern Fabric instance handles: { node, canonical: { nativeTag, ... } }.
+    // Without this shape ~99% of traced nodes were dropped on New
+    // Architecture — highlights only appeared for tap-shaped legacy nodes.
+    if (inst.canonical.nativeTag != null) return inst.canonical.nativeTag;
   }
   return null;
 }
@@ -320,48 +325,12 @@ function isOurOverlayTag(nativeTag) {
 // 5. Cached property access to avoid repeated traversal
 // ============================================================================
 
-// Components that MUST always be excluded to prevent infinite loops.
-// Includes the Highlight Updates overlay AND the Events tool (which subscribes
-// to render callbacks via RenderTracker.onRenderEvent - tracking its renders
-// would create an infinite callback loop).
-const HIGHLIGHT_OVERLAY_COMPONENTS = new Set([
-// Highlight Updates overlay components
-"HighlightUpdatesOverlay", "HighlightUpdatesModal", "HighlightFilterView", "RenderDetailView", "RenderListItem", "RenderListItemInner", "RenderHistoryViewer", "RenderHistoryFooter", "RenderCauseBadge", "TwoLevelCauseBadge", "EnhancedCauseDisplay", "IsolatedRenderList", "IsolatedRenderListInner", "StatsDisplay", "StatsDisplayInner", "CurrentStateView", "EventStepperFooter",
-// Events tool components - subscribes to onRenderEvent, tracking these causes infinite loops
-"EventsModal", "UnifiedEventList", "UnifiedEventItem", "UnifiedEventDetail", "UnifiedEventFilters", "UnifiedEventViewer", "ReactQueryEventDetail", "EventsCopySettingsView"]);
+// Component-name sets/prefixes live in devtoolsComponentNames.ts (shared with
+// CommitProfiler). Native-ID sets stay here — only the node walk uses them.
 
 // Native IDs that MUST always be excluded (highlight overlay)
 const HIGHLIGHT_OVERLAY_NATIVE_IDS = new Set(["highlight-updates-overlay", "__rn_buoy__highlight-modal"]);
 
-// Prefixes for always-excluded components (highlight overlay + events tool)
-const HIGHLIGHT_OVERLAY_PREFIXES = ["HighlightUpdates", "RenderList", "RenderDetail", "RenderHistory", "RenderCause", "EventStepper",
-// Events tool - subscribes to onRenderEvent, must always be excluded
-"UnifiedEvent", "EventsModal", "EventsCopy"];
-
-// Other dev tools components - can be toggled via excludeDevTools setting
-const OTHER_DEV_TOOLS_COMPONENTS = new Set([
-// React Buoy devtools components
-"JsModalComponent", "JsModal", "TypePicker", "PatternInput", "PatternChip", "DetectedItemsSection", "DetectedCategoryBadge", "IdentifierBadge", "CategoryBadge", "AppRenderer", "AppOverlay", "FloatingTools", "DialDevTools", "DevToolsVisibilityProvider", "AppHostProvider", "MinimizedToolsProvider",
-// Shared UI components used in modals
-"ModalHeader", "TabSelector", "SectionHeader", "DraggableHeader", "WindowControls",
-// Shared UI data viewer components (JSON diff viewers, etc.)
-"TreeDiffViewer", "DataViewer", "SplitDiffViewer", "VirtualizedDataExplorer", "DiffSummary", "TypeLegend", "IndentGuides", "IndentGuidesOverlay", "CyberpunkInput", "DiffView", "AnswerCard", "DetailsSection", "DetailRow", "QuickActionsSection", "FilterOptionCard",
-// Modal header sub-components
-"SearchSection", "SearchSectionInner", "HeaderActions", "HeaderActionsInner", "MainListHeader", "FilterViewHeader", "DetailViewHeader",
-// Floating menu components (minimized tools, dial, etc.)
-"FloatingMenu", "FloatingDevTools", "MinimizedToolsStack", "MinimizedToolsContext", "GlitchToolButton", "ExpandablePopover", "CollapsedPeek", "ExpandedWrapper", "DialIcon", "DialMenu", "DialIconItem", "OnboardingTooltip", "MenuLauncherIcon", "DevToolsSettingsModal", "SettingsModal",
-// Image Overlay components
-"ImageOverlayModal", "ImageOverlayStandalone", "ToolCard", "ToolIcon", "GripVerticalIcon", "UserStatus", "Divider",
-// Shared UI icon components (Chevrons, etc.)
-"ChevronDown", "ChevronUp", "ChevronLeft", "ChevronRight", "ChevronDownIcon", "ChevronUpIcon", "ChevronLeftIcon", "ChevronRightIcon",
-// React Native LogBox components (shown on reload/errors)
-"LogBox", "LogBoxLog", "LogBoxLogNotification", "LogBoxNotificationContainer", "_LogBoxNotificationContainer", "LogBoxInspector", "LogBoxInspectorContainer", "LogBoxInspectorHeader", "LogBoxInspectorBody", "LogBoxInspectorFooter", "LogBoxInspectorMessageHeader", "LogBoxInspectorStackFrame", "LogBoxInspectorSection", "LogBoxButton", "LogBoxMessage"]);
-
-// Other dev tools prefixes - can be toggled via excludeDevTools setting
-const 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 native IDs - can be toggled
 const OTHER_DEV_TOOLS_NATIVE_IDS = new Set(["jsmodal-root", "image-overlay-standalone",
 // LogBox native IDs
@@ -520,8 +489,15 @@ function isOurOverlayNode(stateNode) {
   // Get nativeTag for caching
   const nativeTag = getNativeTag(stateNode) || getNativeTag(node?.canonical?.publicInstance);
 
-  // Check if we should exclude all dev tools or just highlight overlay
-  const excludeDevTools = RenderTracker.getSettings().excludeDevTools;
+  // Check if we should exclude all dev tools or just highlight overlay.
+  // Bench "profile our own tools" mode (the example app's /tool-bench page)
+  // forces this OFF so live highlight boxes flash on our tool UI too —
+  // except the perf-monitor HUD (checked separately in the walk below),
+  // whose 250ms sample-tick churn would flash constantly. Cache reads and
+  // writes are already gated on excludeDevTools, so bench mode bypasses
+  // the cache and can't poison it.
+  const benchMode = isCapturingBuoyToolRenders();
+  const excludeDevTools = !benchMode && RenderTracker.getSettings().excludeDevTools;
 
   // Check cache first (O(1)) - but only for the current excludeDevTools setting
   // When excludeDevTools is false, skip cache to re-evaluate all nodes
@@ -567,6 +543,12 @@ function isOurOverlayNode(stateNode) {
         }
         if (result) break;
 
+        // Bench mode: the perf-monitor HUD still never flashes.
+        if (benchMode && isPerfMonitorComponentName(name)) {
+          result = true;
+          break;
+        }
+
         // Only check other dev tools if excludeDevTools is enabled
         if (excludeDevTools) {
           if (OTHER_DEV_TOOLS_COMPONENTS.has(name)) {
@@ -776,14 +758,33 @@ function handleTraceUpdates(nodes) {
   // Use batch size from RenderTracker settings (default: 150)
   // Note: batchSize already retrieved above for perfTimer
   perfTimer.markMeasurementStart();
-  const measurePromises = nodesToDraw.slice(0, batchSize).map(({
+  // Measure up to 4× batchSize: coalesced commits can exceed one batch and
+  // the old hard slice silently never highlighted the same tail components.
+  const measurePromises = nodesToDraw.slice(0, batchSize * 4).map(({
     node: stateNode,
     color,
     count
   }) => new Promise(resolve => {
+    // RN silently never fires measure callbacks for detached nodes;
+    // without this timeout one dead node hangs the whole batch's
+    // Promise.all (no boxes, no tracking, counts still climb).
+    let settled = false;
+    const settle = value => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(timeoutId);
+      resolve(value);
+    };
+    const timeoutId = setTimeout(() => settle({
+      rect: null,
+      stateNode,
+      color,
+      count
+    }), 500);
     const publicInstance = getPublicInstance(stateNode);
-    if (!publicInstance) {
-      resolve({
+    const nativeTag = getNativeTag(stateNode) || getNativeTag(publicInstance);
+    if (nativeTag == null) {
+      settle({
         rect: null,
         stateNode,
         color,
@@ -791,44 +792,62 @@ function handleTraceUpdates(nodes) {
       });
       return;
     }
-    const nativeTag = getNativeTag(stateNode) || getNativeTag(publicInstance);
-    if (nativeTag == null) {
-      resolve({
-        rect: null,
+    const onMeasured = (x, y, width, height, pageX, pageY) => {
+      if (pageX == null || pageY == null || width == null || height == null) {
+        settle({
+          rect: null,
+          stateNode,
+          color,
+          count
+        });
+        return;
+      }
+      settle({
+        rect: {
+          id: nativeTag,
+          x: pageX,
+          y: pageY,
+          width,
+          height,
+          color,
+          count
+        },
         stateNode,
         color,
         count
       });
-      return;
-    }
-    try {
-      publicInstance.measure((x, y, width, height, pageX, pageY) => {
-        if (pageX == null || pageY == null || width == null || height == null) {
-          resolve({
+    };
+    if (!publicInstance) {
+      // New Architecture: canonical.publicInstance is often lazily
+      // ABSENT on traceUpdates wrappers — measure the wrapper's `node`
+      // (the Fabric shadow node) directly through FabricUIManager.
+      const fabricNode = stateNode.node;
+      const fabricUI = globalThis.nativeFabricUIManager;
+      if (fabricNode && fabricUI?.measure) {
+        try {
+          fabricUI.measure(fabricNode, onMeasured);
+        } catch (error) {
+          settle({
             rect: null,
             stateNode,
             color,
             count
           });
-          return;
         }
-        resolve({
-          rect: {
-            id: nativeTag,
-            x: pageX,
-            y: pageY,
-            width,
-            height,
-            color,
-            count
-          },
-          stateNode,
-          color,
-          count
-        });
+        return;
+      }
+      settle({
+        rect: null,
+        stateNode,
+        color,
+        count
       });
+      return;
+    }
+    try {
+      publicInstance.measure(onMeasured);
     } catch (error) {
-      resolve({
+      settle({
         rect: null,
         stateNode,
         color,
@@ -843,119 +862,126 @@ function handleTraceUpdates(nodes) {
     // Mark measurement phase complete
     perfTimer.markMeasurementComplete(validResults.length, results.length - validResults.length);
 
-    // Keep a live handle to each measured node so the desktop's "capture this
-    // component" flow can re-measure (and scroll to) it on demand later.
-    // Defensive: never let registration break the measurement/tracking batch.
-    try {
-      for (const r of validResults) {
-        if (r.rect) registerTrackedNode(r.rect.id, r.stateNode);
-      }
-    } catch (e) {
-      debugLog("registerTrackedNode batch failed", e);
+    // DRAW FIRST. With the render list open, tracking a big burst
+    // (store writes + cause detection + list row rebuilds) used to run
+    // BEFORE the highlight callback, so boxes painted ~0.7s later
+    // (user-timed: 1.3s list-closed vs 2s+ list-open, 2026-07-08).
+    // Boxes are the product — paint them, then bookkeep.
+    if (rects.length > 0 && highlightCallback && globalEnabled && !highlightsSuppressed) {
+      highlightCallback(rects);
     }
 
-    // Track renders - behavior differs based on what's enabled:
-    // - globalEnabled (visual tool): full tracking with storage and list updates
-    // - backgroundTrackingEnabled only (Events tool): emit events only, no storage
-    const settings = RenderTracker.getSettings();
-    const trackCauses = settings.trackRenderCauses && settings.showRenderCount;
-    let batchNativeTags = null;
-    if (trackCauses) {
-      batchNativeTags = new Set();
-      for (const {
-        rect
-      } of validResults) {
-        if (rect) {
-          batchNativeTags.add(rect.id);
+    // Tracking/list work runs in a macrotask so React commits the boxes
+    // before this heavier pass starts.
+    setTimeout(() => {
+      // Keep a live handle to each measured node so the desktop's "capture this
+      // component" flow can re-measure (and scroll to) it on demand later.
+      // Defensive: never let registration break the measurement/tracking batch.
+      try {
+        for (const r of validResults) {
+          if (r.rect) registerTrackedNode(r.rect.id, r.stateNode);
         }
+      } catch (e) {
+        debugLog("registerTrackedNode batch failed", e);
       }
-    }
-    if (globalEnabled) {
-      // Visual tool is on - full tracking with storage and list notifications
-      RenderTracker.startBatch();
-      for (const {
-        rect,
-        stateNode,
-        color,
-        count
-      } of validResults) {
-        if (rect) {
-          const componentInfo = extractComponentInfo(stateNode);
-          let renderCause;
-          if (trackCauses && batchNativeTags) {
-            const node = stateNode;
-            const fiber = node?.canonical?.internalInstanceHandle;
-            renderCause = detectRenderCause(rect.id, fiber, batchNativeTags, settings.debugLogLevel);
+
+      // Track renders - behavior differs based on what's enabled:
+      // - globalEnabled (visual tool): full tracking with storage and list updates
+      // - backgroundTrackingEnabled only (Events tool): emit events only, no storage
+      const settings = RenderTracker.getSettings();
+      const trackCauses = settings.trackRenderCauses && settings.showRenderCount;
+      let batchNativeTags = null;
+      if (trackCauses) {
+        batchNativeTags = new Set();
+        for (const {
+          rect
+        } of validResults) {
+          if (rect) {
+            batchNativeTags.add(rect.id);
           }
-          RenderTracker.trackRender({
-            nativeTag: rect.id,
-            viewType: componentInfo.viewType,
-            testID: componentInfo.testID,
-            nativeID: componentInfo.nativeID,
-            accessibilityLabel: componentInfo.accessibilityLabel,
-            componentName: componentInfo.componentName,
-            measurements: {
-              x: rect.x,
-              y: rect.y,
-              width: rect.width,
-              height: rect.height
-            },
-            color,
-            count,
-            renderCause
-          });
         }
       }
-      RenderTracker.endBatch();
-    } else {
-      // Only background tracking (Events tool) - emit events without storage
-      for (const {
-        rect,
-        stateNode,
-        color,
-        count
-      } of validResults) {
-        if (rect) {
-          const componentInfo = extractComponentInfo(stateNode);
-          let renderCause;
-          if (trackCauses && batchNativeTags) {
-            const node = stateNode;
-            const fiber = node?.canonical?.internalInstanceHandle;
-            renderCause = detectRenderCause(rect.id, fiber, batchNativeTags, settings.debugLogLevel);
+      if (globalEnabled) {
+        // Visual tool is on - full tracking with storage and list notifications
+        RenderTracker.startBatch();
+        for (const {
+          rect,
+          stateNode,
+          color,
+          count
+        } of validResults) {
+          if (rect) {
+            const componentInfo = extractComponentInfo(stateNode);
+            let renderCause;
+            if (trackCauses && batchNativeTags) {
+              const node = stateNode;
+              const fiber = node?.canonical?.internalInstanceHandle;
+              renderCause = detectRenderCause(rect.id, fiber, batchNativeTags, settings.debugLogLevel);
+            }
+            RenderTracker.trackRender({
+              nativeTag: rect.id,
+              viewType: componentInfo.viewType,
+              testID: componentInfo.testID,
+              nativeID: componentInfo.nativeID,
+              accessibilityLabel: componentInfo.accessibilityLabel,
+              componentName: componentInfo.componentName,
+              measurements: {
+                x: rect.x,
+                y: rect.y,
+                width: rect.width,
+                height: rect.height
+              },
+              color,
+              count,
+              renderCause
+            });
+          }
+        }
+        RenderTracker.endBatch();
+      } else {
+        // Only background tracking (Events tool) - emit events without storage
+        for (const {
+          rect,
+          stateNode,
+          color,
+          count
+        } of validResults) {
+          if (rect) {
+            const componentInfo = extractComponentInfo(stateNode);
+            let renderCause;
+            if (trackCauses && batchNativeTags) {
+              const node = stateNode;
+              const fiber = node?.canonical?.internalInstanceHandle;
+              renderCause = detectRenderCause(rect.id, fiber, batchNativeTags, settings.debugLogLevel);
+            }
+            RenderTracker.emitRenderEvent({
+              nativeTag: rect.id,
+              viewType: componentInfo.viewType,
+              testID: componentInfo.testID,
+              nativeID: componentInfo.nativeID,
+              accessibilityLabel: componentInfo.accessibilityLabel,
+              componentName: componentInfo.componentName,
+              measurements: {
+                x: rect.x,
+                y: rect.y,
+                width: rect.width,
+                height: rect.height
+              },
+              color,
+              count,
+              renderCause
+            });
           }
-          RenderTracker.emitRenderEvent({
-            nativeTag: rect.id,
-            viewType: componentInfo.viewType,
-            testID: componentInfo.testID,
-            nativeID: componentInfo.nativeID,
-            accessibilityLabel: componentInfo.accessibilityLabel,
-            componentName: componentInfo.componentName,
-            measurements: {
-              x: rect.x,
-              y: rect.y,
-              width: rect.width,
-              height: rect.height
-            },
-            color,
-            count,
-            renderCause
-          });
         }
       }
-    }
 
-    // Mark tracking phase complete
-    perfTimer.markTrackingComplete();
-
-    // Only show visual highlights when the visual tool is enabled (not just
-    // background tracking) AND not running in silent mode (screenshot tool).
-    if (rects.length > 0 && highlightCallback && globalEnabled && !highlightsSuppressed) {
-      highlightCallback(rects);
-    }
+      // Mark tracking phase complete
+      perfTimer.markTrackingComplete();
 
-    // Mark callback phase complete and finish timing
-    perfTimer.markCallbackComplete();
-    perfTimer.finish();
+      // Mark callback phase complete and finish timing
+      perfTimer.markCallbackComplete();
+      perfTimer.finish();
+    }, 0);
   }).catch(error => {
     console.error("[HighlightUpdates] Error in measurement pipeline:", error);
     perfTimer.finish(); // Still log timing even on error

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

@@ -0,0 +1,119 @@
+"use strict";
+
+// ============================================================================
+// Buoy devtools component-name sets, shared by HighlightUpdatesController's
+// per-node exclusion walk and CommitProfiler's subtree pruning.
+//
+// Extracted from HighlightUpdatesController.ts verbatim — keep the split:
+// HIGHLIGHT_* sets are ALWAYS excluded (tracking them causes infinite render
+// loops); OTHER_DEV_TOOLS_* sets are toggleable via the excludeDevTools
+// setting in the highlight flow (CommitProfiler always excludes both).
+// ============================================================================
+
+// Components that MUST always be excluded to prevent infinite loops.
+// Includes the Highlight Updates overlay AND the Events tool (which subscribes
+// to render callbacks via RenderTracker.onRenderEvent - tracking its renders
+// would create an infinite callback loop).
+export const HIGHLIGHT_OVERLAY_COMPONENTS = new Set([
+// Highlight Updates overlay components
+"HighlightUpdatesOverlay", "HighlightUpdatesModal", "HighlightFilterView", "RenderDetailView", "RenderListItem", "RenderListItemInner", "RenderHistoryViewer", "RenderHistoryFooter", "RenderCauseBadge", "TwoLevelCauseBadge", "EnhancedCauseDisplay", "IsolatedRenderList", "IsolatedRenderListInner", "StatsDisplay", "StatsDisplayInner", "CurrentStateView", "EventStepperFooter",
+// Events tool components - subscribes to onRenderEvent, tracking these causes infinite loops
+"EventsModal", "UnifiedEventList", "UnifiedEventItem", "UnifiedEventDetail", "UnifiedEventFilters", "UnifiedEventViewer", "ReactQueryEventDetail", "EventsCopySettingsView"]);
+
+// Prefixes for always-excluded components (highlight overlay + events tool)
+export const HIGHLIGHT_OVERLAY_PREFIXES = ["HighlightUpdates", "RenderList", "RenderDetail", "RenderHistory", "RenderCause", "EventStepper",
+// Events tool - subscribes to onRenderEvent, must always be excluded
+"UnifiedEvent", "EventsModal", "EventsCopy"];
+
+// Other dev tools components - can be toggled via excludeDevTools setting
+export const OTHER_DEV_TOOLS_COMPONENTS = new Set([
+// React Buoy devtools components
+"JsModalComponent", "JsModal", "TypePicker", "PatternInput", "PatternChip", "DetectedItemsSection", "DetectedCategoryBadge", "IdentifierBadge", "CategoryBadge", "AppRenderer", "AppOverlay", "FloatingTools", "DialDevTools", "DevToolsVisibilityProvider", "AppHostProvider", "MinimizedToolsProvider",
+// Shared UI components used in modals
+"ModalHeader", "TabSelector", "SectionHeader", "DraggableHeader", "WindowControls",
+// Shared UI data viewer components (JSON diff viewers, etc.)
+"TreeDiffViewer", "DataViewer", "SplitDiffViewer", "VirtualizedDataExplorer", "DiffSummary", "TypeLegend", "IndentGuides", "IndentGuidesOverlay", "CyberpunkInput", "DiffView", "AnswerCard", "DetailsSection", "DetailRow", "QuickActionsSection", "FilterOptionCard",
+// Modal header sub-components
+"SearchSection", "SearchSectionInner", "HeaderActions", "HeaderActionsInner", "MainListHeader", "FilterViewHeader", "DetailViewHeader",
+// Floating menu components (minimized tools, dial, etc.)
+"FloatingMenu", "FloatingDevTools", "MinimizedToolsStack", "MinimizedToolsContext", "GlitchToolButton", "ExpandablePopover", "CollapsedPeek", "ExpandedWrapper", "DialIcon", "DialMenu", "DialIconItem", "OnboardingTooltip", "MenuLauncherIcon", "DevToolsSettingsModal", "SettingsModal",
+// Image Overlay components
+"ImageOverlayModal", "ImageOverlayStandalone", "ToolCard", "ToolIcon", "GripVerticalIcon", "UserStatus", "Divider",
+// Shared UI icon components (Chevrons, etc.)
+"ChevronDown", "ChevronUp", "ChevronLeft", "ChevronRight", "ChevronDownIcon", "ChevronUpIcon", "ChevronLeftIcon", "ChevronRightIcon",
+// React Native LogBox components (shown on reload/errors)
+"LogBox", "LogBoxLog", "LogBoxLogNotification", "LogBoxNotificationContainer", "_LogBoxNotificationContainer", "LogBoxInspector", "LogBoxInspectorContainer", "LogBoxInspectorHeader", "LogBoxInspectorBody", "LogBoxInspectorFooter", "LogBoxInspectorMessageHeader", "LogBoxInspectorStackFrame", "LogBoxInspectorSection", "LogBoxButton", "LogBoxMessage",
+// Perf-monitor components. The HUD re-renders on every 250ms sample tick
+// during a benchmark recording, so leaving these in would dominate any
+// render-capture result. NOTE: no blanket "Perf" prefix — user benchmark
+// screens are commonly named Perf* (e.g. PerfBenchHeavy in the example app).
+"PerfMonitorOverlay", "PerfMonitorModal", "PerfMonitorRoot", "PerfHudInline", "PerfDiagnostics", "MetricSparkline", "JsFallbackNotice", "AutomationConfigView", "AutomationProgressOverlay", "AutomationResumer", "SaveBenchmarkPrompt", "SavedCasesModal", "BatchBarReport", "BatchReportView",
+// Perf HUD INNER components. The live-highlight exclusion walk climbs at
+// most 30 fiber levels from a flagged host view — the HUD's metric
+// TextInputs sit under deep TextInput/Animated wrappers, so the walk can
+// miss the PerfMonitorOverlay root; near names are what it actually hits.
+"PerfHudInlineInner", "PerfMonitorOverlayInner", "MiniMetric", "MetricRow", "MetricNumber", "MetricSparklineInner", "RecColumn", "PillBody", "FullBody", "TargetLine", "PagesSection", "ProbesSection"]);
+
+// Other dev tools prefixes - can be toggled via excludeDevTools setting
+export const OTHER_DEV_TOOLS_PREFIXES = ["JsModal", "TreeDiff", "DataViewer", "DiffView", "DiffSummary", "Virtualized",
+// Floating menu prefixes
+"Floating", "Minimized", "Dial", "Expandable", "Chevron", "Glitch", "Settings", "Onboarding", "DevTools", "ImageOverlay",
+// Perf-monitor prefixes (safe: user code is Perf*, buoy code is
+// PerfMonitor* / PerfHud*)
+"PerfMonitor", "PerfHud"];
+
+// ── 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
+// benchmark our own devtools. Two groups stay excluded regardless:
+//  - highlight overlay + events tool (tracking them = infinite render loop)
+//  - perf-monitor UI (the HUD re-renders on every 250ms sample tick while
+//    recording, so its renders would dominate any capture result)
+// Only consulted by `isDevToolsComponentName` (the CommitProfiler path) —
+// the highlight flow's own excludeDevTools walk reads the raw sets above
+// and is deliberately unaffected.
+let captureBuoyToolRenders = false;
+export function setCaptureBuoyToolRenders(enabled) {
+  captureBuoyToolRenders = enabled;
+}
+export function isCapturingBuoyToolRenders() {
+  return captureBuoyToolRenders;
+}
+
+// Perf-monitor components without the "PerfMonitor" prefix (which is
+// matched separately). Mirrors the perf entries in OTHER_DEV_TOOLS_*.
+const PERF_MONITOR_ALWAYS_EXCLUDED = new Set(["PerfHudInline", "PerfHudInlineInner", "PerfDiagnostics", "MetricSparkline", "MetricSparklineInner", "JsFallbackNotice", "AutomationConfigView", "AutomationProgressOverlay", "AutomationResumer", "SaveBenchmarkPrompt", "SavedCasesModal", "BatchBarReport", "BatchReportView",
+// HUD inner components — churn every 250ms sample tick while recording.
+"MiniMetric", "MetricRow", "MetricNumber", "RecColumn", "PillBody", "FullBody", "TargetLine", "PagesSection", "ProbesSection"]);
+
+/**
+ * True when a name belongs to the perf-monitor UI. These stay excluded
+ * even in bench "profile our own tools" mode — the HUD re-renders on
+ * every 250ms sample tick while recording, so both capture results and
+ * live highlight boxes would be dominated by it.
+ */
+export function isPerfMonitorComponentName(name) {
+  return name.startsWith("PerfMonitor") || name.startsWith("PerfHud") || PERF_MONITOR_ALWAYS_EXCLUDED.has(name);
+}
+
+/**
+ * True when a component display name belongs to Buoy's own devtools UI (or
+ * RN's LogBox). Sets are checked first (O(1)), then prefixes.
+ */
+export function isDevToolsComponentName(name) {
+  // Always excluded — tracking these causes infinite render loops.
+  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;
+  }
+  if (captureBuoyToolRenders) {
+    // Benchmarking our own tools: capture everything except the
+    // perf-monitor UI (its 250ms HUD churn would drown the result).
+    return isPerfMonitorComponentName(name);
+  }
+  if (OTHER_DEV_TOOLS_COMPONENTS.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;
+}

package/lib/module/index.js

@@ -42,6 +42,56 @@ export { HighlightUpdatesOverlay } from "./highlight-updates/HighlightUpdatesOve
 // Profiler interceptor for debugging - captures what DevTools detects
 export { installProfilerInterceptor, uninstallProfilerInterceptor, setComparisonCallback, isInterceptorInstalled, enableProfilerLogging, disableProfilerLogging, isLoggingEnabled } from "./highlight-updates/utils/ProfilerInterceptor";
 
+// CommitProfiler — per-component render counts/durations over a capture window
+export { CommitProfiler } from "./highlight-updates/utils/CommitProfiler";
+
+// Bench "profile our own tools" mode: lets a dedicated benchmark screen
+// include Buoy's tool UI in render capture (normally pruned wholesale).
+// Highlight/events + perf-monitor components stay excluded regardless.
+export { setCaptureBuoyToolRenders, isCapturingBuoyToolRenders } from "./highlight-updates/utils/devtoolsComponentNames";
+
+// Register the render-capture provider so perf-monitor benchmarks can capture
+// renders without depending on this package. Runs at module scope: whenever
+// this package is installed, FloatingDevTools require()s it (including on the
+// fresh realm after a reload-between-cases batch step), and Metro evaluates
+// module side effects regardless of the package.json "sideEffects" hint.
+import { setRenderCaptureProvider } from "@buoy-gg/shared-ui";
+import { CommitProfiler as _commitProfilerForRegistry } from "./highlight-updates/utils/CommitProfiler";
+import _controllerForRegistry from "./highlight-updates/utils/HighlightUpdatesController";
+try {
+  setRenderCaptureProvider({
+    isSupported: _commitProfilerForRegistry.isSupported,
+    start: _commitProfilerForRegistry.startCapture,
+    stop: _commitProfilerForRegistry.stopCapture,
+    // Real-time bounding boxes (the Render Highlighter visual) for the span
+    // of a recording. Saves the user's prior overlay state and hands back a
+    // restore fn: previously ON stays ON, silent tracking (events tool) gets
+    // re-suppressed, otherwise fully disabled again.
+    startLiveHighlights: () => {
+      try {
+        const wasEnabled = _controllerForRegistry.isEnabled();
+        const wasSuppressed = _controllerForRegistry.getHighlightsSuppressed();
+        _controllerForRegistry.enable(); // idempotent; clears suppression
+        return () => {
+          try {
+            if (!wasEnabled) {
+              _controllerForRegistry.disable(); // respects background tracking
+            } else if (wasSuppressed) {
+              _controllerForRegistry.setHighlightsSuppressed(true);
+            }
+          } catch {
+            // restoring the overlay must never throw into the recorder
+          }
+        };
+      } catch {
+        return null;
+      }
+    }
+  });
+} catch {
+  // shared-ui too old to have the registry — capture is simply unavailable.
+}
+
 // RenderTracker singleton for tracking render history
 export { RenderTracker } from "./highlight-updates/utils/RenderTracker";
 // Convenience export for unified events integration

package/lib/typescript/highlight-updates/HighlightUpdatesOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightUpdatesOverlay.d.ts","sourceRoot":"","sources":["../../../src/highlight-updates/HighlightUpdatesOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAMN,MAAM,OAAO,CAAC;AA2Bf,UAAU,4BAA4B;IACpC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,uBAAuB,CAAC,EACtC,YAAY,GACb,GAAE,4BAAiC,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA0P/D;AA2DD,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"HighlightUpdatesOverlay.d.ts","sourceRoot":"","sources":["../../../src/highlight-updates/HighlightUpdatesOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAMN,MAAM,OAAO,CAAC;AA2Bf,UAAU,4BAA4B;IACpC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,uBAAuB,CAAC,EACtC,YAAY,GACb,GAAE,4BAAiC,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAwP/D;AA2DD,eAAe,uBAAuB,CAAC"}