@buoy-gg/highlight-updates 7.0.28 → 7.0.29

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

@@ -27,11 +27,13 @@ const SearchSectionInner = /*#__PURE__*/memo(function SearchSection({
   if (!isActive) return null;
   return /*#__PURE__*/_jsxs(View, {
     nativeID: "__rn_buoy__search-container",
+    testID: "buoy-highlight-search-container",
     style: styles.headerSearchContainer,
     children: [/*#__PURE__*/_jsx(Search, {
       size: 14,
       color: night.color.textSecondary
     }), /*#__PURE__*/_jsx(TextInput, {
+      testID: "buoy-highlight-search-field",
       style: styles.headerSearchInput,
       placeholder: "Search testID, nativeID, component...",
       placeholderTextColor: night.color.placeholder,
@@ -45,6 +47,9 @@ const SearchSectionInner = /*#__PURE__*/memo(function SearchSection({
       returnKeyType: "search",
       autoFocus: true
     }), searchText.length > 0 ? /*#__PURE__*/_jsx(TouchableOpacity, {
+      testID: "buoy-highlight-search-clear",
+      accessibilityRole: "button",
+      accessibilityLabel: "Clear search",
       onPress: () => {
         onSearchChange("");
         onSearchClose();
@@ -77,6 +82,9 @@ const HeaderActionsInner = /*#__PURE__*/memo(function HeaderActions({
 }) {
   return /*#__PURE__*/_jsxs(ModalHeader.Actions, {
     children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+      testID: "buoy-highlight-search",
+      accessibilityRole: "button",
+      accessibilityLabel: "Search renders",
       onPress: onSearchToggle,
       style: styles.headerActionButton,
       children: /*#__PURE__*/_jsx(Search, {
@@ -84,6 +92,9 @@ const HeaderActionsInner = /*#__PURE__*/memo(function HeaderActions({
         color: night.color.textSecondary
       })
     }), /*#__PURE__*/_jsx(TouchableOpacity, {
+      testID: "buoy-highlight-filters",
+      accessibilityRole: "button",
+      accessibilityLabel: activeFilterCount > 0 ? `Filters, ${activeFilterCount} active` : "Filters",
       onPress: onFilterToggle,
       style: [styles.headerActionButton, activeFilterCount > 0 && styles.activeFilterButton],
       children: /*#__PURE__*/_jsx(Filter, {
@@ -91,6 +102,8 @@ const HeaderActionsInner = /*#__PURE__*/memo(function HeaderActions({
         color: activeFilterCount > 0 ? night.color.accent : night.color.textTertiary
       })
     }), /*#__PURE__*/_jsx(TouchableOpacity, {
+      testID: "buoy-highlight-copy",
+      accessibilityRole: "button",
       onPress: onOpenCopySettings,
       style: [styles.headerActionButton, !hasRenders && styles.headerActionButtonDisabled],
       disabled: !hasRenders,
@@ -100,6 +113,9 @@ const HeaderActionsInner = /*#__PURE__*/memo(function HeaderActions({
         color: hasRenders ? night.color.textSecondary : night.color.textTertiary
       })
     }), /*#__PURE__*/_jsx(TouchableOpacity, {
+      testID: "buoy-highlight-freeze",
+      accessibilityRole: "button",
+      accessibilityLabel: isFrozen ? "Unfreeze frame" : "Freeze frame",
       onPress: onToggleFreeze,
       style: [styles.headerActionButton, isFrozen && styles.freezeButton, !isTracking && styles.headerActionButtonDisabled],
       disabled: !isTracking,
@@ -108,10 +124,14 @@ const HeaderActionsInner = /*#__PURE__*/memo(function HeaderActions({
         color: !isTracking ? night.color.textTertiary : isFrozen ? night.color.accent : night.color.textTertiary
       })
     }), /*#__PURE__*/_jsx(PowerToggleButton, {
+      testID: "buoy-highlight-power",
       isEnabled: isTracking,
       onToggle: onToggleTracking,
       accessibilityLabel: "Toggle render tracking"
     }), /*#__PURE__*/_jsx(TouchableOpacity, {
+      testID: "buoy-highlight-clear",
+      accessibilityRole: "button",
+      accessibilityLabel: "Clear tracked renders",
       onPress: onClear,
       style: [styles.headerActionButton, !hasRenders && styles.headerActionButtonDisabled],
       disabled: !hasRenders,
@@ -199,7 +219,8 @@ export const FilterViewHeader = /*#__PURE__*/memo(function FilterViewHeader({
       children: /*#__PURE__*/_jsx(TabSelector, {
         tabs: tabs,
         activeTab: activeTab,
-        onTabChange: tab => onTabChange(tab)
+        onTabChange: tab => onTabChange(tab),
+        testIDPrefix: "buoy-highlight-filter-tab"
       })
     }), /*#__PURE__*/_jsx(ModalHeader.Actions, {})]
   });
@@ -232,7 +253,8 @@ export const DetailViewHeader = /*#__PURE__*/memo(function DetailViewHeader({
       children: /*#__PURE__*/_jsx(TabSelector, {
         tabs: tabs,
         activeTab: activeTab,
-        onTabChange: tab => onTabChange(tab)
+        onTabChange: tab => onTabChange(tab),
+        testIDPrefix: "buoy-highlight-detail-tab"
       })
     }), /*#__PURE__*/_jsx(ModalHeader.Actions, {})]
   });
@@ -249,7 +271,8 @@ export const CopySettingsViewHeader = /*#__PURE__*/memo(function CopySettingsVie
     children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
       onBack: onBack
     }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-      title: "Copy Settings"
+      title: "Copy Settings",
+      testID: "buoy-highlight-copy-title"
     })]
   });
 });

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

@@ -91,7 +91,8 @@ export function RenderCauseBadge({
   cause,
   compact = false,
   showKeys = false,
-  showTwoLevel = false
+  showTwoLevel = false,
+  testID
 }) {
   const config = CAUSE_CONFIG[cause.type];
   const componentConfig = cause.componentCause ? COMPONENT_CAUSE_CONFIG[cause.componentCause] : null;
@@ -100,6 +101,7 @@ export function RenderCauseBadge({
   const showComponentCause = showTwoLevel && componentConfig && cause.componentCause !== cause.type;
   return /*#__PURE__*/_jsxs(View, {
     nativeID: "__rn_buoy__cause-badge",
+    testID: testID,
     style: [styles.container, compact && styles.containerCompact],
     children: [showComponentCause && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(View, {
@@ -107,6 +109,7 @@ export function RenderCauseBadge({
           backgroundColor: componentConfig.color + "15"
         }],
         children: /*#__PURE__*/_jsx(Text, {
+          testID: testID ? `${testID}-component` : undefined,
           style: [styles.badgeText, compact && styles.badgeTextCompact, styles.componentBadgeText, {
             color: componentConfig.color
           }],
@@ -121,16 +124,19 @@ export function RenderCauseBadge({
         backgroundColor: config.color + "20"
       }],
       children: /*#__PURE__*/_jsx(Text, {
+        testID: testID ? `${testID}-native` : undefined,
         style: [styles.badgeText, compact && styles.badgeTextCompact, {
           color: config.color
         }],
         children: config.label
       })
     }), showKeys && cause.changedKeys && cause.changedKeys.length > 0 && /*#__PURE__*/_jsx(Text, {
+      testID: testID ? `${testID}-keys` : undefined,
       style: [styles.keysText, compact && styles.keysTextCompact],
       numberOfLines: 1,
       children: cause.changedKeys.join(", ")
     }), showKeys && cause.hookIndices && cause.hookIndices.length > 0 && /*#__PURE__*/_jsxs(Text, {
+      testID: testID ? `${testID}-hooks` : undefined,
       style: [styles.keysText, compact && styles.keysTextCompact],
       numberOfLines: 1,
       children: ["Hook ", cause.hookIndices.join(", ")]

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

@@ -1622,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();