@buoy-gg/highlight-updates 7.0.27 → 7.0.29

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

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _IdentifierBadge = require("./IdentifierBadge");
+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); }
 /**
@@ -27,11 +28,13 @@ const FILTER_TYPES = ["any", "viewType", "testID", "nativeID", "component", "acc
 
 // Type picker component
 function TypePicker({
+  mode,
   onSelect,
   onCancel
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     nativeID: "__rn_buoy__type-picker",
+    testID: `buoy-highlight-${mode}-types`,
     style: styles.typePicker,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.typePickerRow,
@@ -39,6 +42,9 @@ function TypePicker({
         const config = getFilterConfig(type);
         const IconComponent = config.icon;
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+          testID: `buoy-highlight-${mode}-type-${type.toLowerCase()}`,
+          accessibilityRole: "button",
+          accessibilityLabel: config.label,
           style: [styles.typeOption, {
             backgroundColor: config.color + "15",
             borderColor: config.color + "40"
@@ -56,6 +62,9 @@ function TypePicker({
         }, type);
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      testID: `buoy-highlight-${mode}-types-cancel`,
+      accessibilityRole: "button",
+      accessibilityLabel: "Cancel",
       onPress: onCancel,
       style: styles.typePickerCancel,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
@@ -68,6 +77,7 @@ function TypePicker({
 
 // Pattern input with badge prefix
 function PatternInput({
+  mode,
   type,
   onSubmit,
   onCancel
@@ -81,6 +91,7 @@ function PatternInput({
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     nativeID: "__rn_buoy__pattern-input",
+    testID: `buoy-highlight-${mode}-input-row`,
     style: styles.patternInputContainer,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge, {
       type: type,
@@ -88,6 +99,7 @@ function PatternInput({
       badgeOnly: true,
       compact: true
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+      testID: `buoy-highlight-${mode}-input`,
       value: value,
       onChangeText: setValue,
       onSubmitEditing: handleSubmit,
@@ -99,6 +111,9 @@ function PatternInput({
       autoCorrect: false,
       autoCapitalize: "none"
     }), value.trim() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      testID: `buoy-highlight-${mode}-submit`,
+      accessibilityRole: "button",
+      accessibilityLabel: "Add pattern",
       onPress: handleSubmit,
       style: [styles.addPatternButton, {
         backgroundColor: config.color + "20"
@@ -110,6 +125,9 @@ function PatternInput({
         children: "Add"
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      testID: `buoy-highlight-${mode}-input-cancel`,
+      accessibilityRole: "button",
+      accessibilityLabel: "Cancel",
       onPress: onCancel,
       style: styles.cancelButton,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
@@ -122,11 +140,15 @@ function PatternInput({
 
 // Pattern chip (removable badge) - tap to remove
 function PatternChip({
+  mode,
   pattern,
   onRemove
 }) {
   const config = getFilterConfig(pattern.type);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    testID: (0, _testIDs.patternChipTestID)(mode, pattern.type, pattern.value),
+    accessibilityRole: "button",
+    accessibilityLabel: `${config.label} ${pattern.value}, tap to remove`,
     style: [styles.patternChip, {
       borderColor: config.color + "40"
     }],
@@ -173,7 +195,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__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    testID: handle,
+    accessibilityRole: "button",
+    accessibilityLabel: `${config.label}, ${count}`,
     style: [styles.categoryBadge, {
       backgroundColor: config.color + "15",
       borderColor: isSelected ? config.color : config.color + "40",
@@ -193,6 +219,7 @@ function DetectedCategoryBadge({
         backgroundColor: config.color + "25"
       }],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        testID: `${handle}-count`,
         style: [styles.categoryBadgeCount, {
           color: config.color
         }],
@@ -380,6 +407,7 @@ function HighlightFilterView({
     style: styles.container,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
       nativeID: "__rn_buoy__filter-view",
+      testID: "buoy-highlight-filter-scroll",
       style: styles.scrollView,
       contentContainerStyle: styles.scrollContent,
       showsVerticalScrollIndicator: false,
@@ -394,6 +422,7 @@ function HighlightFilterView({
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
               children: "INCLUDE ONLY"
             }), filters.includePatterns.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge, {
+              testID: "buoy-highlight-include-count",
               count: filters.includePatterns.length,
               color: _sharedUi.night.color.accent
             })]
@@ -403,22 +432,28 @@ function HighlightFilterView({
           }), filters.includePatterns.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: styles.patternChips,
             children: filters.includePatterns.map((pattern, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(PatternChip, {
+              mode: "include",
               pattern: pattern,
               onRemove: () => handleRemoveIncludePattern(index)
             }, `${pattern.type}-${pattern.value}-${index}`))
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: styles.addPatternRow,
             children: showIncludeTypePicker ? /*#__PURE__*/(0, _jsxRuntime.jsx)(TypePicker, {
+              mode: "include",
               onSelect: type => {
                 setShowIncludeTypePicker(false);
                 setIncludeInputType(type);
               },
               onCancel: () => setShowIncludeTypePicker(false)
             }) : includeInputType ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PatternInput, {
+              mode: "include",
               type: includeInputType,
               onSubmit: value => handleAddIncludePattern(includeInputType, value),
               onCancel: () => setIncludeInputType(null)
             }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+              testID: "buoy-highlight-include-add",
+              accessibilityRole: "button",
+              accessibilityLabel: "Add include pattern",
               style: [styles.addButton, {
                 borderColor: _sharedUi.night.color.accentBorderStrong
               }],
@@ -444,6 +479,7 @@ function HighlightFilterView({
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
               children: "EXCLUDE"
             }), filters.excludePatterns.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge, {
+              testID: "buoy-highlight-exclude-count",
               count: filters.excludePatterns.length,
               color: _sharedUi.night.color.accent
             })]
@@ -453,22 +489,28 @@ function HighlightFilterView({
           }), filters.excludePatterns.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: styles.patternChips,
             children: filters.excludePatterns.map((pattern, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(PatternChip, {
+              mode: "exclude",
               pattern: pattern,
               onRemove: () => handleRemoveExcludePattern(index)
             }, `${pattern.type}-${pattern.value}-${index}`))
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: styles.addPatternRow,
             children: showExcludeTypePicker ? /*#__PURE__*/(0, _jsxRuntime.jsx)(TypePicker, {
+              mode: "exclude",
               onSelect: type => {
                 setShowExcludeTypePicker(false);
                 setExcludeInputType(type);
               },
               onCancel: () => setShowExcludeTypePicker(false)
             }) : excludeInputType ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PatternInput, {
+              mode: "exclude",
               type: excludeInputType,
               onSubmit: value => handleAddExcludePattern(excludeInputType, value),
               onCancel: () => setExcludeInputType(null)
             }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+              testID: "buoy-highlight-exclude-add",
+              accessibilityRole: "button",
+              accessibilityLabel: "Add exclude pattern",
               style: [styles.addButton, {
                 borderColor: _sharedUi.night.color.accentBorderStrong
               }],
@@ -502,6 +544,7 @@ function HighlightFilterView({
             children: "Show only components with render count in a specific range."
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
             nativeID: "__rn_buoy__render-count-range",
+            testID: "buoy-highlight-range",
             style: styles.renderCountRangeContainer,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
               style: styles.renderCountInputRow,
@@ -524,6 +567,7 @@ function HighlightFilterView({
                       });
                     }
                   },
+                  testID: "buoy-highlight-range-min",
                   placeholder: "0",
                   placeholderTextColor: _sharedUi.night.color.placeholder,
                   style: styles.renderCountInput,
@@ -552,6 +596,7 @@ function HighlightFilterView({
                       });
                     }
                   },
+                  testID: "buoy-highlight-range-max",
                   placeholder: "\u221E",
                   placeholderTextColor: _sharedUi.night.color.placeholder,
                   style: styles.renderCountInput,
@@ -560,6 +605,9 @@ function HighlightFilterView({
                 })]
               })]
             }), (filters.minRenderCount !== undefined || filters.maxRenderCount !== undefined) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+              testID: "buoy-highlight-range-clear",
+              accessibilityRole: "button",
+              accessibilityLabel: "Clear range",
               style: styles.clearRangeButton,
               onPress: () => onFilterChange({
                 minRenderCount: undefined,
@@ -625,8 +673,10 @@ function HighlightFilterView({
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             nativeID: "__rn_buoy__detected-items",
+            testID: "buoy-highlight-detected",
             style: styles.detectedItemsContainer,
             children: selectedItems.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+              testID: "buoy-highlight-detected-scroll",
               style: styles.detectedItemsScroll,
               contentContainerStyle: styles.detectedItems,
               nestedScrollEnabled: true,
@@ -634,6 +684,9 @@ function HighlightFilterView({
               children: selectedItems.map(item => {
                 const itemConfig = getFilterConfig(item.type);
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                  testID: (0, _testIDs.detectedItemTestID)(item.type, item.value),
+                  accessibilityRole: "button",
+                  accessibilityLabel: `${itemConfig.label} ${item.value}`,
                   style: [styles.detectedItem, {
                     borderColor: itemConfig.color + "40"
                   }],
@@ -651,6 +704,7 @@ function HighlightFilterView({
                 }, `${item.type}-${item.value}`);
               })
             }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              testID: "buoy-highlight-detected-empty",
               style: styles.emptyText,
               children: "No items detected yet. Start tracking to see components here."
             })
@@ -661,9 +715,13 @@ function HighlightFilterView({
           animationType: "fade",
           onRequestClose: () => setActionPopupItem(null),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+            accessible: false,
+            testID: "buoy-highlight-detected-popup-backdrop",
             style: styles.modalOverlay,
             onPress: () => setActionPopupItem(null),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              accessible: false,
+              testID: "buoy-highlight-detected-popup",
               style: styles.actionPopup,
               children: actionPopupItem && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -677,6 +735,9 @@ function HighlightFilterView({
                 }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
                   style: styles.actionPopupButtons,
                   children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+                    testID: "buoy-highlight-detected-popup-include",
+                    accessibilityRole: "button",
+                    accessibilityLabel: "Include only",
                     style: [styles.actionPopupButton, styles.actionPopupInclude],
                     onPress: handlePopupInclude,
                     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Eye, {
@@ -689,6 +750,9 @@ function HighlightFilterView({
                       children: "Include Only"
                     })]
                   }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+                    testID: "buoy-highlight-detected-popup-exclude",
+                    accessibilityRole: "button",
+                    accessibilityLabel: "Exclude",
                     style: [styles.actionPopupButton, styles.actionPopupExclude],
                     onPress: handlePopupExclude,
                     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
@@ -702,6 +766,9 @@ function HighlightFilterView({
                     })]
                   })]
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                  testID: "buoy-highlight-detected-popup-cancel",
+                  accessibilityRole: "button",
+                  accessibilityLabel: "Cancel",
                   style: styles.actionPopupCancel,
                   onPress: () => setActionPopupItem(null),
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -763,6 +830,7 @@ function HighlightFilterView({
                   style: styles.settingLabel,
                   children: "Show Render Count"
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Switch, {
+                  testID: (0, _testIDs.settingTestID)("showRenderCount"),
                   value: settings.showRenderCount,
                   onValueChange: value => {
                     onSettingsChange({
@@ -793,6 +861,7 @@ function HighlightFilterView({
                   style: [styles.settingLabel, !settings.showRenderCount && styles.settingLabelDisabled],
                   children: "Track Render Causes"
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Switch, {
+                  testID: (0, _testIDs.settingTestID)("trackRenderCauses"),
                   value: settings.trackRenderCauses,
                   onValueChange: value => onSettingsChange({
                     trackRenderCauses: value
@@ -819,6 +888,7 @@ function HighlightFilterView({
                   style: [styles.settingLabel, !settings.trackRenderCauses && styles.settingLabelDisabled],
                   children: "Enable Render History"
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Switch, {
+                  testID: (0, _testIDs.settingTestID)("enableRenderHistory"),
                   value: settings.enableRenderHistory,
                   onValueChange: value => onSettingsChange({
                     enableRenderHistory: value
@@ -847,6 +917,7 @@ function HighlightFilterView({
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                   style: styles.settingValue,
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    testID: "buoy-highlight-setting-debugLogLevel-value",
                     style: [styles.settingValueText, settings.debugLogLevel !== "off" && {
                       color: _sharedUi.night.color.warning
                     }],
@@ -866,6 +937,9 @@ function HighlightFilterView({
                   onPress: () => onSettingsChange({
                     debugLogLevel: preset.value
                   }),
+                  testID: `buoy-highlight-preset-log-${preset.value}`,
+                  accessibilityRole: "button",
+                  accessibilityLabel: `Debug log level ${preset.label}`,
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                     style: [styles.batchSizePresetText, settings.debugLogLevel === preset.value && styles.batchSizePresetTextActive, preset.value !== "off" && settings.debugLogLevel === preset.value && {
                       color: _sharedUi.night.color.warning
@@ -887,6 +961,7 @@ function HighlightFilterView({
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                   style: styles.settingValue,
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    testID: "buoy-highlight-setting-batchSize-value",
                     style: styles.settingValueText,
                     children: settings.batchSize
                   })
@@ -901,12 +976,38 @@ function HighlightFilterView({
                   onPress: () => onSettingsChange({
                     batchSize: preset.value
                   }),
+                  testID: `buoy-highlight-preset-batch-${preset.value}`,
+                  accessibilityRole: "button",
+                  accessibilityLabel: `Batch size ${preset.label}`,
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                     style: [styles.batchSizePresetText, settings.batchSize === preset.value && styles.batchSizePresetTextActive],
                     children: preset.label
                   })
                 }, preset.value))
               })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: [styles.settingItem, styles.settingItemSpaced],
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.settingHeader,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.settingLabel,
+                  children: "Show host views"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Switch, {
+                  testID: (0, _testIDs.settingTestID)("showHostViews"),
+                  value: !!settings.showHostViews,
+                  onValueChange: value => onSettingsChange({
+                    showHostViews: value
+                  }),
+                  trackColor: {
+                    false: _sharedUi.night.color.surfaceElevated,
+                    true: _sharedUi.night.color.accent + "80"
+                  },
+                  thumbColor: settings.showHostViews ? _sharedUi.night.color.accent : _sharedUi.night.color.knob
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.settingDescription,
+                children: "Include anonymous View / RCTView / Text hosts. Off by default so the list is named composites (what actually re-rendered)."
+              })]
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
               style: [styles.settingItem, styles.settingItemSpaced],
               children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -915,6 +1016,7 @@ function HighlightFilterView({
                   style: styles.settingLabel,
                   children: "Highlight Dev Tools"
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Switch, {
+                  testID: (0, _testIDs.settingTestID)("excludeDevTools"),
                   value: !settings.excludeDevTools,
                   onValueChange: value => onSettingsChange({
                     excludeDevTools: !value

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

@@ -39,11 +39,13 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // Disabled banner - memoized since props rarely change
 const DisabledBanner = /*#__PURE__*/_react.default.memo(function DisabledBanner() {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    testID: "buoy-highlight-disabled-banner",
     style: styles.disabledBanner,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Power, {
       size: 14,
       color: _sharedUi.night.color.warning
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: "buoy-highlight-disabled-text",
       style: styles.disabledText,
       children: "Render tracking is disabled"
     })]
@@ -512,6 +514,7 @@ function HighlightUpdatesModal({
   }) : null;
   const body = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     nativeID: "__rn_buoy__highlight-modal",
+    testID: "buoy-highlight-body",
     style: styles.container,
     children: showCopySettingsView ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_RendersCopySettingsView.RendersCopySettingsView, {
       renders: copyRendersSnapshot
@@ -607,7 +610,8 @@ const styles = _reactNative.StyleSheet.create({
     paddingVertical: 8,
     borderBottomWidth: 1,
     borderBottomColor: _sharedUi.night.color.border,
-    backgroundColor: _sharedUi.night.color.surface
+    // Clear, like Bench — the host's hoisted sky shows through the header.
+    backgroundColor: "transparent"
   },
   container: {
     flex: 1,

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

@@ -76,13 +76,15 @@ 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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: testID ? `${testID}-value` : undefined,
       style: [styles.valueOnly, compact && styles.valueOnlyCompact, {
         color: config.color
       }],
@@ -92,6 +94,7 @@ function IdentifierBadge({
   }
   if (badgeOnly) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      testID: testID,
       style: [styles.badgeOnly, compact && styles.badgeOnlyCompact, {
         backgroundColor: config.color + "20",
         borderColor: config.color + "40"
@@ -108,6 +111,8 @@ function IdentifierBadge({
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    testID: testID,
+    accessibilityLabel: `${config.label} ${value}`,
     style: [styles.container, compact && styles.containerCompact],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [styles.badge, compact && styles.badgeCompact, {
@@ -123,6 +128,7 @@ function IdentifierBadge({
         children: label
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: testID ? `${testID}-value` : undefined,
       style: [styles.value, compact && styles.valueCompact],
       numberOfLines: 1,
       children: value

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

@@ -92,11 +92,13 @@ function IsolatedRenderListInner({
   const renderFooter = (0, _react.useCallback)(() => {
     if (lockedComponentCount <= 0) return null;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      testID: "buoy-highlight-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-locked-text",
         style: styles.lockedBannerText,
         children: [lockedComponentCount, " more ", lockedComponentCount === 1 ? 'component' : 'components', " locked"]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -109,20 +111,24 @@ function IsolatedRenderListInner({
   // Show empty state when no renders
   if (renders.length === 0) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      testID: "buoy-highlight-empty",
       style: styles.emptyState,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Activity, {
         size: 32,
         color: _sharedUi.night.color.textTertiary
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        testID: "buoy-highlight-empty-title",
         style: styles.emptyTitle,
         children: "No renders tracked"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        testID: "buoy-highlight-empty-text",
         style: styles.emptyText,
         children: isTracking ? "Component renders will appear here" : "Enable tracking to start capturing"
       })]
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+    testID: "buoy-highlight-list",
     ref: flatListRef,
     data: visibleRenders,
     renderItem: renderItem,

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

@@ -32,11 +32,13 @@ const SearchSectionInner = /*#__PURE__*/(0, _react.memo)(function SearchSection(
   if (!isActive) return null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     nativeID: "__rn_buoy__search-container",
+    testID: "buoy-highlight-search-container",
     style: styles.headerSearchContainer,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
       size: 14,
       color: _sharedUi.night.color.textSecondary
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+      testID: "buoy-highlight-search-field",
       style: styles.headerSearchInput,
       placeholder: "Search testID, nativeID, component...",
       placeholderTextColor: _sharedUi.night.color.placeholder,
@@ -50,6 +52,9 @@ const SearchSectionInner = /*#__PURE__*/(0, _react.memo)(function SearchSection(
       returnKeyType: "search",
       autoFocus: true
     }), searchText.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      testID: "buoy-highlight-search-clear",
+      accessibilityRole: "button",
+      accessibilityLabel: "Clear search",
       onPress: () => {
         onSearchChange("");
         onSearchClose();
@@ -82,6 +87,9 @@ const HeaderActionsInner = /*#__PURE__*/(0, _react.memo)(function HeaderActions(
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      testID: "buoy-highlight-search",
+      accessibilityRole: "button",
+      accessibilityLabel: "Search renders",
       onPress: onSearchToggle,
       style: styles.headerActionButton,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
@@ -89,6 +97,9 @@ const HeaderActionsInner = /*#__PURE__*/(0, _react.memo)(function HeaderActions(
         color: _sharedUi.night.color.textSecondary
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
@@ -96,6 +107,8 @@ const HeaderActionsInner = /*#__PURE__*/(0, _react.memo)(function HeaderActions(
         color: activeFilterCount > 0 ? _sharedUi.night.color.accent : _sharedUi.night.color.textTertiary
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      testID: "buoy-highlight-copy",
+      accessibilityRole: "button",
       onPress: onOpenCopySettings,
       style: [styles.headerActionButton, !hasRenders && styles.headerActionButtonDisabled],
       disabled: !hasRenders,
@@ -105,6 +118,9 @@ const HeaderActionsInner = /*#__PURE__*/(0, _react.memo)(function HeaderActions(
         color: hasRenders ? _sharedUi.night.color.textSecondary : _sharedUi.night.color.textTertiary
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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,
@@ -113,10 +129,14 @@ const HeaderActionsInner = /*#__PURE__*/(0, _react.memo)(function HeaderActions(
         color: !isTracking ? _sharedUi.night.color.textTertiary : isFrozen ? _sharedUi.night.color.accent : _sharedUi.night.color.textTertiary
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
+      testID: "buoy-highlight-power",
       isEnabled: isTracking,
       onToggle: onToggleTracking,
       accessibilityLabel: "Toggle render tracking"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      testID: "buoy-highlight-clear",
+      accessibilityRole: "button",
+      accessibilityLabel: "Clear tracked renders",
       onPress: onClear,
       style: [styles.headerActionButton, !hasRenders && styles.headerActionButtonDisabled],
       disabled: !hasRenders,
@@ -204,7 +224,8 @@ const FilterViewHeader = exports.FilterViewHeader = /*#__PURE__*/(0, _react.memo
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
         tabs: tabs,
         activeTab: activeTab,
-        onTabChange: tab => onTabChange(tab)
+        onTabChange: tab => onTabChange(tab),
+        testIDPrefix: "buoy-highlight-filter-tab"
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {})]
   });
@@ -237,7 +258,8 @@ const DetailViewHeader = exports.DetailViewHeader = /*#__PURE__*/(0, _react.memo
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
         tabs: tabs,
         activeTab: activeTab,
-        onTabChange: tab => onTabChange(tab)
+        onTabChange: tab => onTabChange(tab),
+        testIDPrefix: "buoy-highlight-detail-tab"
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {})]
   });
@@ -254,7 +276,8 @@ const CopySettingsViewHeader = exports.CopySettingsViewHeader = /*#__PURE__*/(0,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
       onBack: onBack
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-      title: "Copy Settings"
+      title: "Copy Settings",
+      testID: "buoy-highlight-copy-title"
     })]
   });
 });

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

@@ -100,7 +100,8 @@ 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;
@@ -109,6 +110,7 @@ function RenderCauseBadge({
   const showComponentCause = showTwoLevel && componentConfig && cause.componentCause !== cause.type;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     nativeID: "__rn_buoy__cause-badge",
+    testID: testID,
     style: [styles.container, compact && styles.containerCompact],
     children: [showComponentCause && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -116,6 +118,7 @@ function RenderCauseBadge({
           backgroundColor: componentConfig.color + "15"
         }],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          testID: testID ? `${testID}-component` : undefined,
           style: [styles.badgeText, compact && styles.badgeTextCompact, styles.componentBadgeText, {
             color: componentConfig.color
           }],
@@ -130,16 +133,19 @@ function RenderCauseBadge({
         backgroundColor: config.color + "20"
       }],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+      testID: testID ? `${testID}-hooks` : undefined,
       style: [styles.keysText, compact && styles.keysTextCompact],
       numberOfLines: 1,
       children: ["Hook ", cause.hookIndices.join(", ")]