@buoy-gg/highlight-updates 7.0.28 → 7.0.29

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

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.detectedItemTestID = detectedItemTestID;
+exports.identifierSlug = identifierSlug;
+exports.patternChipTestID = patternChipTestID;
+exports.renderRowTestID = renderRowTestID;
+exports.settingTestID = settingTestID;
+/**
+ * Stable e2e handles for the Render Highlighter (highlight-updates).
+ *
+ * This tool's list is the hardest thing in Buoy to address, because the thing
+ * it lists is a NATIVE VIEW and the only key it has for one is the fiber's
+ * `nativeTag` — a per-session counter that changes on every launch, on every
+ * remount, and (on a dynamic screen) between two runs of the same test. A
+ * handle built from it would name a different component every time.
+ *
+ * So rows are addressed by their IDENTIFIER, in exactly the priority the list
+ * item itself uses to label them: testID → nativeID → component name →
+ * accessibility label → nativeTag. That is the same string the developer sees
+ * on the row, it is stable as long as the component is, and it is what a test
+ * can name up front. `nativeTag` remains the last resort for an anonymous host
+ * view, which no test should be naming anyway.
+ *
+ * Slug rules are mirrored in `example-dev-build/utils/renderBench.js` so the
+ * fixture and the tool agree about what a row is called; the suite's
+ * `fixture.js` spot-checks that they still do.
+ */
+
+/** Any identifier string → a testID-safe slug. */
+function identifierSlug(value) {
+  return String(value).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "unknown";
+}
+
+/**
+ * `buoy-highlight-row-<slug>` for one row of the render list.
+ *
+ * Sub-handles hang off it: `-name`, `-count`, `-type`, `-cause`, `-identifier`,
+ * `-time`. The count is the tool's whole claim, so it gets its own handle
+ * rather than living inside the row's merged label.
+ */
+function renderRowTestID(identifier) {
+  return `buoy-highlight-row-${identifierSlug(identifier)}`;
+}
+
+/**
+ * `buoy-highlight-detected-<type>-<slug>` for one chip in DETECTED ITEMS.
+ *
+ * The type is in the handle because the same string legitimately appears under
+ * two categories — a component called `Pressable` and a viewType called
+ * `Pressable` are different filters with the same name, and a suite that added
+ * the wrong one would still see "a pattern was added".
+ */
+function detectedItemTestID(type, value) {
+  return `buoy-highlight-detected-${identifierSlug(type)}-${identifierSlug(value)}`;
+}
+
+/** `buoy-highlight-<mode>-chip-<type>-<slug>` for an active filter pattern. */
+function patternChipTestID(mode, type, value) {
+  return `buoy-highlight-${mode}-chip-${identifierSlug(type)}-${identifierSlug(value)}`;
+}
+
+/** `buoy-highlight-setting-<key>` for a settings row's control. */
+function settingTestID(key) {
+  return `buoy-highlight-setting-${key}`;
+}

package/lib/commonjs/index.js

@@ -141,6 +141,12 @@ Object.defineProperty(exports, "detectRenderCause", {
     return _RenderCauseDetector.detectRenderCause;
   }
 });
+Object.defineProperty(exports, "detectedItemTestID", {
+  enumerable: true,
+  get: function () {
+    return _testIDs.detectedItemTestID;
+  }
+});
 Object.defineProperty(exports, "disableProfilerLogging", {
   enumerable: true,
   get: function () {
@@ -207,6 +213,12 @@ Object.defineProperty(exports, "highlightUpdatesSyncAdapter", {
     return _highlightUpdatesSyncAdapter.highlightUpdatesSyncAdapter;
   }
 });
+Object.defineProperty(exports, "identifierSlug", {
+  enumerable: true,
+  get: function () {
+    return _testIDs.identifierSlug;
+  }
+});
 Object.defineProperty(exports, "installProfilerInterceptor", {
   enumerable: true,
   get: function () {
@@ -238,12 +250,24 @@ Object.defineProperty(exports, "isLoggingEnabled", {
   }
 });
 exports.onRenderEvent = void 0;
+Object.defineProperty(exports, "patternChipTestID", {
+  enumerable: true,
+  get: function () {
+    return _testIDs.patternChipTestID;
+  }
+});
 Object.defineProperty(exports, "removeRenderCauseState", {
   enumerable: true,
   get: function () {
     return _RenderCauseDetector.removeRenderCauseState;
   }
 });
+Object.defineProperty(exports, "renderRowTestID", {
+  enumerable: true,
+  get: function () {
+    return _testIDs.renderRowTestID;
+  }
+});
 Object.defineProperty(exports, "safeCloneForHistory", {
   enumerable: true,
   get: function () {
@@ -262,6 +286,12 @@ Object.defineProperty(exports, "setComparisonCallback", {
     return _ProfilerInterceptor.setComparisonCallback;
   }
 });
+Object.defineProperty(exports, "settingTestID", {
+  enumerable: true,
+  get: function () {
+    return _testIDs.settingTestID;
+  }
+});
 Object.defineProperty(exports, "uninstallProfilerInterceptor", {
   enumerable: true,
   get: function () {
@@ -287,6 +317,7 @@ var _HighlightFilterView = require("./highlight-updates/components/HighlightFilt
 var _RenderCauseBadge = require("./highlight-updates/components/RenderCauseBadge");
 var _RenderHistoryViewer = require("./highlight-updates/components/RenderHistoryViewer");
 var _renderExportFormatter = require("./highlight-updates/utils/renderExportFormatter");
+var _testIDs = require("./highlight-updates/utils/testIDs");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * @buoy-gg/highlight-updates
@@ -392,4 +423,7 @@ const onRenderEvent = callback => {
 // footer) instead of inside a JsModal — for hosts that show tools in a panel.
 
 // Simple JSON export for renders
+
+// e2e handle builders — exported so the example app's fixture can derive the
+// same row handles the tool renders instead of hardcoding a second copy.
 exports.onRenderEvent = onRenderEvent;

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

@@ -12,6 +12,7 @@ import React, { useState, useCallback } from "react";
 import { View, Text, TouchableOpacity, TextInput, StyleSheet, ScrollView, Modal, Pressable, Switch } from "react-native";
 import { Eye, Filter, Plus, X, Box, Settings, Hash, SectionHeader, night } from "@buoy-gg/shared-ui";
 import { IdentifierBadge, IDENTIFIER_CONFIG } from "./IdentifierBadge";
+import { detectedItemTestID, patternChipTestID, settingTestID } from "../utils/testIDs";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Use shared identifier config (FilterType is a subset of IdentifierType)
 const getFilterConfig = type => IDENTIFIER_CONFIG[type];
@@ -21,11 +22,13 @@ const FILTER_TYPES = ["any", "viewType", "testID", "nativeID", "component", "acc
 
 // Type picker component
 function TypePicker({
+  mode,
   onSelect,
   onCancel
 }) {
   return /*#__PURE__*/_jsxs(View, {
     nativeID: "__rn_buoy__type-picker",
+    testID: `buoy-highlight-${mode}-types`,
     style: styles.typePicker,
     children: [/*#__PURE__*/_jsx(View, {
       style: styles.typePickerRow,
@@ -33,6 +36,9 @@ function TypePicker({
         const config = getFilterConfig(type);
         const IconComponent = config.icon;
         return /*#__PURE__*/_jsxs(TouchableOpacity, {
+          testID: `buoy-highlight-${mode}-type-${type.toLowerCase()}`,
+          accessibilityRole: "button",
+          accessibilityLabel: config.label,
           style: [styles.typeOption, {
             backgroundColor: config.color + "15",
             borderColor: config.color + "40"
@@ -50,6 +56,9 @@ function TypePicker({
         }, type);
       })
     }), /*#__PURE__*/_jsx(TouchableOpacity, {
+      testID: `buoy-highlight-${mode}-types-cancel`,
+      accessibilityRole: "button",
+      accessibilityLabel: "Cancel",
       onPress: onCancel,
       style: styles.typePickerCancel,
       children: /*#__PURE__*/_jsx(X, {
@@ -62,6 +71,7 @@ function TypePicker({
 
 // Pattern input with badge prefix
 function PatternInput({
+  mode,
   type,
   onSubmit,
   onCancel
@@ -75,6 +85,7 @@ function PatternInput({
   };
   return /*#__PURE__*/_jsxs(View, {
     nativeID: "__rn_buoy__pattern-input",
+    testID: `buoy-highlight-${mode}-input-row`,
     style: styles.patternInputContainer,
     children: [/*#__PURE__*/_jsx(IdentifierBadge, {
       type: type,
@@ -82,6 +93,7 @@ function PatternInput({
       badgeOnly: true,
       compact: true
     }), /*#__PURE__*/_jsx(TextInput, {
+      testID: `buoy-highlight-${mode}-input`,
       value: value,
       onChangeText: setValue,
       onSubmitEditing: handleSubmit,
@@ -93,6 +105,9 @@ function PatternInput({
       autoCorrect: false,
       autoCapitalize: "none"
     }), value.trim() && /*#__PURE__*/_jsx(TouchableOpacity, {
+      testID: `buoy-highlight-${mode}-submit`,
+      accessibilityRole: "button",
+      accessibilityLabel: "Add pattern",
       onPress: handleSubmit,
       style: [styles.addPatternButton, {
         backgroundColor: config.color + "20"
@@ -104,6 +119,9 @@ function PatternInput({
         children: "Add"
       })
     }), /*#__PURE__*/_jsx(TouchableOpacity, {
+      testID: `buoy-highlight-${mode}-input-cancel`,
+      accessibilityRole: "button",
+      accessibilityLabel: "Cancel",
       onPress: onCancel,
       style: styles.cancelButton,
       children: /*#__PURE__*/_jsx(X, {
@@ -116,11 +134,15 @@ function PatternInput({
 
 // Pattern chip (removable badge) - tap to remove
 function PatternChip({
+  mode,
   pattern,
   onRemove
 }) {
   const config = getFilterConfig(pattern.type);
   return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    testID: patternChipTestID(mode, pattern.type, pattern.value),
+    accessibilityRole: "button",
+    accessibilityLabel: `${config.label} ${pattern.value}, tap to remove`,
     style: [styles.patternChip, {
       borderColor: config.color + "40"
     }],
@@ -167,7 +189,11 @@ function DetectedCategoryBadge({
 }) {
   // "all" has its own config
   const config = filterType === "all" ? ALL_CATEGORY_CONFIG : getFilterConfig(filterType);
+  const handle = `buoy-highlight-detected-cat-${String(filterType).toLowerCase()}`;
   return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    testID: handle,
+    accessibilityRole: "button",
+    accessibilityLabel: `${config.label}, ${count}`,
     style: [styles.categoryBadge, {
       backgroundColor: config.color + "15",
       borderColor: isSelected ? config.color : config.color + "40",
@@ -187,6 +213,7 @@ function DetectedCategoryBadge({
         backgroundColor: config.color + "25"
       }],
       children: /*#__PURE__*/_jsx(Text, {
+        testID: `${handle}-count`,
         style: [styles.categoryBadgeCount, {
           color: config.color
         }],
@@ -374,6 +401,7 @@ export function HighlightFilterView({
     style: styles.container,
     children: /*#__PURE__*/_jsx(ScrollView, {
       nativeID: "__rn_buoy__filter-view",
+      testID: "buoy-highlight-filter-scroll",
       style: styles.scrollView,
       contentContainerStyle: styles.scrollContent,
       showsVerticalScrollIndicator: false,
@@ -388,6 +416,7 @@ export function HighlightFilterView({
             }), /*#__PURE__*/_jsx(SectionHeader.Title, {
               children: "INCLUDE ONLY"
             }), filters.includePatterns.length > 0 && /*#__PURE__*/_jsx(SectionHeader.Badge, {
+              testID: "buoy-highlight-include-count",
               count: filters.includePatterns.length,
               color: night.color.accent
             })]
@@ -397,22 +426,28 @@ export function HighlightFilterView({
           }), filters.includePatterns.length > 0 && /*#__PURE__*/_jsx(View, {
             style: styles.patternChips,
             children: filters.includePatterns.map((pattern, index) => /*#__PURE__*/_jsx(PatternChip, {
+              mode: "include",
               pattern: pattern,
               onRemove: () => handleRemoveIncludePattern(index)
             }, `${pattern.type}-${pattern.value}-${index}`))
           }), /*#__PURE__*/_jsx(View, {
             style: styles.addPatternRow,
             children: showIncludeTypePicker ? /*#__PURE__*/_jsx(TypePicker, {
+              mode: "include",
               onSelect: type => {
                 setShowIncludeTypePicker(false);
                 setIncludeInputType(type);
               },
               onCancel: () => setShowIncludeTypePicker(false)
             }) : includeInputType ? /*#__PURE__*/_jsx(PatternInput, {
+              mode: "include",
               type: includeInputType,
               onSubmit: value => handleAddIncludePattern(includeInputType, value),
               onCancel: () => setIncludeInputType(null)
             }) : /*#__PURE__*/_jsxs(TouchableOpacity, {
+              testID: "buoy-highlight-include-add",
+              accessibilityRole: "button",
+              accessibilityLabel: "Add include pattern",
               style: [styles.addButton, {
                 borderColor: night.color.accentBorderStrong
               }],
@@ -438,6 +473,7 @@ export function HighlightFilterView({
             }), /*#__PURE__*/_jsx(SectionHeader.Title, {
               children: "EXCLUDE"
             }), filters.excludePatterns.length > 0 && /*#__PURE__*/_jsx(SectionHeader.Badge, {
+              testID: "buoy-highlight-exclude-count",
               count: filters.excludePatterns.length,
               color: night.color.accent
             })]
@@ -447,22 +483,28 @@ export function HighlightFilterView({
           }), filters.excludePatterns.length > 0 && /*#__PURE__*/_jsx(View, {
             style: styles.patternChips,
             children: filters.excludePatterns.map((pattern, index) => /*#__PURE__*/_jsx(PatternChip, {
+              mode: "exclude",
               pattern: pattern,
               onRemove: () => handleRemoveExcludePattern(index)
             }, `${pattern.type}-${pattern.value}-${index}`))
           }), /*#__PURE__*/_jsx(View, {
             style: styles.addPatternRow,
             children: showExcludeTypePicker ? /*#__PURE__*/_jsx(TypePicker, {
+              mode: "exclude",
               onSelect: type => {
                 setShowExcludeTypePicker(false);
                 setExcludeInputType(type);
               },
               onCancel: () => setShowExcludeTypePicker(false)
             }) : excludeInputType ? /*#__PURE__*/_jsx(PatternInput, {
+              mode: "exclude",
               type: excludeInputType,
               onSubmit: value => handleAddExcludePattern(excludeInputType, value),
               onCancel: () => setExcludeInputType(null)
             }) : /*#__PURE__*/_jsxs(TouchableOpacity, {
+              testID: "buoy-highlight-exclude-add",
+              accessibilityRole: "button",
+              accessibilityLabel: "Add exclude pattern",
               style: [styles.addButton, {
                 borderColor: night.color.accentBorderStrong
               }],
@@ -496,6 +538,7 @@ export function HighlightFilterView({
             children: "Show only components with render count in a specific range."
           }), /*#__PURE__*/_jsxs(View, {
             nativeID: "__rn_buoy__render-count-range",
+            testID: "buoy-highlight-range",
             style: styles.renderCountRangeContainer,
             children: [/*#__PURE__*/_jsxs(View, {
               style: styles.renderCountInputRow,
@@ -518,6 +561,7 @@ export function HighlightFilterView({
                       });
                     }
                   },
+                  testID: "buoy-highlight-range-min",
                   placeholder: "0",
                   placeholderTextColor: night.color.placeholder,
                   style: styles.renderCountInput,
@@ -546,6 +590,7 @@ export function HighlightFilterView({
                       });
                     }
                   },
+                  testID: "buoy-highlight-range-max",
                   placeholder: "\u221E",
                   placeholderTextColor: night.color.placeholder,
                   style: styles.renderCountInput,
@@ -554,6 +599,9 @@ export function HighlightFilterView({
                 })]
               })]
             }), (filters.minRenderCount !== undefined || filters.maxRenderCount !== undefined) && /*#__PURE__*/_jsxs(TouchableOpacity, {
+              testID: "buoy-highlight-range-clear",
+              accessibilityRole: "button",
+              accessibilityLabel: "Clear range",
               style: styles.clearRangeButton,
               onPress: () => onFilterChange({
                 minRenderCount: undefined,
@@ -619,8 +667,10 @@ export function HighlightFilterView({
             })]
           }), /*#__PURE__*/_jsx(View, {
             nativeID: "__rn_buoy__detected-items",
+            testID: "buoy-highlight-detected",
             style: styles.detectedItemsContainer,
             children: selectedItems.length > 0 ? /*#__PURE__*/_jsx(ScrollView, {
+              testID: "buoy-highlight-detected-scroll",
               style: styles.detectedItemsScroll,
               contentContainerStyle: styles.detectedItems,
               nestedScrollEnabled: true,
@@ -628,6 +678,9 @@ export function HighlightFilterView({
               children: selectedItems.map(item => {
                 const itemConfig = getFilterConfig(item.type);
                 return /*#__PURE__*/_jsx(TouchableOpacity, {
+                  testID: detectedItemTestID(item.type, item.value),
+                  accessibilityRole: "button",
+                  accessibilityLabel: `${itemConfig.label} ${item.value}`,
                   style: [styles.detectedItem, {
                     borderColor: itemConfig.color + "40"
                   }],
@@ -645,6 +698,7 @@ export function HighlightFilterView({
                 }, `${item.type}-${item.value}`);
               })
             }) : /*#__PURE__*/_jsx(Text, {
+              testID: "buoy-highlight-detected-empty",
               style: styles.emptyText,
               children: "No items detected yet. Start tracking to see components here."
             })
@@ -655,9 +709,13 @@ export function HighlightFilterView({
           animationType: "fade",
           onRequestClose: () => setActionPopupItem(null),
           children: /*#__PURE__*/_jsx(Pressable, {
+            accessible: false,
+            testID: "buoy-highlight-detected-popup-backdrop",
             style: styles.modalOverlay,
             onPress: () => setActionPopupItem(null),
             children: /*#__PURE__*/_jsx(View, {
+              accessible: false,
+              testID: "buoy-highlight-detected-popup",
               style: styles.actionPopup,
               children: actionPopupItem && /*#__PURE__*/_jsxs(_Fragment, {
                 children: [/*#__PURE__*/_jsx(View, {
@@ -671,6 +729,9 @@ export function HighlightFilterView({
                 }), /*#__PURE__*/_jsxs(View, {
                   style: styles.actionPopupButtons,
                   children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+                    testID: "buoy-highlight-detected-popup-include",
+                    accessibilityRole: "button",
+                    accessibilityLabel: "Include only",
                     style: [styles.actionPopupButton, styles.actionPopupInclude],
                     onPress: handlePopupInclude,
                     children: [/*#__PURE__*/_jsx(Eye, {
@@ -683,6 +744,9 @@ export function HighlightFilterView({
                       children: "Include Only"
                     })]
                   }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+                    testID: "buoy-highlight-detected-popup-exclude",
+                    accessibilityRole: "button",
+                    accessibilityLabel: "Exclude",
                     style: [styles.actionPopupButton, styles.actionPopupExclude],
                     onPress: handlePopupExclude,
                     children: [/*#__PURE__*/_jsx(Filter, {
@@ -696,6 +760,9 @@ export function HighlightFilterView({
                     })]
                   })]
                 }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                  testID: "buoy-highlight-detected-popup-cancel",
+                  accessibilityRole: "button",
+                  accessibilityLabel: "Cancel",
                   style: styles.actionPopupCancel,
                   onPress: () => setActionPopupItem(null),
                   children: /*#__PURE__*/_jsx(Text, {
@@ -757,6 +824,7 @@ export function HighlightFilterView({
                   style: styles.settingLabel,
                   children: "Show Render Count"
                 }), /*#__PURE__*/_jsx(Switch, {
+                  testID: settingTestID("showRenderCount"),
                   value: settings.showRenderCount,
                   onValueChange: value => {
                     onSettingsChange({
@@ -787,6 +855,7 @@ export function HighlightFilterView({
                   style: [styles.settingLabel, !settings.showRenderCount && styles.settingLabelDisabled],
                   children: "Track Render Causes"
                 }), /*#__PURE__*/_jsx(Switch, {
+                  testID: settingTestID("trackRenderCauses"),
                   value: settings.trackRenderCauses,
                   onValueChange: value => onSettingsChange({
                     trackRenderCauses: value
@@ -813,6 +882,7 @@ export function HighlightFilterView({
                   style: [styles.settingLabel, !settings.trackRenderCauses && styles.settingLabelDisabled],
                   children: "Enable Render History"
                 }), /*#__PURE__*/_jsx(Switch, {
+                  testID: settingTestID("enableRenderHistory"),
                   value: settings.enableRenderHistory,
                   onValueChange: value => onSettingsChange({
                     enableRenderHistory: value
@@ -841,6 +911,7 @@ export function HighlightFilterView({
                 }), /*#__PURE__*/_jsx(View, {
                   style: styles.settingValue,
                   children: /*#__PURE__*/_jsx(Text, {
+                    testID: "buoy-highlight-setting-debugLogLevel-value",
                     style: [styles.settingValueText, settings.debugLogLevel !== "off" && {
                       color: night.color.warning
                     }],
@@ -860,6 +931,9 @@ export function HighlightFilterView({
                   onPress: () => onSettingsChange({
                     debugLogLevel: preset.value
                   }),
+                  testID: `buoy-highlight-preset-log-${preset.value}`,
+                  accessibilityRole: "button",
+                  accessibilityLabel: `Debug log level ${preset.label}`,
                   children: /*#__PURE__*/_jsx(Text, {
                     style: [styles.batchSizePresetText, settings.debugLogLevel === preset.value && styles.batchSizePresetTextActive, preset.value !== "off" && settings.debugLogLevel === preset.value && {
                       color: night.color.warning
@@ -881,6 +955,7 @@ export function HighlightFilterView({
                 }), /*#__PURE__*/_jsx(View, {
                   style: styles.settingValue,
                   children: /*#__PURE__*/_jsx(Text, {
+                    testID: "buoy-highlight-setting-batchSize-value",
                     style: styles.settingValueText,
                     children: settings.batchSize
                   })
@@ -895,6 +970,9 @@ export function HighlightFilterView({
                   onPress: () => onSettingsChange({
                     batchSize: preset.value
                   }),
+                  testID: `buoy-highlight-preset-batch-${preset.value}`,
+                  accessibilityRole: "button",
+                  accessibilityLabel: `Batch size ${preset.label}`,
                   children: /*#__PURE__*/_jsx(Text, {
                     style: [styles.batchSizePresetText, settings.batchSize === preset.value && styles.batchSizePresetTextActive],
                     children: preset.label
@@ -909,6 +987,7 @@ export function HighlightFilterView({
                   style: styles.settingLabel,
                   children: "Show host views"
                 }), /*#__PURE__*/_jsx(Switch, {
+                  testID: settingTestID("showHostViews"),
                   value: !!settings.showHostViews,
                   onValueChange: value => onSettingsChange({
                     showHostViews: value
@@ -931,6 +1010,7 @@ export function HighlightFilterView({
                   style: styles.settingLabel,
                   children: "Highlight Dev Tools"
                 }), /*#__PURE__*/_jsx(Switch, {
+                  testID: settingTestID("excludeDevTools"),
                   value: !settings.excludeDevTools,
                   onValueChange: value => onSettingsChange({
                     excludeDevTools: !value

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

@@ -32,11 +32,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // Disabled banner - memoized since props rarely change
 const DisabledBanner = /*#__PURE__*/React.memo(function DisabledBanner() {
   return /*#__PURE__*/_jsxs(View, {
+    testID: "buoy-highlight-disabled-banner",
     style: styles.disabledBanner,
     children: [/*#__PURE__*/_jsx(Power, {
       size: 14,
       color: night.color.warning
     }), /*#__PURE__*/_jsx(Text, {
+      testID: "buoy-highlight-disabled-text",
       style: styles.disabledText,
       children: "Render tracking is disabled"
     })]
@@ -505,6 +507,7 @@ export function HighlightUpdatesModal({
   }) : null;
   const body = /*#__PURE__*/_jsx(View, {
     nativeID: "__rn_buoy__highlight-modal",
+    testID: "buoy-highlight-body",
     style: styles.container,
     children: showCopySettingsView ? /*#__PURE__*/_jsx(RendersCopySettingsView, {
       renders: copyRendersSnapshot
@@ -600,7 +603,8 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     borderBottomWidth: 1,
     borderBottomColor: night.color.border,
-    backgroundColor: night.color.surface
+    // Clear, like Bench — the host's hoisted sky shows through the header.
+    backgroundColor: "transparent"
   },
   container: {
     flex: 1,

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

@@ -68,13 +68,15 @@ export function IdentifierBadge({
   badgeOnly = false,
   valueOnly = false,
   shortLabel = false,
-  showIcon = false
+  showIcon = false,
+  testID
 }) {
   const config = IDENTIFIER_CONFIG[type];
   const IconComponent = config.icon;
   const label = shortLabel ? config.shortLabel : config.label;
   if (valueOnly) {
     return /*#__PURE__*/_jsx(Text, {
+      testID: testID ? `${testID}-value` : undefined,
       style: [styles.valueOnly, compact && styles.valueOnlyCompact, {
         color: config.color
       }],
@@ -84,6 +86,7 @@ export function IdentifierBadge({
   }
   if (badgeOnly) {
     return /*#__PURE__*/_jsxs(View, {
+      testID: testID,
       style: [styles.badgeOnly, compact && styles.badgeOnlyCompact, {
         backgroundColor: config.color + "20",
         borderColor: config.color + "40"
@@ -100,6 +103,8 @@ export function IdentifierBadge({
     });
   }
   return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    accessibilityLabel: `${config.label} ${value}`,
     style: [styles.container, compact && styles.containerCompact],
     children: [/*#__PURE__*/_jsxs(View, {
       style: [styles.badge, compact && styles.badgeCompact, {
@@ -115,6 +120,7 @@ export function IdentifierBadge({
         children: label
       })]
     }), /*#__PURE__*/_jsx(Text, {
+      testID: testID ? `${testID}-value` : undefined,
       style: [styles.value, compact && styles.valueCompact],
       numberOfLines: 1,
       children: value

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

@@ -87,11 +87,13 @@ function IsolatedRenderListInner({
   const renderFooter = useCallback(() => {
     if (lockedComponentCount <= 0) return null;
     return /*#__PURE__*/_jsxs(View, {
+      testID: "buoy-highlight-locked",
       style: styles.lockedBanner,
       children: [/*#__PURE__*/_jsx(Lock, {
         size: 14,
         color: night.color.warning
       }), /*#__PURE__*/_jsxs(Text, {
+        testID: "buoy-highlight-locked-text",
         style: styles.lockedBannerText,
         children: [lockedComponentCount, " more ", lockedComponentCount === 1 ? 'component' : 'components', " locked"]
       }), /*#__PURE__*/_jsx(Text, {
@@ -104,20 +106,24 @@ function IsolatedRenderListInner({
   // Show empty state when no renders
   if (renders.length === 0) {
     return /*#__PURE__*/_jsxs(View, {
+      testID: "buoy-highlight-empty",
       style: styles.emptyState,
       children: [/*#__PURE__*/_jsx(Activity, {
         size: 32,
         color: night.color.textTertiary
       }), /*#__PURE__*/_jsx(Text, {
+        testID: "buoy-highlight-empty-title",
         style: styles.emptyTitle,
         children: "No renders tracked"
       }), /*#__PURE__*/_jsx(Text, {
+        testID: "buoy-highlight-empty-text",
         style: styles.emptyText,
         children: isTracking ? "Component renders will appear here" : "Enable tracking to start capturing"
       })]
     });
   }
   return /*#__PURE__*/_jsx(FlatList, {
+    testID: "buoy-highlight-list",
     ref: flatListRef,
     data: visibleRenders,
     renderItem: renderItem,