@buoy-gg/highlight-updates 4.0.2 → 6.0.0

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

@@ -37,6 +37,7 @@ var _RenderTracker = require("./RenderTracker");
 var _PerformanceLogger = require("./PerformanceLogger");
 var _RenderCauseDetector = require("./RenderCauseDetector");
 var _sharedUi = require("@buoy-gg/shared-ui");
+var _devtoolsComponentNames = require("./devtoolsComponentNames");
 // State
 let globalEnabled = false; // User-controlled toggle for visual highlights
 // When true, tracking + measurement + storage all run as normal, but the
@@ -118,6 +119,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;
 }
@@ -324,48 +329,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
@@ -524,8 +493,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.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 = (0, _devtoolsComponentNames.isCapturingBuoyToolRenders)();
+  const excludeDevTools = !benchMode && _RenderTracker.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
@@ -558,12 +534,12 @@ function isOurOverlayNode(stateNode) {
       const name = getComponentName(current);
       if (name) {
         // Always check highlight overlay components (must always be excluded)
-        if (HIGHLIGHT_OVERLAY_COMPONENTS.has(name)) {
+        if (_devtoolsComponentNames.HIGHLIGHT_OVERLAY_COMPONENTS.has(name)) {
           result = true;
           break;
         }
         // Check highlight overlay prefixes
-        for (const prefix of HIGHLIGHT_OVERLAY_PREFIXES) {
+        for (const prefix of _devtoolsComponentNames.HIGHLIGHT_OVERLAY_PREFIXES) {
           if (name.startsWith(prefix)) {
             result = true;
             break;
@@ -571,14 +547,20 @@ function isOurOverlayNode(stateNode) {
         }
         if (result) break;
 
+        // Bench mode: the perf-monitor HUD still never flashes.
+        if (benchMode && (0, _devtoolsComponentNames.isPerfMonitorComponentName)(name)) {
+          result = true;
+          break;
+        }
+
         // Only check other dev tools if excludeDevTools is enabled
         if (excludeDevTools) {
-          if (OTHER_DEV_TOOLS_COMPONENTS.has(name)) {
+          if (_devtoolsComponentNames.OTHER_DEV_TOOLS_COMPONENTS.has(name)) {
             result = true;
             break;
           }
           // Check other dev tools prefixes
-          for (const prefix of OTHER_DEV_TOOLS_PREFIXES) {
+          for (const prefix of _devtoolsComponentNames.OTHER_DEV_TOOLS_PREFIXES) {
             if (name.startsWith(prefix)) {
               result = true;
               break;
@@ -780,14 +762,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,
@@ -795,44 +796,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,
@@ -847,119 +866,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.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.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 = (0, _RenderCauseDetector.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.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.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.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 = (0, _RenderCauseDetector.detectRenderCause)(rect.id, fiber, batchNativeTags, settings.debugLogLevel);
+      if (globalEnabled) {
+        // Visual tool is on - full tracking with storage and list notifications
+        _RenderTracker.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 = (0, _RenderCauseDetector.detectRenderCause)(rect.id, fiber, batchNativeTags, settings.debugLogLevel);
+            }
+            _RenderTracker.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.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 = (0, _RenderCauseDetector.detectRenderCause)(rect.id, fiber, batchNativeTags, settings.debugLogLevel);
+            }
+            _RenderTracker.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.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/commonjs/highlight-updates/utils/devtoolsComponentNames.js

@@ -0,0 +1,127 @@
+"use strict";
+
+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.isCapturingBuoyToolRenders = isCapturingBuoyToolRenders;
+exports.isDevToolsComponentName = isDevToolsComponentName;
+exports.isPerfMonitorComponentName = isPerfMonitorComponentName;
+exports.setCaptureBuoyToolRenders = setCaptureBuoyToolRenders;
+// ============================================================================
+// 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).
+const HIGHLIGHT_OVERLAY_COMPONENTS = exports.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)
+const HIGHLIGHT_OVERLAY_PREFIXES = exports.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 = exports.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
+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",
+// 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;
+function setCaptureBuoyToolRenders(enabled) {
+  captureBuoyToolRenders = enabled;
+}
+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.
+ */
+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.
+ */
+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;
+}