@buoy-gg/highlight-updates 7.0.27 → 7.0.29

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

@@ -89,21 +89,25 @@ export function RenderDetailView({
       children: [/*#__PURE__*/_jsxs(View, {
         style: styles.headerLeft,
         children: [/*#__PURE__*/_jsx(Text, {
+          testID: "buoy-highlight-detail-name",
           style: styles.componentName,
           numberOfLines: 1,
           children: componentName
         }), /*#__PURE__*/_jsx(View, {
           style: styles.nativeTypeBadge,
           children: /*#__PURE__*/_jsx(Text, {
+            testID: "buoy-highlight-detail-type",
             style: styles.nativeTypeText,
             children: nativeType
           })
         })]
       }), /*#__PURE__*/_jsx(CopyButton, {
         value: copyData,
-        size: 14
+        size: 14,
+        testID: "buoy-highlight-detail-copy"
       })]
     }), /*#__PURE__*/_jsxs(ScrollView, {
+      testID: "buoy-highlight-detail-scroll",
       style: styles.scrollView,
       contentContainerStyle: [styles.scrollContent, showHistoryFooter && {
         paddingBottom: 100
@@ -116,11 +120,13 @@ export function RenderDetailView({
         render: render,
         rendersPerSec: rendersPerSec
       }), hiddenEventCount > 0 && /*#__PURE__*/_jsxs(View, {
+        testID: "buoy-highlight-detail-locked",
         style: styles.lockedBanner,
         children: [/*#__PURE__*/_jsx(Lock, {
           size: 14,
           color: night.color.warning
         }), /*#__PURE__*/_jsxs(Text, {
+          testID: "buoy-highlight-detail-locked-text",
           style: styles.lockedBannerText,
           children: [hiddenEventCount, " ", hiddenEventCount === 1 ? 'event' : 'events', " hidden"]
         }), /*#__PURE__*/_jsx(Text, {
@@ -165,10 +171,12 @@ function AnswerCard({
     return "Changed:";
   };
   return /*#__PURE__*/_jsxs(View, {
+    testID: "buoy-highlight-detail-cause",
     style: styles.answerCard,
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.causeBadgeRow,
       children: [/*#__PURE__*/_jsx(Text, {
+        testID: "buoy-highlight-detail-cause-label",
         style: styles.causeLabel,
         children: getLabel()
       }), /*#__PURE__*/_jsx(View, {
@@ -176,6 +184,7 @@ function AnswerCard({
           backgroundColor: config.color + "20"
         }],
         children: /*#__PURE__*/_jsx(Text, {
+          testID: "buoy-highlight-detail-cause-badge",
           style: [styles.causeBadgeLargeText, {
             color: config.color
           }],
@@ -207,6 +216,7 @@ function AnswerCard({
       children: cause.changedKeys.filter(k => !k.includes("(ref only)")).slice(0, 5).map((key, index) => /*#__PURE__*/_jsx(View, {
         style: styles.propChangeChip,
         children: /*#__PURE__*/_jsx(Text, {
+          testID: `buoy-highlight-detail-changed-${index}`,
           style: styles.propChangeText,
           children: key
         })
@@ -228,6 +238,7 @@ function DetailsSection({
   return /*#__PURE__*/_jsxs(View, {
     style: styles.detailsSection,
     children: [hasIdentifiers && /*#__PURE__*/_jsxs(View, {
+      testID: "buoy-highlight-detail-identifiers",
       style: styles.detailsCard,
       children: [/*#__PURE__*/_jsx(Text, {
         style: styles.detailsCardTitle,
@@ -243,10 +254,13 @@ function DetailsSection({
         value: render.accessibilityLabel
       })]
     }), /*#__PURE__*/_jsxs(View, {
+      testID: "buoy-highlight-detail-stats",
       style: styles.statsRow,
       children: [/*#__PURE__*/_jsxs(View, {
+        testID: "buoy-highlight-detail-stat-renders",
         style: styles.statItem,
         children: [/*#__PURE__*/_jsx(Text, {
+          testID: "buoy-highlight-detail-stat-renders-value",
           style: [styles.statValue, {
             color: render.color
           }],
@@ -258,8 +272,10 @@ function DetailsSection({
       }), /*#__PURE__*/_jsx(View, {
         style: styles.statDivider
       }), /*#__PURE__*/_jsxs(View, {
+        testID: "buoy-highlight-detail-stat-rate",
         style: styles.statItem,
         children: [/*#__PURE__*/_jsx(Text, {
+          testID: "buoy-highlight-detail-stat-rate-value",
           style: styles.statValue,
           children: rendersPerSec
         }), /*#__PURE__*/_jsx(Text, {
@@ -269,8 +285,10 @@ function DetailsSection({
       }), /*#__PURE__*/_jsx(View, {
         style: styles.statDivider
       }), /*#__PURE__*/_jsxs(View, {
+        testID: "buoy-highlight-detail-stat-tag",
         style: styles.statItem,
         children: [/*#__PURE__*/_jsx(Text, {
+          testID: "buoy-highlight-detail-stat-tag-value",
           style: styles.statValue,
           children: render.nativeTag
         }), /*#__PURE__*/_jsx(Text, {
@@ -279,6 +297,7 @@ function DetailsSection({
         })]
       })]
     }), hasMeasurements && /*#__PURE__*/_jsxs(View, {
+      testID: "buoy-highlight-detail-measure",
       style: styles.measurementsRow,
       children: [/*#__PURE__*/_jsxs(View, {
         style: styles.measurementItem,
@@ -286,6 +305,7 @@ function DetailsSection({
           style: styles.measurementLabel,
           children: "x"
         }), /*#__PURE__*/_jsx(Text, {
+          testID: "buoy-highlight-detail-measure-x",
           style: styles.measurementValue,
           children: Math.round(render.measurements.x)
         })]
@@ -295,6 +315,7 @@ function DetailsSection({
           style: styles.measurementLabel,
           children: "y"
         }), /*#__PURE__*/_jsx(Text, {
+          testID: "buoy-highlight-detail-measure-y",
           style: styles.measurementValue,
           children: Math.round(render.measurements.y)
         })]
@@ -304,6 +325,7 @@ function DetailsSection({
           style: styles.measurementLabel,
           children: "w"
         }), /*#__PURE__*/_jsx(Text, {
+          testID: "buoy-highlight-detail-measure-w",
           style: styles.measurementValue,
           children: Math.round(render.measurements.width)
         })]
@@ -313,6 +335,7 @@ function DetailsSection({
           style: styles.measurementLabel,
           children: "h"
         }), /*#__PURE__*/_jsx(Text, {
+          testID: "buoy-highlight-detail-measure-h",
           style: styles.measurementValue,
           children: Math.round(render.measurements.height)
         })]
@@ -328,12 +351,15 @@ function DetailRow({
   label,
   value
 }) {
+  const handle = `buoy-highlight-detail-id-${label.toLowerCase()}`;
   return /*#__PURE__*/_jsxs(View, {
+    testID: handle,
     style: styles.detailRow,
     children: [/*#__PURE__*/_jsx(Text, {
       style: styles.detailLabel,
       children: label
     }), /*#__PURE__*/_jsx(Text, {
+      testID: `${handle}-value`,
       style: styles.detailValue,
       numberOfLines: 1,
       children: value
@@ -415,6 +441,7 @@ function QuickActionsSection({
     }
   }, [selectedOption, onAddFilter]);
   return /*#__PURE__*/_jsxs(View, {
+    testID: "buoy-highlight-quick",
     style: styles.quickActionsSection,
     children: [/*#__PURE__*/_jsx(Text, {
       style: styles.quickActionsTitle,
@@ -422,6 +449,7 @@ function QuickActionsSection({
     }), /*#__PURE__*/_jsx(View, {
       style: styles.filterOptionsList,
       children: filterOptions.map((option, index) => /*#__PURE__*/_jsx(FilterOptionCard, {
+        testID: `buoy-highlight-quick-${option.type.toLowerCase()}`,
         label: option.label,
         value: option.value,
         isSelected: selectedIndex === index,
@@ -430,6 +458,9 @@ function QuickActionsSection({
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.filterActionButtons,
       children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+        testID: "buoy-highlight-quick-include",
+        accessibilityRole: "button",
+        accessibilityLabel: "Only show this",
         style: [styles.filterActionButton, styles.filterActionButtonInclude, !selectedOption && styles.filterActionButtonDisabled],
         onPress: handleInclude,
         disabled: !selectedOption,
@@ -444,6 +475,9 @@ function QuickActionsSection({
           children: "Only Show This"
         })]
       }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+        testID: "buoy-highlight-quick-exclude",
+        accessibilityRole: "button",
+        accessibilityLabel: "Hide this",
         style: [styles.filterActionButton, styles.filterActionButtonExclude, !selectedOption && styles.filterActionButtonDisabled],
         onPress: handleExclude,
         disabled: !selectedOption,
@@ -466,12 +500,16 @@ function QuickActionsSection({
  * FilterOptionCard - A selectable filter option card
  */
 function FilterOptionCard({
+  testID,
   label,
   value,
   isSelected,
   onSelect
 }) {
   return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    testID: testID,
+    accessibilityRole: "button",
+    accessibilityLabel: `${label}, ${value}`,
     style: [styles.filterOptionCard, isSelected && styles.filterOptionCardSelected],
     onPress: onSelect,
     activeOpacity: 0.7,
@@ -479,6 +517,7 @@ function FilterOptionCard({
       style: [styles.filterOptionLabel, isSelected && styles.filterOptionLabelSelected],
       children: label
     }), /*#__PURE__*/_jsx(Text, {
+      testID: testID ? `${testID}-value` : undefined,
       style: [styles.filterOptionValue, isSelected && styles.filterOptionValueSelected],
       numberOfLines: 1,
       children: value

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

@@ -15,15 +15,22 @@ import { TreeDiffViewer } from "@buoy-gg/shared-ui/dataViewer";
 import { EnhancedCauseDisplay, CAUSE_CONFIG } from "./RenderCauseBadge";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
- * Format timestamp with milliseconds
+ * `HH:MM:SS.mmm` — the same shape Redux, Zustand and Jotai print for the same
+ * job, and for the same reason: the milliseconds are the point.
+ *
+ * Built by hand rather than from `toLocaleTimeString`, which appends the day
+ * period on a 12-hour locale — so concatenating the milliseconds to the end of
+ * it produced "8:21:44 AM.351", with the fraction attached to the wrong part
+ * of the time. It also made the string depend on the hour of day, which is a
+ * fine way to have a test that only passes after 10am.
  */
 function formatTimeWithMs(timestamp) {
   const date = new Date(timestamp);
-  return date.toLocaleTimeString([], {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit"
-  }) + `.${date.getMilliseconds().toString().padStart(3, "0")}`;
+  const h = date.getHours().toString().padStart(2, "0");
+  const m = date.getMinutes().toString().padStart(2, "0");
+  const s = date.getSeconds().toString().padStart(2, "0");
+  const ms = date.getMilliseconds().toString().padStart(3, "0");
+  return `${h}:${m}:${s}.${ms}`;
 }
 
 /**
@@ -83,14 +90,17 @@ export function RenderHistoryViewer({
   // If no history, show empty state
   if (totalEvents === 0) {
     return /*#__PURE__*/_jsxs(View, {
+      testID: "buoy-highlight-history-empty",
       style: styles.emptyContainer,
       children: [/*#__PURE__*/_jsx(Clock, {
         size: 32,
         color: night.color.textTertiary
       }), /*#__PURE__*/_jsx(Text, {
+        testID: "buoy-highlight-history-empty-title",
         style: styles.emptyTitle,
         children: "No Render History"
       }), /*#__PURE__*/_jsx(Text, {
+        testID: "buoy-highlight-history-empty-text",
         style: styles.emptyText,
         children: "Enable render history tracking in settings to see render events here."
       })]
@@ -102,11 +112,13 @@ export function RenderHistoryViewer({
         paddingBottom: !disableInternalFooter && totalEvents > 1 ? 80 : 0
       }],
       children: [lockedEventCount > 0 && /*#__PURE__*/_jsxs(View, {
+        testID: "buoy-highlight-history-locked",
         style: styles.lockedBanner,
         children: [/*#__PURE__*/_jsx(Lock, {
           size: 14,
           color: night.color.warning
         }), /*#__PURE__*/_jsxs(Text, {
+          testID: "buoy-highlight-history-locked-text",
           style: styles.lockedBannerText,
           children: [lockedEventCount, " older ", lockedEventCount === 1 ? 'render' : 'renders', " locked"]
         }), /*#__PURE__*/_jsx(Text, {
@@ -116,6 +128,9 @@ export function RenderHistoryViewer({
       }), /*#__PURE__*/_jsxs(View, {
         style: styles.viewToggleContainer,
         children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+          testID: "buoy-highlight-history-mode-current",
+          accessibilityRole: "button",
+          accessibilityLabel: "Current state",
           style: [styles.viewToggleCard, activeView === "current" && styles.viewToggleCardActive],
           onPress: () => setActiveView("current"),
           activeOpacity: 0.8,
@@ -135,6 +150,8 @@ export function RenderHistoryViewer({
             children: ["View render #", currentEvent?.renderNumber ?? 0, " details"]
           })]
         }), /*#__PURE__*/_jsxs(View, {
+          testID: "buoy-highlight-history-mode-diff",
+          accessibilityLabel: "Diff view, coming soon",
           style: [styles.viewToggleCard, styles.viewToggleCardDisabled],
           children: [/*#__PURE__*/_jsxs(View, {
             style: styles.viewToggleContent,
@@ -159,6 +176,7 @@ export function RenderHistoryViewer({
           })]
         })]
       }), /*#__PURE__*/_jsx(ScrollView, {
+        testID: "buoy-highlight-history-scroll",
         style: styles.contentScroll,
         contentContainerStyle: styles.contentContainer,
         showsVerticalScrollIndicator: false,
@@ -191,6 +209,7 @@ function CurrentStateView({
 }) {
   if (!event) {
     return /*#__PURE__*/_jsx(View, {
+      testID: "buoy-highlight-history-no-event",
       style: styles.noEventContainer,
       children: /*#__PURE__*/_jsx(Text, {
         style: styles.noEventText,
@@ -206,9 +225,11 @@ function CurrentStateView({
       children: [/*#__PURE__*/_jsxs(View, {
         style: styles.eventHeaderLeft,
         children: [/*#__PURE__*/_jsxs(Text, {
+          testID: "buoy-highlight-history-event-title",
           style: styles.eventTitle,
           children: ["Render #", event.renderNumber]
         }), /*#__PURE__*/_jsx(Text, {
+          testID: "buoy-highlight-history-event-time",
           style: styles.eventTime,
           children: formatTimeWithMs(event.timestamp)
         })]
@@ -221,6 +242,7 @@ function CurrentStateView({
             backgroundColor: render.color
           }]
         }), /*#__PURE__*/_jsx(Text, {
+          testID: "buoy-highlight-history-event-cause",
           style: [styles.eventBadgeText, {
             color: render.color
           }],
@@ -261,6 +283,7 @@ function CurrentStateView({
           showsHorizontalScrollIndicator: false,
           style: styles.propsScrollView,
           children: /*#__PURE__*/_jsx(Text, {
+            testID: "buoy-highlight-history-props",
             style: styles.propsJson,
             children: JSON.stringify(event.capturedProps, null, 2)
           })

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

@@ -12,6 +12,7 @@ import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { ChevronRight, night, useRelativeTime } from "@buoy-gg/shared-ui";
 import { IdentifierBadge } from "./IdentifierBadge";
 import { RenderCauseBadge } from "./RenderCauseBadge";
+import { renderRowTestID } from "../utils/testIDs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function RenderListItemInner({
   render,
@@ -54,7 +55,15 @@ function RenderListItemInner({
 
   // Format time since last render (live-updating)
   const timeSinceRender = useRelativeTime(render.lastRenderTime);
+
+  // The row is addressed by the identifier it SHOWS, never by nativeTag — see
+  // utils/testIDs.ts for why a tag can't be a handle. The label spells the row
+  // out for assistive tech, which otherwise gets a coloured bar and a count.
+  const rowTestID = renderRowTestID(identifier.value);
   return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    testID: rowTestID,
+    accessibilityRole: "button",
+    accessibilityLabel: `${render.displayName}, ${identifier.type} ${identifier.value}, ${render.renderCount} renders`,
     style: styles.container,
     onPress: () => onPress(render),
     activeOpacity: 0.7,
@@ -69,6 +78,7 @@ function RenderListItemInner({
         children: [/*#__PURE__*/_jsxs(View, {
           style: styles.viewTypeContainer,
           children: [/*#__PURE__*/_jsx(Text, {
+            testID: `${rowTestID}-name`,
             style: styles.viewType,
             numberOfLines: 1,
             children: render.displayName
@@ -78,6 +88,7 @@ function RenderListItemInner({
             compact: true,
             shortLabel: true
           }) : render.displayName !== render.viewType ? /*#__PURE__*/_jsx(Text, {
+            testID: `${rowTestID}-type`,
             style: styles.nativeType,
             numberOfLines: 1,
             children: render.viewType
@@ -87,6 +98,7 @@ function RenderListItemInner({
             backgroundColor: render.color + "30"
           }],
           children: /*#__PURE__*/_jsxs(Text, {
+            testID: `${rowTestID}-count`,
             style: [styles.renderCount, {
               color: render.color
             }],
@@ -96,6 +108,7 @@ function RenderListItemInner({
       }), render.lastRenderCause && /*#__PURE__*/_jsx(View, {
         style: styles.causeRow,
         children: /*#__PURE__*/_jsx(RenderCauseBadge, {
+          testID: `${rowTestID}-cause`,
           cause: render.lastRenderCause,
           compact: true,
           showKeys: true,
@@ -106,12 +119,14 @@ function RenderListItemInner({
         children: [/*#__PURE__*/_jsx(View, {
           style: styles.identifierContainer,
           children: /*#__PURE__*/_jsx(IdentifierBadge, {
+            testID: `${rowTestID}-identifier`,
             type: identifier.type,
             value: identifier.value,
             compact: true,
             shortLabel: true
           })
         }), /*#__PURE__*/_jsx(Text, {
+          testID: `${rowTestID}-time`,
           style: styles.timing,
           children: timeSinceRender
         })]

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

@@ -196,6 +196,9 @@ export function RendersCopySettingsView({
       return /*#__PURE__*/_jsxs(View, {
         style: styles.collapsedPreview,
         children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          testID: "buoy-highlight-copy-preview-show",
+          accessibilityRole: "button",
+          accessibilityLabel: "Show preview",
           style: styles.expandButton,
           onPress: () => setIsPreviewExpanded(true),
           children: /*#__PURE__*/_jsxs(View, {
@@ -209,6 +212,7 @@ export function RendersCopySettingsView({
                 style: styles.expandButtonTitle,
                 children: "Show Preview"
               }), /*#__PURE__*/_jsxs(Text, {
+                testID: "buoy-highlight-copy-preview-summary",
                 style: styles.expandButtonSubtitle,
                 children: [totalComponents, " component", totalComponents !== 1 ? "s" : "", " \xB7 ", totalRenders, " renders \xB7 ~", formatBytes(estimatedSize), !hasLiveData ? " (mock data)" : ""]
               })]
@@ -218,6 +222,7 @@ export function RendersCopySettingsView({
             })]
           })
         }), sizeWarningLevel !== "none" && /*#__PURE__*/_jsxs(View, {
+          testID: "buoy-highlight-copy-size-warning",
           style: [styles.sizeWarning, sizeWarningLevel === "danger" && styles.sizeWarningDanger],
           children: [/*#__PURE__*/_jsx(AlertTriangle, {
             size: 12,
@@ -234,6 +239,9 @@ export function RendersCopySettingsView({
     const exportText = generateCopyText();
     return /*#__PURE__*/_jsxs(View, {
       children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+        testID: "buoy-highlight-copy-preview-hide",
+        accessibilityRole: "button",
+        accessibilityLabel: "Hide preview",
         style: styles.collapseButton,
         onPress: () => setIsPreviewExpanded(false),
         children: [/*#__PURE__*/_jsx(Text, {
@@ -244,9 +252,11 @@ export function RendersCopySettingsView({
           color: night.color.textSecondary
         })]
       }), /*#__PURE__*/_jsx(ScrollView, {
+        testID: "buoy-highlight-copy-preview-scroll",
         style: styles.previewScroll,
         nestedScrollEnabled: true,
         children: /*#__PURE__*/_jsx(Text, {
+          testID: "buoy-highlight-copy-preview-text",
           style: styles.previewText,
           selectable: true,
           children: exportText
@@ -261,6 +271,7 @@ export function RendersCopySettingsView({
     const statusLabel = hasLiveData ? `${totalComponents} components` : "Mock data (no renders captured)";
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Text, {
+        testID: "buoy-highlight-copy-status",
         style: styles.statusLabel,
         children: statusLabel
       }), /*#__PURE__*/_jsx(ToolbarCopyButton, {

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

@@ -33,11 +33,14 @@ function StatsDisplayInner() {
   }, []);
   return /*#__PURE__*/_jsxs(View, {
     nativeID: "__rn_buoy__stats-row",
+    testID: "buoy-highlight-stats",
+    accessibilityLabel: `${stats.totalComponents} components tracked`,
     style: styles.headerChip,
     children: [/*#__PURE__*/_jsx(Activity, {
       size: 12,
       color: night.color.accent
     }), /*#__PURE__*/_jsx(Text, {
+      testID: "buoy-highlight-stats-value",
       style: [styles.headerChipValue, {
         color: night.color.accent
       }],

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

@@ -19,6 +19,10 @@
  */
 
 import { isDevToolsComponentName, isRenderLoopUnsafeName } from "./devtoolsComponentNames";
+// One implementation, shared with the overlay's RenderCauseDetector — the two
+// classifiers are separate on purpose, but this question is not. See the file
+// for why the obvious identity check is wrong.
+import { ownStateChanged } from "./ownStateChanged";
 
 // React work tags for components that render user code.
 const FunctionComponent = 0;
@@ -206,7 +210,7 @@ function detectCause(fiber, wantKeys) {
   }
 
   // No prop change of substance. Own state/hooks next.
-  if (prev.memoizedState !== fiber.memoizedState) return {
+  if (ownStateChanged(prev, fiber)) return {
     cause: "hooks"
   };
   return {

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

@@ -30,6 +30,8 @@
 import { installProfilerInterceptor, uninstallProfilerInterceptor, setComparisonCallback } from "./ProfilerInterceptor";
 import { findNodeHandle, UIManager, Dimensions, PixelRatio } from "react-native";
 import { RenderTracker } from "./RenderTracker";
+import { describeScreen } from "./screenElements";
+import { scoreTapMatch } from "./tapMatch";
 import { PerformanceLogger, markEventReceived } from "./PerformanceLogger";
 import { detectRenderCause, clearRenderCauseState } from "./RenderCauseDetector";
 import { notifySubscriberCountChange } from "@buoy-gg/shared-ui";
@@ -1165,10 +1167,60 @@ async function locateComponent(params) {
   const margin = typeof params.margin === "number" ? params.margin : 12;
   const renders = RenderTracker.getRenders();
   if (renders.length === 0) {
+    const described = await describeScreen();
+    const q = (params.query ?? "").trim().toLowerCase();
+    let best;
+    for (const el of described.elements) {
+      if (params.nativeTag != null && el.nativeTag === params.nativeTag) {
+        best = {
+          el,
+          score: 1000
+        };
+        break;
+      }
+      const score = scoreTapMatch({
+        nativeTag: el.nativeTag,
+        testID: el.testID,
+        label: el.label,
+        text: el.text,
+        name: el.name,
+        tap: el.tap
+      }, {
+        query: q || undefined,
+        nativeTag: params.nativeTag
+      });
+      if (score <= 0) continue;
+      if (!best || score > best.score) best = {
+        el,
+        score
+      };
+    }
+    if (!best?.el.frame) {
+      return {
+        matched: false,
+        reason: "no-match",
+        candidates: []
+      };
+    }
+    const win = described.screen;
+    const f = best.el.frame;
     return {
-      matched: false,
-      reason: "no-renders",
-      candidates: []
+      matched: true,
+      live: true,
+      rect: {
+        x: f.x * win.width,
+        y: f.y * win.height,
+        width: f.width * win.width,
+        height: f.height * win.height
+      },
+      scale: PixelRatio.get(),
+      screen: {
+        width: win.width,
+        height: win.height
+      },
+      nativeTag: best.el.nativeTag ?? undefined,
+      componentName: best.el.name,
+      testID: best.el.testID
     };
   }
 
@@ -1570,6 +1622,16 @@ function disable() {
   devToolsNodeCache.clear(); // Clear detection cache
   clearRenderCauseState(); // Clear render cause state to prevent memory leaks
 
+  // Freeze is a view state on a LIVE overlay, and the overlay is going away:
+  // the boxes it was holding open were just cleared with the tags above. Left
+  // latched it outlived the thing it froze — switch tracking off and back on
+  // and the button still read "Unfreeze frame" on a tool with nothing frozen,
+  // while new highlights (correctly) refused to fade.
+  if (isFrozen) {
+    isFrozen = false;
+    notifyFreezeListeners();
+  }
+
   // Only unsubscribe if background tracking doesn't need it
   if (!backgroundTrackingEnabled) {
     unsubscribeFromTraceUpdates();

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

@@ -26,6 +26,11 @@
 
 "use strict";
 
+// One implementation of "did this component's own state actually change?",
+// shared with CommitProfiler. The two classifiers are separate on purpose;
+// this question is not, and both of them got it wrong the same way.
+import { hookStateChanged } from "./ownStateChanged";
+
 // ============================================================================
 // TYPE DEFINITIONS
 // Based on React Native source: packages/react-native/Libraries/Renderer/
@@ -650,9 +655,16 @@ function detectComponentCause(componentFiber) {
 
   // Check if state changed (for hooks, memoizedState is a linked list)
   // This means useState/useReducer triggered a re-render
-  const stateChanged = prevMemoizedState !== currentFiber.memoizedState;
-  if (stateChanged) {
-    // Phase 3: Compare hook states to get actual value changes
+  // NOT `prevMemoizedState !== currentFiber.memoizedState`, which is what this
+  // used to be — see utils/ownStateChanged.ts for why that is wrong and what
+  // it cost. Shared with `CommitProfiler`, which reached the same wrong line
+  // independently; the two classifiers stay separate, this one question does
+  // not.
+  if (hookStateChanged(prevMemoizedState, currentFiber.memoizedState, {
+    isClassComponent: currentFiber.tag === 1
+  })) {
+    // Phase 3: the actual before/after values, for the UI. Only needed once
+    // the cause is settled, and only the overlay displays them.
     const hookChanges = compareHookStates(prevExtractedHooks, currentHooks);
     return {
       cause: "state",

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

@@ -10,6 +10,7 @@
 
 import { getComponentDisplayName } from "./ViewTypeMapper";
 import { PerformanceLogger } from "./PerformanceLogger";
+import { isNamedComposite } from "./namedComposite";
 
 /**
  * Debug logging levels for render cause detection.
@@ -69,7 +70,8 @@ class RenderTrackerSingleton {
     // Debug settings
     debugLogLevel: "off",
     // Dev tools visibility - exclude by default
-    excludeDevTools: true
+    excludeDevTools: true,
+    showHostViews: false
   };
 
   // Batch mode: defer notifyListeners until endBatch is called
@@ -418,6 +420,9 @@ class RenderTrackerSingleton {
    */
   getFilteredRenders(searchText = "") {
     let renders = this.getRenders();
+    if (!this.settings.showHostViews) {
+      renders = renders.filter(isNamedComposite);
+    }
 
     // Apply search filter
     if (searchText.trim()) {