@buoy-gg/highlight-updates 7.0.28 → 7.0.29

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

@@ -95,21 +95,25 @@ function RenderDetailView({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.headerLeft,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          testID: "buoy-highlight-detail-name",
           style: styles.componentName,
           numberOfLines: 1,
           children: componentName
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.nativeTypeBadge,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            testID: "buoy-highlight-detail-type",
             style: styles.nativeTypeText,
             children: nativeType
           })
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CopyButton, {
         value: copyData,
-        size: 14
+        size: 14,
+        testID: "buoy-highlight-detail-copy"
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      testID: "buoy-highlight-detail-scroll",
       style: styles.scrollView,
       contentContainerStyle: [styles.scrollContent, showHistoryFooter && {
         paddingBottom: 100
@@ -122,11 +126,13 @@ function RenderDetailView({
         render: render,
         rendersPerSec: rendersPerSec
       }), hiddenEventCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        testID: "buoy-highlight-detail-locked",
         style: styles.lockedBanner,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Lock, {
           size: 14,
           color: _sharedUi.night.color.warning
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          testID: "buoy-highlight-detail-locked-text",
           style: styles.lockedBannerText,
           children: [hiddenEventCount, " ", hiddenEventCount === 1 ? 'event' : 'events', " hidden"]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -171,10 +177,12 @@ function AnswerCard({
     return "Changed:";
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    testID: "buoy-highlight-detail-cause",
     style: styles.answerCard,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.causeBadgeRow,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        testID: "buoy-highlight-detail-cause-label",
         style: styles.causeLabel,
         children: getLabel()
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -182,6 +190,7 @@ function AnswerCard({
           backgroundColor: config.color + "20"
         }],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          testID: "buoy-highlight-detail-cause-badge",
           style: [styles.causeBadgeLargeText, {
             color: config.color
           }],
@@ -213,6 +222,7 @@ function AnswerCard({
       children: cause.changedKeys.filter(k => !k.includes("(ref only)")).slice(0, 5).map((key, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.propChangeChip,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          testID: `buoy-highlight-detail-changed-${index}`,
           style: styles.propChangeText,
           children: key
         })
@@ -234,6 +244,7 @@ function DetailsSection({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.detailsSection,
     children: [hasIdentifiers && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      testID: "buoy-highlight-detail-identifiers",
       style: styles.detailsCard,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.detailsCardTitle,
@@ -249,10 +260,13 @@ function DetailsSection({
         value: render.accessibilityLabel
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      testID: "buoy-highlight-detail-stats",
       style: styles.statsRow,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        testID: "buoy-highlight-detail-stat-renders",
         style: styles.statItem,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          testID: "buoy-highlight-detail-stat-renders-value",
           style: [styles.statValue, {
             color: render.color
           }],
@@ -264,8 +278,10 @@ function DetailsSection({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.statDivider
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        testID: "buoy-highlight-detail-stat-rate",
         style: styles.statItem,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          testID: "buoy-highlight-detail-stat-rate-value",
           style: styles.statValue,
           children: rendersPerSec
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -275,8 +291,10 @@ function DetailsSection({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.statDivider
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        testID: "buoy-highlight-detail-stat-tag",
         style: styles.statItem,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          testID: "buoy-highlight-detail-stat-tag-value",
           style: styles.statValue,
           children: render.nativeTag
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -285,6 +303,7 @@ function DetailsSection({
         })]
       })]
     }), hasMeasurements && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      testID: "buoy-highlight-detail-measure",
       style: styles.measurementsRow,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.measurementItem,
@@ -292,6 +311,7 @@ function DetailsSection({
           style: styles.measurementLabel,
           children: "x"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          testID: "buoy-highlight-detail-measure-x",
           style: styles.measurementValue,
           children: Math.round(render.measurements.x)
         })]
@@ -301,6 +321,7 @@ function DetailsSection({
           style: styles.measurementLabel,
           children: "y"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          testID: "buoy-highlight-detail-measure-y",
           style: styles.measurementValue,
           children: Math.round(render.measurements.y)
         })]
@@ -310,6 +331,7 @@ function DetailsSection({
           style: styles.measurementLabel,
           children: "w"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          testID: "buoy-highlight-detail-measure-w",
           style: styles.measurementValue,
           children: Math.round(render.measurements.width)
         })]
@@ -319,6 +341,7 @@ function DetailsSection({
           style: styles.measurementLabel,
           children: "h"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          testID: "buoy-highlight-detail-measure-h",
           style: styles.measurementValue,
           children: Math.round(render.measurements.height)
         })]
@@ -334,12 +357,15 @@ function DetailRow({
   label,
   value
 }) {
+  const handle = `buoy-highlight-detail-id-${label.toLowerCase()}`;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    testID: handle,
     style: styles.detailRow,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: styles.detailLabel,
       children: label
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: `${handle}-value`,
       style: styles.detailValue,
       numberOfLines: 1,
       children: value
@@ -421,6 +447,7 @@ function QuickActionsSection({
     }
   }, [selectedOption, onAddFilter]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    testID: "buoy-highlight-quick",
     style: styles.quickActionsSection,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: styles.quickActionsTitle,
@@ -428,6 +455,7 @@ function QuickActionsSection({
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.filterOptionsList,
       children: filterOptions.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterOptionCard, {
+        testID: `buoy-highlight-quick-${option.type.toLowerCase()}`,
         label: option.label,
         value: option.value,
         isSelected: selectedIndex === index,
@@ -436,6 +464,9 @@ function QuickActionsSection({
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.filterActionButtons,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        testID: "buoy-highlight-quick-include",
+        accessibilityRole: "button",
+        accessibilityLabel: "Only show this",
         style: [styles.filterActionButton, styles.filterActionButtonInclude, !selectedOption && styles.filterActionButtonDisabled],
         onPress: handleInclude,
         disabled: !selectedOption,
@@ -450,6 +481,9 @@ function QuickActionsSection({
           children: "Only Show This"
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        testID: "buoy-highlight-quick-exclude",
+        accessibilityRole: "button",
+        accessibilityLabel: "Hide this",
         style: [styles.filterActionButton, styles.filterActionButtonExclude, !selectedOption && styles.filterActionButtonDisabled],
         onPress: handleExclude,
         disabled: !selectedOption,
@@ -472,12 +506,16 @@ function QuickActionsSection({
  * FilterOptionCard - A selectable filter option card
  */
 function FilterOptionCard({
+  testID,
   label,
   value,
   isSelected,
   onSelect
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    testID: testID,
+    accessibilityRole: "button",
+    accessibilityLabel: `${label}, ${value}`,
     style: [styles.filterOptionCard, isSelected && styles.filterOptionCardSelected],
     onPress: onSelect,
     activeOpacity: 0.7,
@@ -485,6 +523,7 @@ function FilterOptionCard({
       style: [styles.filterOptionLabel, isSelected && styles.filterOptionLabelSelected],
       children: label
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: testID ? `${testID}-value` : undefined,
       style: [styles.filterOptionValue, isSelected && styles.filterOptionValueSelected],
       numberOfLines: 1,
       children: value

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

@@ -22,15 +22,22 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  */
 
 /**
- * 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}`;
 }
 
 /**
@@ -90,14 +97,17 @@ function RenderHistoryViewer({
   // If no history, show empty state
   if (totalEvents === 0) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      testID: "buoy-highlight-history-empty",
       style: styles.emptyContainer,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
         size: 32,
         color: _sharedUi.night.color.textTertiary
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        testID: "buoy-highlight-history-empty-title",
         style: styles.emptyTitle,
         children: "No Render History"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        testID: "buoy-highlight-history-empty-text",
         style: styles.emptyText,
         children: "Enable render history tracking in settings to see render events here."
       })]
@@ -109,11 +119,13 @@ function RenderHistoryViewer({
         paddingBottom: !disableInternalFooter && totalEvents > 1 ? 80 : 0
       }],
       children: [lockedEventCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        testID: "buoy-highlight-history-locked",
         style: styles.lockedBanner,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Lock, {
           size: 14,
           color: _sharedUi.night.color.warning
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          testID: "buoy-highlight-history-locked-text",
           style: styles.lockedBannerText,
           children: [lockedEventCount, " older ", lockedEventCount === 1 ? 'render' : 'renders', " locked"]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -123,6 +135,9 @@ function RenderHistoryViewer({
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.viewToggleContainer,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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,
@@ -142,6 +157,8 @@ function RenderHistoryViewer({
             children: ["View render #", currentEvent?.renderNumber ?? 0, " details"]
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          testID: "buoy-highlight-history-mode-diff",
+          accessibilityLabel: "Diff view, coming soon",
           style: [styles.viewToggleCard, styles.viewToggleCardDisabled],
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
             style: styles.viewToggleContent,
@@ -166,6 +183,7 @@ function RenderHistoryViewer({
           })]
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        testID: "buoy-highlight-history-scroll",
         style: styles.contentScroll,
         contentContainerStyle: styles.contentContainer,
         showsVerticalScrollIndicator: false,
@@ -198,6 +216,7 @@ function CurrentStateView({
 }) {
   if (!event) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      testID: "buoy-highlight-history-no-event",
       style: styles.noEventContainer,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.noEventText,
@@ -213,9 +232,11 @@ function CurrentStateView({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.eventHeaderLeft,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          testID: "buoy-highlight-history-event-title",
           style: styles.eventTitle,
           children: ["Render #", event.renderNumber]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          testID: "buoy-highlight-history-event-time",
           style: styles.eventTime,
           children: formatTimeWithMs(event.timestamp)
         })]
@@ -228,6 +249,7 @@ function CurrentStateView({
             backgroundColor: render.color
           }]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          testID: "buoy-highlight-history-event-cause",
           style: [styles.eventBadgeText, {
             color: render.color
           }],
@@ -268,6 +290,7 @@ function CurrentStateView({
           showsHorizontalScrollIndicator: false,
           style: styles.propsScrollView,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            testID: "buoy-highlight-history-props",
             style: styles.propsJson,
             children: JSON.stringify(event.capturedProps, null, 2)
           })

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

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _IdentifierBadge = require("./IdentifierBadge");
 var _RenderCauseBadge = require("./RenderCauseBadge");
+var _testIDs = require("../utils/testIDs");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -59,7 +60,15 @@ function RenderListItemInner({
 
   // Format time since last render (live-updating)
   const timeSinceRender = (0, _sharedUi.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 = (0, _testIDs.renderRowTestID)(identifier.value);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    testID: rowTestID,
+    accessibilityRole: "button",
+    accessibilityLabel: `${render.displayName}, ${identifier.type} ${identifier.value}, ${render.renderCount} renders`,
     style: styles.container,
     onPress: () => onPress(render),
     activeOpacity: 0.7,
@@ -74,6 +83,7 @@ function RenderListItemInner({
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.viewTypeContainer,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            testID: `${rowTestID}-name`,
             style: styles.viewType,
             numberOfLines: 1,
             children: render.displayName
@@ -83,6 +93,7 @@ function RenderListItemInner({
             compact: true,
             shortLabel: true
           }) : render.displayName !== render.viewType ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            testID: `${rowTestID}-type`,
             style: styles.nativeType,
             numberOfLines: 1,
             children: render.viewType
@@ -92,6 +103,7 @@ function RenderListItemInner({
             backgroundColor: render.color + "30"
           }],
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+            testID: `${rowTestID}-count`,
             style: [styles.renderCount, {
               color: render.color
             }],
@@ -101,6 +113,7 @@ function RenderListItemInner({
       }), render.lastRenderCause && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.causeRow,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderCauseBadge.RenderCauseBadge, {
+          testID: `${rowTestID}-cause`,
           cause: render.lastRenderCause,
           compact: true,
           showKeys: true,
@@ -111,12 +124,14 @@ function RenderListItemInner({
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.identifierContainer,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge, {
+            testID: `${rowTestID}-identifier`,
             type: identifier.type,
             value: identifier.value,
             compact: true,
             shortLabel: true
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          testID: `${rowTestID}-time`,
           style: styles.timing,
           children: timeSinceRender
         })]

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

@@ -200,6 +200,9 @@ function RendersCopySettingsView({
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.collapsedPreview,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          testID: "buoy-highlight-copy-preview-show",
+          accessibilityRole: "button",
+          accessibilityLabel: "Show preview",
           style: styles.expandButton,
           onPress: () => setIsPreviewExpanded(true),
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -213,6 +216,7 @@ function RendersCopySettingsView({
                 style: styles.expandButtonTitle,
                 children: "Show Preview"
               }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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)" : ""]
               })]
@@ -222,6 +226,7 @@ function RendersCopySettingsView({
             })]
           })
         }), sizeWarningLevel !== "none" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          testID: "buoy-highlight-copy-size-warning",
           style: [styles.sizeWarning, sizeWarningLevel === "danger" && styles.sizeWarningDanger],
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertTriangle, {
             size: 12,
@@ -238,6 +243,9 @@ function RendersCopySettingsView({
     const exportText = generateCopyText();
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        testID: "buoy-highlight-copy-preview-hide",
+        accessibilityRole: "button",
+        accessibilityLabel: "Hide preview",
         style: styles.collapseButton,
         onPress: () => setIsPreviewExpanded(false),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -248,9 +256,11 @@ function RendersCopySettingsView({
           color: _sharedUi.night.color.textSecondary
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        testID: "buoy-highlight-copy-preview-scroll",
         style: styles.previewScroll,
         nestedScrollEnabled: true,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          testID: "buoy-highlight-copy-preview-text",
           style: styles.previewText,
           selectable: true,
           children: exportText
@@ -265,6 +275,7 @@ function RendersCopySettingsView({
     const statusLabel = hasLiveData ? `${totalComponents} components` : "Mock data (no renders captured)";
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        testID: "buoy-highlight-copy-status",
         style: styles.statusLabel,
         children: statusLabel
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {

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

@@ -36,11 +36,14 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
   }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     nativeID: "__rn_buoy__stats-row",
+    testID: "buoy-highlight-stats",
+    accessibilityLabel: `${stats.totalComponents} components tracked`,
     style: styles.headerChip,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Activity, {
       size: 12,
       color: _sharedUi.night.color.accent
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: "buoy-highlight-stats-value",
       style: [styles.headerChipValue, {
         color: _sharedUi.night.color.accent
       }],

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CommitProfiler = void 0;
 var _devtoolsComponentNames = require("./devtoolsComponentNames");
+var _ownStateChanged = require("./ownStateChanged");
 /**
  * CommitProfiler — per-component render counts + durations across a capture
  * window, React-DevTools-profiler style, without React DevTools attached.
@@ -23,6 +24,10 @@ var _devtoolsComponentNames = require("./devtoolsComponentNames");
  * registry (see the registration in this package's index.tsx).
  */
 
+// 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.
+
 // React work tags for components that render user code.
 const FunctionComponent = 0;
 const ClassComponent = 1;
@@ -209,7 +214,7 @@ function detectCause(fiber, wantKeys) {
   }
 
   // No prop change of substance. Own state/hooks next.
-  if (prev.memoizedState !== fiber.memoizedState) return {
+  if ((0, _ownStateChanged.ownStateChanged)(prev, fiber)) return {
     cause: "hooks"
   };
   return {

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

@@ -1626,6 +1626,16 @@ function disable() {
   devToolsNodeCache.clear(); // Clear detection cache
   (0, _RenderCauseDetector.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/commonjs/highlight-updates/utils/RenderCauseDetector.js

@@ -36,6 +36,11 @@ exports.detectRenderCause = detectRenderCause;
 exports.getRenderCauseStats = getRenderCauseStats;
 exports.removeRenderCauseState = removeRenderCauseState;
 exports.safeCloneForHistory = safeCloneForHistory;
+var _ownStateChanged = require("./ownStateChanged");
+// 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.
+
 // ============================================================================
 // TYPE DEFINITIONS
 // Based on React Native source: packages/react-native/Libraries/Renderer/
@@ -660,9 +665,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 ((0, _ownStateChanged.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/commonjs/highlight-updates/utils/ownStateChanged.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hookStateChanged = hookStateChanged;
+exports.ownStateChanged = ownStateChanged;
+/**
+ * "Did this component's own state actually change?" — one implementation.
+ *
+ * This package classifies render causes twice, on purpose. `RenderCauseDetector`
+ * serves the overlay and rides React DevTools' `traceUpdates`, which hands it
+ * fibers at an ambiguous moment — hence its WeakMap fallbacks and fiber-swap
+ * detection. `CommitProfiler` serves Bench's render capture from inside
+ * `onCommitFiberRoot`, where `fiber` is current and `fiber.alternate` is
+ * previous by definition, and where it runs on every composite fiber of every
+ * commit and so counts allocations. Those are genuinely different problems and
+ * the two classifiers should stay separate.
+ *
+ * This ONE question is not different between them, and it is the question they
+ * both got wrong:
+ *
+ *   `prev.memoizedState !== next.memoizedState`
+ *
+ * For a function component `memoizedState` is the head of the hook linked list,
+ * and React rebuilds that list on every update — `updateWorkInProgressHook`
+ * clones each node — so the head is a fresh object whether or not a single
+ * hook's value moved. Read as "state changed" it makes "state"/"hooks" the
+ * answer for every component that uses ANY hook (a lone `useEffect` is enough)
+ * and leaves "parent" reachable only by the vanishingly rare component that
+ * uses none.
+ *
+ * That is the one distinction in either tool a developer acts on: "parent"
+ * means memoize it or lift the state, "state" means it genuinely updated and
+ * should be left alone. Backwards, it sends you to optimise the thing that was
+ * already fine — and in Bench it also silently shrank `wastedRenders`, the
+ * number that says whether there is anything to fix at all.
+ *
+ * Both tools reached that wrong line independently, which is exactly why the
+ * answer lives here now rather than in two places that happen to agree.
+ */
+
+/** React work tag for a class component — its `memoizedState` IS the state. */
+const CLASS_COMPONENT = 1;
+
+/** Guardrail on the hook-list walk; deep hook lists are pathological. */
+const MAX_HOOKS_WALKED = 64;
+
+/** Does this look like React's hook linked list rather than class state? */
+function isHookList(head) {
+  return !!head && typeof head === "object" && ("next" in head || "queue" in head || "memoizedState" in head);
+}
+
+/**
+ * True when a STATE hook's value actually moved between two hook-list heads.
+ *
+ * `queue` is the marker: `useState` and `useReducer` — and everything built on
+ * them — own one; effects, memos, callbacks and refs do not. An effect's
+ * `memoizedState` is a brand-new object on every single render, which is the
+ * specific thing that broke the identity check.
+ *
+ * Note that a `useRef` mutation is deliberately NOT a state change here. It
+ * cannot cause a render, so a render attributed to one is a render blamed on
+ * something that did not do it.
+ *
+ * Conservative where it cannot tell: a class component, or a `memoizedState`
+ * that is not a recognisable hook list, falls back to the identity comparison.
+ * There the identity IS meaningful (or is the best signal available), so the
+ * old behaviour is the right behaviour.
+ *
+ * Takes the HEADS rather than the fibers because only one of the two callers
+ * has a previous fiber to hand — the overlay may be working from a WeakMap
+ * snapshot of the previous `memoizedState` instead. Use `ownStateChanged` when
+ * you do have both fibers.
+ */
+function hookStateChanged(prevHead, nextHead, options) {
+  if (prevHead === nextHead) return false;
+  if (options?.isClassComponent) return true;
+  if (!isHookList(nextHead)) return true;
+  let p = prevHead;
+  let n = nextHead;
+  for (let depth = 0; n != null && depth < MAX_HOOKS_WALKED; depth++) {
+    if (n.queue != null) {
+      // A hook the previous render did not have is a real change.
+      if (p == null) return true;
+      if (!Object.is(p.memoizedState, n.memoizedState)) return true;
+    }
+    n = n.next;
+    p = p != null ? p.next : null;
+  }
+  return false;
+}
+
+/**
+ * `hookStateChanged` for callers holding both fibers — the common case inside
+ * `onCommitFiberRoot`, where `fiber.alternate` is the previous fiber by
+ * definition.
+ */
+function ownStateChanged(prev, next) {
+  return hookStateChanged(prev?.memoizedState, next?.memoizedState, {
+    isClassComponent: next?.tag === CLASS_COMPONENT
+  });
+}