@buoy-gg/route-events 7.0.28 → 7.0.30

package/lib/commonjs/components/NavigationStack.js

@@ -10,6 +10,7 @@ var _sharedUi = require("@buoy-gg/shared-ui");
 var _license = require("@buoy-gg/license");
 var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
 var _useNavigationStack = require("../useNavigationStack");
+var _testIDs = require("../utils/testIDs");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * NavigationStack - Visual representation of current navigation stack
@@ -52,6 +53,9 @@ function NavigationStack({
   const navigateToIndex = index => onAction ? onAction("navigateToIndex", {
     index
   }) : hookResult.navigateToIndex(index);
+  const popToIndex = index => onAction ? onAction("popToIndex", {
+    index
+  }) : hookResult.popToIndex(index);
   const goBack = () => onAction ? onAction("goBack") : hookResult.goBack();
   const popToTop = () => onAction ? onAction("popToTop") : hookResult.popToTop();
   const [expandedIndex, setExpandedIndex] = (0, _react.useState)(null);
@@ -106,6 +110,7 @@ function NavigationStack({
         style: styles.loadingContainer,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.loadingText,
+          testID: "buoy-routes-stack-loading",
           children: "Loading navigation stack..."
         })
       })
@@ -118,11 +123,13 @@ function NavigationStack({
       style: [styles.container, style],
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.errorContainer,
+        testID: "buoy-routes-stack-error",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.errorText,
           children: "Error loading stack"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.errorDetail,
+          testID: "buoy-routes-stack-error-detail",
           children: error.message
         })]
       })
@@ -135,8 +142,10 @@ function NavigationStack({
       style: [styles.container, style],
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.emptyContainer,
+        testID: "buoy-routes-stack-empty",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.emptyText,
+          testID: "buoy-routes-stack-empty-text",
           children: "No navigation stack"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.emptySubtext,
@@ -233,12 +242,19 @@ function NavigationStack({
     const screensToRemove = stackDepth - 1 - selectedRoute.index;
     const targetIndex = selectedRoute.index;
     confirmDestructive("Pop to Route", `Remove ${screensToRemove} screen${screensToRemove !== 1 ? "s" : ""} above ${selectedRoute.pathname}?`, "Pop",
-    // Navigate to the selected route, which effectively pops everything above it
-    () => navigateToIndex(targetIndex));
+    // POP, not navigate. `navigate` only returns to a mounted screen when
+    // the name AND the params match, so on any dynamic route — the common
+    // case for a stack you would want to unwind — it pushed a fresh copy
+    // instead: the dialog promised to remove two screens and the stack came
+    // back one deeper, with the route in it twice. `popToIndex` is the
+    // action the hook has always exported for this, and the same one the
+    // desktop host already dispatches over the socket.
+    () => popToIndex(targetIndex));
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [styles.container, style],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      testID: "buoy-routes-stack-scroll",
       style: styles.stackScroll,
       contentContainerStyle: [styles.stackContent, {
         paddingBottom: styles.stackContent.padding + insets.bottom
@@ -247,14 +263,19 @@ function NavigationStack({
         const actualIndex = stack.length - 1 - reverseIndex;
         const isExpanded = expandedIndex === actualIndex;
         const hasParams = Object.keys(item.params).length > 0;
+        const itemTestID = (0, _testIDs.stackItemTestID)(actualIndex);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.stackItemWrapper,
+          testID: itemTestID,
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
             style: [styles.stackItem, isExpanded && styles.stackItemSelected],
             children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
               style: styles.stackItemHeader,
               onPress: () => toggleExpand(actualIndex),
               activeOpacity: 0.7,
+              testID: `${itemTestID}-toggle`,
+              accessibilityRole: "button",
+              accessibilityLabel: `${item.pathname}, ${item.isFocused ? "focused" : "mounted"}, position ${actualIndex} of ${stackDepth - 1}`,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                 style: styles.expandIndicator,
                 children: isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronDown, {
@@ -267,10 +288,12 @@ function NavigationStack({
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: styles.stackItemPath,
                 numberOfLines: 1,
+                testID: `${itemTestID}-path`,
                 children: item.pathname
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InlineCopyButton, {
                 value: item.pathname,
-                buttonStyle: styles.copyRouteButton
+                buttonStyle: styles.copyRouteButton,
+                testID: `${itemTestID}-copy`
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                 style: [styles.statusBadge, {
                   backgroundColor: item.isFocused ? `${_sharedUi.buoyColors.success}15` : "#3B82F615",
@@ -280,6 +303,7 @@ function NavigationStack({
                   style: [styles.statusBadgeText, {
                     color: item.isFocused ? _sharedUi.buoyColors.success : "#3B82F6"
                   }],
+                  testID: `${itemTestID}-status`,
                   children: item.isFocused ? "FOCUSED" : "MOUNTED"
                 })
               })]
@@ -292,6 +316,7 @@ function NavigationStack({
                   children: "Route Name:"
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                   style: styles.detailValue,
+                  testID: `${itemTestID}-name`,
                   children: item.name
                 })]
               }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -301,6 +326,7 @@ function NavigationStack({
                   children: "Position:"
                 }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
                   style: styles.detailValue,
+                  testID: `${itemTestID}-position`,
                   children: [actualIndex, " / ", stackDepth - 1]
                 })]
               }), hasParams && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -318,6 +344,9 @@ function NavigationStack({
                     style: [styles.actionButton, isAtRoot && styles.actionButtonDisabled],
                     onPress: handleGoBack,
                     disabled: isAtRoot,
+                    testID: `${itemTestID}-back`,
+                    accessibilityRole: "button",
+                    accessibilityLabel: "Go back one screen",
                     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                       style: [styles.actionButtonText, isAtRoot && styles.actionButtonTextDisabled],
                       children: "Back"
@@ -332,6 +361,9 @@ function NavigationStack({
                     style: [styles.actionButton, item.isFocused && styles.actionButtonDisabled],
                     onPress: handleGo,
                     disabled: item.isFocused,
+                    testID: `${itemTestID}-go`,
+                    accessibilityRole: "button",
+                    accessibilityLabel: `Navigate to ${item.pathname}`,
                     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                       style: [styles.actionButtonText, item.isFocused && styles.actionButtonTextDisabled],
                       children: "Go"
@@ -346,6 +378,9 @@ function NavigationStack({
                     style: [styles.actionButton, (item.isFocused || actualIndex === stackDepth - 1) && styles.actionButtonDisabled],
                     onPress: handlePopTo,
                     disabled: item.isFocused || actualIndex === stackDepth - 1,
+                    testID: `${itemTestID}-pop-to`,
+                    accessibilityRole: "button",
+                    accessibilityLabel: `Remove screens above ${item.pathname}`,
                     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                       style: [styles.actionButtonText, (item.isFocused || actualIndex === stackDepth - 1) && styles.actionButtonTextDisabled],
                       children: "Pop To"

package/lib/commonjs/components/RouteEventDetail.js

@@ -27,6 +27,7 @@ function RouteEventDetail({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.container,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      testID: "buoy-routes-detail-scroll",
       style: styles.scroll,
       contentContainerStyle: styles.scrollContent,
       showsVerticalScrollIndicator: true,
@@ -41,6 +42,9 @@ function RouteEventDetail({
         style: styles.goButton,
         onPress: () => onNavigate(event.pathname),
         activeOpacity: 0.8,
+        testID: "buoy-routes-detail-go",
+        accessibilityRole: "button",
+        accessibilityLabel: `Go to route ${event.pathname}`,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Navigation, {
           size: 16,
           color: _sharedUi.night.color.onAccent

package/lib/commonjs/components/RouteEventExpandedContent.js

@@ -41,11 +41,13 @@ function RouteEventExpandedContent({
       style: styles.section,
       children: [routeTemplate && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.detailRow,
+        testID: "buoy-routes-detail-template",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.detailLabel,
           children: "Template:"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.detailValue,
+          testID: "buoy-routes-detail-template-value",
           children: routeTemplate
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InlineCopyButton, {
           value: routeTemplate,
@@ -53,11 +55,13 @@ function RouteEventExpandedContent({
         })]
       }), event.previousPathname && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.detailRow,
+        testID: "buoy-routes-detail-from",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.detailLabel,
           children: "From:"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.detailValue,
+          testID: "buoy-routes-detail-from-value",
           children: event.previousPathname
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InlineCopyButton, {
           value: event.previousPathname,
@@ -65,11 +69,13 @@ function RouteEventExpandedContent({
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.detailRow,
+        testID: "buoy-routes-detail-to",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.detailLabel,
           children: "To:"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.detailValue,
+          testID: "buoy-routes-detail-to-value",
           children: event.pathname
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InlineCopyButton, {
           value: event.pathname,
@@ -80,20 +86,24 @@ function RouteEventExpandedContent({
       style: styles.section,
       children: [event.timeSincePrevious !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.detailRow,
+        testID: "buoy-routes-detail-duration",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.detailLabel,
           children: "Duration:"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.detailValue,
+          testID: "buoy-routes-detail-duration-value",
           children: formatDuration(event.timeSincePrevious)
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.detailRow,
+        testID: "buoy-routes-detail-time",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.detailLabel,
           children: "Time:"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.detailValue,
+          testID: "buoy-routes-detail-time-value",
           children: new Date(event.timestamp).toLocaleString()
         })]
       })]
@@ -101,11 +111,13 @@ function RouteEventExpandedContent({
       style: styles.section,
       children: [event.segments && event.segments.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.detailRow,
+        testID: "buoy-routes-detail-segments",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.detailLabel,
           children: "Segments:"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.detailValue,
+          testID: "buoy-routes-detail-segments-value",
           children: event.segments.join(' → ')
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InlineCopyButton, {
           value: JSON.stringify(event.segments),
@@ -117,6 +129,7 @@ function RouteEventExpandedContent({
           style: styles.dataViewerHeader,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
             style: styles.dataViewerTitle,
+            testID: "buoy-routes-detail-params-title",
             children: ["Parameters (", Object.keys(event.params).length, ")"]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InlineCopyButton, {
             value: JSON.stringify(event.params, null, 2),
@@ -131,11 +144,13 @@ function RouteEventExpandedContent({
         })]
       }), visitNumber > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.detailRow,
+        testID: "buoy-routes-detail-visited",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.detailLabel,
           children: "Visited:"
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
           style: styles.detailValue,
+          testID: "buoy-routes-detail-visited-value",
           children: [visitNumber, " time", visitNumber !== 1 ? 's' : '']
         })]
       })]

package/lib/commonjs/components/RouteEventItemCompact.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _RouteEventExpandedContent = require("./RouteEventExpandedContent");
 var _routeTemplate = require("../utils/routeTemplate");
+var _testIDs = require("../utils/testIDs");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * RouteEventItemCompact - Compact list item for route events
@@ -116,6 +117,11 @@ const RouteEventItemCompact = exports.RouteEventItemCompact = /*#__PURE__*/(0, _
   const statusLabel = (0, _react.useMemo)(() => getStatusLabel(routeType), [routeType]);
   const statusSublabel = (0, _react.useMemo)(() => getStatusSublabel(event), [event]);
   const badgeText = (0, _react.useMemo)(() => getBadgeText(event), [event]);
+  const testID = (0, _react.useMemo)(() => (0, _testIDs.eventRowTestID)(event.pathname, visitNumber), [event.pathname, visitNumber]);
+  // Spelled out for assistive tech: the row's whole verdict is a coloured dot
+  // and two short words that Fabric merges into the row's container, so
+  // VoiceOver would otherwise announce a control it cannot describe.
+  const accessibilityLabel = (0, _react.useMemo)(() => `${event.pathname}, ${statusLabel}, ${statusSublabel}`, [event.pathname, statusLabel, statusSublabel]);
   const expandedContent = (0, _react.useMemo)(() => {
     if (!isExpanded) return undefined;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RouteEventExpandedContent.RouteEventExpandedContent, {
@@ -134,6 +140,7 @@ const RouteEventItemCompact = exports.RouteEventItemCompact = /*#__PURE__*/(0, _
         style: [styles.badgeText, {
           color: statusColor
         }],
+        testID: `${testID}-badge`,
         children: badgeText
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         style: styles.goButton,
@@ -141,13 +148,16 @@ const RouteEventItemCompact = exports.RouteEventItemCompact = /*#__PURE__*/(0, _
           e.stopPropagation();
           onNavigate(event.pathname);
         },
+        testID: `${testID}-go`,
+        accessibilityRole: "button",
+        accessibilityLabel: `Go to ${event.pathname}`,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.goButtonText,
           children: "Go"
         })
       })]
     });
-  }, [onNavigate, event.pathname, badgeText, statusColor]);
+  }, [onNavigate, event.pathname, badgeText, statusColor, testID]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompactRow, {
     statusDotColor: statusColor,
     statusLabel: statusLabel,
@@ -165,7 +175,11 @@ const RouteEventItemCompact = exports.RouteEventItemCompact = /*#__PURE__*/(0, _
     expandedContent: expandedContent,
     isExpanded: isExpanded,
     expandedGlowColor: statusColor,
-    onPress: () => onPress(index)
+    onPress: () => onPress(index),
+    testID: testID,
+    statusTestID: `${testID}-status`,
+    statusSublabelTestID: `${testID}-sublabel`,
+    accessibilityLabel: accessibilityLabel
   });
 });
 const styles = _reactNative.StyleSheet.create({

package/lib/commonjs/components/RouteEventsModalWithTabs.js

@@ -189,7 +189,11 @@ function RouteEventsModalWithTabs({
     const loadTabState = async () => {
       try {
         const storedTab = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.routeEvents.activeTab());
-        if (storedTab && (storedTab === "routes" || storedTab === "events")) {
+        // Every tab the selector offers, including "stack": the save side has
+        // always written it, so leaving it off this list meant the Stack tab
+        // was persisted and then silently discarded on the next launch —
+        // you came back to Events having chosen otherwise.
+        if (storedTab === "routes" || storedTab === "events" || storedTab === "stack") {
           setActiveTab(storedTab);
         }
         hasLoadedTabState.current = true;
@@ -361,20 +365,28 @@ function RouteEventsModalWithTabs({
   const visibleEvents = (0, _react.useMemo)(() => filteredEvents.slice(0, eventLimit), [filteredEvents, eventLimit]);
   const lockedEventCount = (0, _react.useMemo)(() => Math.max(0, filteredEvents.length - eventLimit), [filteredEvents.length, eventLimit]);
 
-  // Calculate visit counts for each route (for duplicate detection)
+  /**
+   * "This was the Nth time you were here", per event.
+   *
+   * Keyed by the EVENT, not by its index. Indices belong to the unfiltered
+   * list, and every consumer below reads them off the FILTERED one — so with
+   * a search typed, or any ignore pattern active (there are three by
+   * default), each row was handed the visit count of whatever event sat at
+   * that position in the full history. Rows read plausibly and were simply
+   * about a different navigation.
+   */
   const visitCounts = (0, _react.useMemo)(() => {
     const counts = new Map();
-    const eventVisitNumbers = new Map();
+    const byEvent = new Map();
 
-    // Iterate from oldest to newest to assign visit numbers correctly
+    // Oldest to newest, so the first time you visited a route is visit 1.
     for (let i = events.length - 1; i >= 0; i--) {
       const event = events[i];
-      const currentCount = counts.get(event.pathname) || 0;
-      const visitNumber = currentCount + 1;
+      const visitNumber = (counts.get(event.pathname) || 0) + 1;
       counts.set(event.pathname, visitNumber);
-      eventVisitNumbers.set(i, visitNumber);
+      byEvent.set(event, visitNumber);
     }
-    return eventVisitNumbers;
+    return byEvent;
   }, [events]);
 
   // Prepare copy data - memoized so it only rebuilds when dependencies change
@@ -389,7 +401,7 @@ function RouteEventsModalWithTabs({
       },
       events: filteredEvents.map((event, index) => ({
         index,
-        visitNumber: visitCounts.get(index) || 1,
+        visitNumber: visitCounts.get(event) || 1,
         pathname: event.pathname,
         timestamp: event.timestamp,
         timestampRelative: (0, _sharedUi.formatRelativeTime)(event.timestamp),
@@ -451,23 +463,29 @@ function RouteEventsModalWithTabs({
     if (filteredEvents.length === 0) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.contentWrapper,
+        testID: "buoy-routes-events",
         children: [showSearchBar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.searchContainer,
+          testID: "buoy-routes-search-field",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SearchBar, {
             value: searchQuery,
             onChange: setSearchQuery,
-            placeholder: "Search pathname or params..."
+            placeholder: "Search pathname or params...",
+            testID: "buoy-routes-search"
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.emptyState,
+          testID: "buoy-routes-empty",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Navigation, {
             size: 48,
             color: _sharedUi.night.color.textTertiary
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: styles.emptyTitle,
+            testID: "buoy-routes-empty-title",
             children: searchQuery.trim() ? "No matching events" : isListening ? "No route events yet" : "Event listener is paused"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: styles.emptySubtitle,
+            testID: "buoy-routes-empty-subtitle",
             children: searchQuery.trim() ? "Try a different search term" : isListening ? "Navigation events will appear here" : "Press play to start monitoring"
           })]
         })]
@@ -477,20 +495,25 @@ function RouteEventsModalWithTabs({
     // Show chronological timeline of events
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.contentWrapper,
+      testID: "buoy-routes-events",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.searchContainer,
+        testID: "buoy-routes-search-field",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SearchBar, {
           value: searchQuery,
           onChange: setSearchQuery,
-          placeholder: "Search pathname or params..."
+          placeholder: "Search pathname or params...",
+          testID: "buoy-routes-search"
         })
       }), lockedEventCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.lockedEventsBanner,
+        testID: "buoy-routes-locked-banner",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Lock, {
           size: 14,
           color: _sharedUi.night.color.warning
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
           style: styles.lockedEventsBannerText,
+          testID: "buoy-routes-locked-banner-text",
           children: [lockedEventCount, " older ", lockedEventCount === 1 ? 'event' : 'events', " locked"]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.lockedEventsBannerSubtext,
@@ -508,9 +531,11 @@ function RouteEventsModalWithTabs({
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
       onBack: handleBackFromDetail
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-      title: selectedEvent.pathname
+      title: selectedEvent.pathname,
+      testID: "buoy-routes-detail-title"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
+        testID: "buoy-routes-detail-copy",
         value: {
           pathname: selectedEvent.pathname,
           previousPathname: selectedEvent.previousPathname,
@@ -528,7 +553,8 @@ function RouteEventsModalWithTabs({
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
       onBack: () => setShowFilters(false)
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-      title: "Filters"
+      title: "Filters",
+      testID: "buoy-routes-filters-title"
     })]
   }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
     children: [onBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
@@ -548,19 +574,25 @@ function RouteEventsModalWithTabs({
           label: "Stack"
         }],
         activeTab: activeTab,
-        onTabChange: tab => handleTabChange(tab)
+        onTabChange: tab => handleTabChange(tab),
+        testIDPrefix: "buoy-routes-tab"
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
       children: [activeTab === "stack" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
         value: stackCopyValue,
-        buttonStyle: styles.iconButton
+        buttonStyle: styles.iconButton,
+        testID: "buoy-routes-stack-copy"
       }), activeTab === "events" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
           value: copyAllEventsData,
-          buttonStyle: styles.iconButton
+          buttonStyle: styles.iconButton,
+          testID: "buoy-routes-copy"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
           onPress: handleToggleFilters,
           style: [styles.iconButton, ignoredPatterns.size > 0 && styles.activeFilterButton],
+          testID: "buoy-routes-filters",
+          accessibilityRole: "button",
+          accessibilityLabel: ignoredPatterns.size > 0 ? `Route filters, ${ignoredPatterns.size} active` : "Route filters",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
             size: 14,
             color: ignoredPatterns.size > 0 ? _sharedUi.night.color.accent : _sharedUi.night.color.textSecondary
@@ -568,10 +600,14 @@ function RouteEventsModalWithTabs({
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
           isEnabled: isListening,
           onToggle: handleToggleListening,
-          accessibilityLabel: "Toggle route event monitoring"
+          accessibilityLabel: "Toggle route event monitoring",
+          testID: "buoy-routes-power"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
           onPress: handleClearEvents,
           style: styles.iconButton,
+          testID: "buoy-routes-clear",
+          accessibilityRole: "button",
+          accessibilityLabel: "Clear route events",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
             size: 14,
             color: _sharedUi.night.color.danger
@@ -667,7 +703,8 @@ const styles = _reactNative.StyleSheet.create({
     paddingVertical: 8,
     borderBottomWidth: 1,
     borderBottomColor: _sharedUi.buoyColors.border,
-    backgroundColor: _sharedUi.buoyColors.card
+    // Clear, like Bench — the host's hoisted sky shows through the header.
+    backgroundColor: "transparent"
   },
   iconButton: {
     padding: 6,

package/lib/commonjs/components/RouteEventsTimeline.js

@@ -28,19 +28,22 @@ function RouteEventsTimeline({
   const handleItemPress = (0, _react.useCallback)(index => {
     const event = events[index];
     if (!event) return;
-    onSelectEvent(event, visitCounts.get(index) || 1);
+    onSelectEvent(event, visitCounts.get(event) || 1);
   }, [events, visitCounts, onSelectEvent]);
   if (events.length === 0) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.emptyState,
+      testID: "buoy-routes-empty",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Navigation, {
         size: 48,
         color: _sharedUi.night.color.textTertiary
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.emptyTitle,
+        testID: "buoy-routes-empty-title",
         children: "No events yet"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.emptySubtitle,
+        testID: "buoy-routes-empty-subtitle",
         children: "Navigation events will appear here"
       })]
     });
@@ -51,6 +54,7 @@ function RouteEventsTimeline({
     // the 500-event cap that measured 32.8 JS FPS during an idle dwell,
     // tool-bench 2026-07-06).
     (0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+      testID: "buoy-routes-timeline",
       contentContainerStyle: styles.listContent,
       data: events
       // STABLE content keys — index-based keys remount every row when a new
@@ -63,14 +67,19 @@ function RouteEventsTimeline({
         index
       }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_RouteEventItemCompact.RouteEventItemCompact, {
         event: event,
-        visitNumber: visitCounts.get(index) || 1,
+        visitNumber: visitCounts.get(event) || 1,
         isExpanded: false,
         index: index,
         onPress: handleItemPress,
         onNavigate: onNavigate
       }),
-      showsVerticalScrollIndicator: true,
-      removeClippedSubviews: true,
+      showsVerticalScrollIndicator: true
+      // Clipped cells fail Detox's hittability check even when they are on
+      // screen, so the e2e bundle keeps every mounted row targetable. The
+      // env var is inlined at bundle time; guarded so a non-inlining bundler
+      // keeps production behaviour.
+      ,
+      removeClippedSubviews: !(typeof process !== "undefined" && process.env?.EXPO_PUBLIC_E2E),
       initialNumToRender: 12,
       maxToRenderPerBatch: 8,
       windowSize: 5,