@buoy-gg/highlight-updates 7.0.27 → 7.0.29

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,12 +970,38 @@ 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
                   })
                 }, preset.value))
               })]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: [styles.settingItem, styles.settingItemSpaced],
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: styles.settingHeader,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.settingLabel,
+                  children: "Show host views"
+                }), /*#__PURE__*/_jsx(Switch, {
+                  testID: settingTestID("showHostViews"),
+                  value: !!settings.showHostViews,
+                  onValueChange: value => onSettingsChange({
+                    showHostViews: value
+                  }),
+                  trackColor: {
+                    false: night.color.surfaceElevated,
+                    true: night.color.accent + "80"
+                  },
+                  thumbColor: settings.showHostViews ? night.color.accent : night.color.knob
+                })]
+              }), /*#__PURE__*/_jsx(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__*/_jsxs(View, {
               style: [styles.settingItem, styles.settingItemSpaced],
               children: [/*#__PURE__*/_jsxs(View, {
@@ -909,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,

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(", ")]