@buoy-gg/route-events 7.0.28 → 7.0.30

package/lib/module/components/RouteEventItemCompact.js

@@ -11,6 +11,7 @@ import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { CompactRow, RelativeTime, buoyColors, night } from "@buoy-gg/shared-ui";
 import { RouteEventExpandedContent } from "./RouteEventExpandedContent";
 import { getRouteTemplate } from "../utils/routeTemplate";
+import { eventRowTestID } from "../utils/testIDs";
 
 // Route type for color coding
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -112,6 +113,11 @@ export const RouteEventItemCompact = /*#__PURE__*/memo(function RouteEventItemCo
   const statusLabel = useMemo(() => getStatusLabel(routeType), [routeType]);
   const statusSublabel = useMemo(() => getStatusSublabel(event), [event]);
   const badgeText = useMemo(() => getBadgeText(event), [event]);
+  const testID = useMemo(() => 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 = useMemo(() => `${event.pathname}, ${statusLabel}, ${statusSublabel}`, [event.pathname, statusLabel, statusSublabel]);
   const expandedContent = useMemo(() => {
     if (!isExpanded) return undefined;
     return /*#__PURE__*/_jsx(RouteEventExpandedContent, {
@@ -130,6 +136,7 @@ export const RouteEventItemCompact = /*#__PURE__*/memo(function RouteEventItemCo
         style: [styles.badgeText, {
           color: statusColor
         }],
+        testID: `${testID}-badge`,
         children: badgeText
       }), /*#__PURE__*/_jsx(TouchableOpacity, {
         style: styles.goButton,
@@ -137,13 +144,16 @@ export const RouteEventItemCompact = /*#__PURE__*/memo(function RouteEventItemCo
           e.stopPropagation();
           onNavigate(event.pathname);
         },
+        testID: `${testID}-go`,
+        accessibilityRole: "button",
+        accessibilityLabel: `Go to ${event.pathname}`,
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.goButtonText,
           children: "Go"
         })
       })]
     });
-  }, [onNavigate, event.pathname, badgeText, statusColor]);
+  }, [onNavigate, event.pathname, badgeText, statusColor, testID]);
   return /*#__PURE__*/_jsx(CompactRow, {
     statusDotColor: statusColor,
     statusLabel: statusLabel,
@@ -161,7 +171,11 @@ export const RouteEventItemCompact = /*#__PURE__*/memo(function RouteEventItemCo
     expandedContent: expandedContent,
     isExpanded: isExpanded,
     expandedGlowColor: statusColor,
-    onPress: () => onPress(index)
+    onPress: () => onPress(index),
+    testID: testID,
+    statusTestID: `${testID}-status`,
+    statusSublabelTestID: `${testID}-sublabel`,
+    accessibilityLabel: accessibilityLabel
   });
 });
 const styles = StyleSheet.create({

package/lib/module/components/RouteEventsModalWithTabs.js

@@ -186,7 +186,11 @@ export function RouteEventsModalWithTabs({
     const loadTabState = async () => {
       try {
         const storedTab = await persistentStorage.getItem(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;
@@ -358,20 +362,28 @@ export function RouteEventsModalWithTabs({
   const visibleEvents = useMemo(() => filteredEvents.slice(0, eventLimit), [filteredEvents, eventLimit]);
   const lockedEventCount = 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 = 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
@@ -386,7 +398,7 @@ export 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: formatRelativeTime(event.timestamp),
@@ -448,23 +460,29 @@ export function RouteEventsModalWithTabs({
     if (filteredEvents.length === 0) {
       return /*#__PURE__*/_jsxs(View, {
         style: styles.contentWrapper,
+        testID: "buoy-routes-events",
         children: [showSearchBar && /*#__PURE__*/_jsx(View, {
           style: styles.searchContainer,
+          testID: "buoy-routes-search-field",
           children: /*#__PURE__*/_jsx(SearchBar, {
             value: searchQuery,
             onChange: setSearchQuery,
-            placeholder: "Search pathname or params..."
+            placeholder: "Search pathname or params...",
+            testID: "buoy-routes-search"
           })
         }), /*#__PURE__*/_jsxs(View, {
           style: styles.emptyState,
+          testID: "buoy-routes-empty",
           children: [/*#__PURE__*/_jsx(Navigation, {
             size: 48,
             color: night.color.textTertiary
           }), /*#__PURE__*/_jsx(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__*/_jsx(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"
           })]
         })]
@@ -474,20 +492,25 @@ export function RouteEventsModalWithTabs({
     // Show chronological timeline of events
     return /*#__PURE__*/_jsxs(View, {
       style: styles.contentWrapper,
+      testID: "buoy-routes-events",
       children: [/*#__PURE__*/_jsx(View, {
         style: styles.searchContainer,
+        testID: "buoy-routes-search-field",
         children: /*#__PURE__*/_jsx(SearchBar, {
           value: searchQuery,
           onChange: setSearchQuery,
-          placeholder: "Search pathname or params..."
+          placeholder: "Search pathname or params...",
+          testID: "buoy-routes-search"
         })
       }), lockedEventCount > 0 && /*#__PURE__*/_jsxs(View, {
         style: styles.lockedEventsBanner,
+        testID: "buoy-routes-locked-banner",
         children: [/*#__PURE__*/_jsx(Lock, {
           size: 14,
           color: night.color.warning
         }), /*#__PURE__*/_jsxs(Text, {
           style: styles.lockedEventsBannerText,
+          testID: "buoy-routes-locked-banner-text",
           children: [lockedEventCount, " older ", lockedEventCount === 1 ? 'event' : 'events', " locked"]
         }), /*#__PURE__*/_jsx(Text, {
           style: styles.lockedEventsBannerSubtext,
@@ -505,9 +528,11 @@ export function RouteEventsModalWithTabs({
     children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
       onBack: handleBackFromDetail
     }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-      title: selectedEvent.pathname
+      title: selectedEvent.pathname,
+      testID: "buoy-routes-detail-title"
     }), /*#__PURE__*/_jsx(ModalHeader.Actions, {
       children: /*#__PURE__*/_jsx(ToolbarCopyButton, {
+        testID: "buoy-routes-detail-copy",
         value: {
           pathname: selectedEvent.pathname,
           previousPathname: selectedEvent.previousPathname,
@@ -525,7 +550,8 @@ export function RouteEventsModalWithTabs({
     children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
       onBack: () => setShowFilters(false)
     }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-      title: "Filters"
+      title: "Filters",
+      testID: "buoy-routes-filters-title"
     })]
   }) : /*#__PURE__*/_jsxs(ModalHeader, {
     children: [onBack && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
@@ -545,19 +571,25 @@ export function RouteEventsModalWithTabs({
           label: "Stack"
         }],
         activeTab: activeTab,
-        onTabChange: tab => handleTabChange(tab)
+        onTabChange: tab => handleTabChange(tab),
+        testIDPrefix: "buoy-routes-tab"
       })
     }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
       children: [activeTab === "stack" && /*#__PURE__*/_jsx(ToolbarCopyButton, {
         value: stackCopyValue,
-        buttonStyle: styles.iconButton
+        buttonStyle: styles.iconButton,
+        testID: "buoy-routes-stack-copy"
       }), activeTab === "events" && /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(ToolbarCopyButton, {
           value: copyAllEventsData,
-          buttonStyle: styles.iconButton
+          buttonStyle: styles.iconButton,
+          testID: "buoy-routes-copy"
         }), /*#__PURE__*/_jsx(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__*/_jsx(Filter, {
             size: 14,
             color: ignoredPatterns.size > 0 ? night.color.accent : night.color.textSecondary
@@ -565,10 +597,14 @@ export function RouteEventsModalWithTabs({
         }), /*#__PURE__*/_jsx(PowerToggleButton, {
           isEnabled: isListening,
           onToggle: handleToggleListening,
-          accessibilityLabel: "Toggle route event monitoring"
+          accessibilityLabel: "Toggle route event monitoring",
+          testID: "buoy-routes-power"
         }), /*#__PURE__*/_jsx(TouchableOpacity, {
           onPress: handleClearEvents,
           style: styles.iconButton,
+          testID: "buoy-routes-clear",
+          accessibilityRole: "button",
+          accessibilityLabel: "Clear route events",
           children: /*#__PURE__*/_jsx(Trash2, {
             size: 14,
             color: night.color.danger
@@ -664,7 +700,8 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     borderBottomWidth: 1,
     borderBottomColor: buoyColors.border,
-    backgroundColor: buoyColors.card
+    // Clear, like Bench — the host's hoisted sky shows through the header.
+    backgroundColor: "transparent"
   },
   iconButton: {
     padding: 6,

package/lib/module/components/RouteEventsTimeline.js

@@ -24,19 +24,22 @@ export function RouteEventsTimeline({
   const handleItemPress = 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__*/_jsxs(View, {
       style: styles.emptyState,
+      testID: "buoy-routes-empty",
       children: [/*#__PURE__*/_jsx(Navigation, {
         size: 48,
         color: night.color.textTertiary
       }), /*#__PURE__*/_jsx(Text, {
         style: styles.emptyTitle,
+        testID: "buoy-routes-empty-title",
         children: "No events yet"
       }), /*#__PURE__*/_jsx(Text, {
         style: styles.emptySubtitle,
+        testID: "buoy-routes-empty-subtitle",
         children: "Navigation events will appear here"
       })]
     });
@@ -47,6 +50,7 @@ export function RouteEventsTimeline({
     // the 500-event cap that measured 32.8 JS FPS during an idle dwell,
     // tool-bench 2026-07-06).
     _jsx(FlatList, {
+      testID: "buoy-routes-timeline",
       contentContainerStyle: styles.listContent,
       data: events
       // STABLE content keys — index-based keys remount every row when a new
@@ -59,14 +63,19 @@ export function RouteEventsTimeline({
         index
       }) => /*#__PURE__*/_jsx(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,

package/lib/module/components/RoutesSitemap.js

@@ -18,6 +18,7 @@ import { useSafeRouter } from "@buoy-gg/shared-ui";
 import { Search, ChevronDown, ChevronRight, Home, InlineCopyButton, CopyButton, RefreshCw, formatRelativeTime, ProUpgradeModal } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 import { useRouteSitemap } from "../useRouteSitemap";
+import { sitemapGroupTestID, sitemapRouteTestID } from "../utils/testIDs";
 
 // ============================================================================
 // Types
@@ -254,6 +255,7 @@ export function RoutesSitemap({
         style: styles.loadingContainer,
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.loadingText,
+          testID: "buoy-routes-sitemap-loading",
           children: isSupported ? "Loading routes..." : "Route sitemap isn't available on the dashboard — the route tree lives on the device. Use the Events tab to see navigation here."
         })
       })
@@ -261,8 +263,14 @@ export function RoutesSitemap({
   }
   return /*#__PURE__*/_jsxs(View, {
     style: [styles.container, style],
-    children: [isSearching && /*#__PURE__*/_jsxs(View, {
+    children: [isSearching &&
+    /*#__PURE__*/
+    // The wrapper carries the handle as well as the field: a TextInput's
+    // own testID never reaches the XCUITest element tree on this RN
+    // version, so the a11y lane has nothing else to aim at.
+    _jsxs(View, {
       style: styles.searchContainer,
+      testID: "buoy-routes-sitemap-search-field",
       children: [/*#__PURE__*/_jsx(Search, {
         size: 16,
         color: night.color.textTertiary
@@ -274,10 +282,15 @@ export function RoutesSitemap({
         onChangeText: setSearchQuery,
         autoCapitalize: "none",
         autoCorrect: false,
-        autoFocus: true
+        autoFocus: true,
+        testID: "buoy-routes-sitemap-search",
+        accessibilityLabel: "Search routes"
       }), searchQuery.length > 0 && /*#__PURE__*/_jsx(TouchableOpacity, {
         onPress: () => setSearchQuery(""),
         style: styles.clearButton,
+        testID: "buoy-routes-sitemap-search-clear",
+        accessibilityRole: "button",
+        accessibilityLabel: "Clear route search",
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.clearButtonText,
           children: "\u2715"
@@ -288,12 +301,16 @@ export function RoutesSitemap({
           setIsSearching(false);
           setSearchQuery("");
         },
+        testID: "buoy-routes-sitemap-search-done",
+        accessibilityRole: "button",
+        accessibilityLabel: "Done searching routes",
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.closeSearchText,
           children: "Done"
         })
       })]
     }), /*#__PURE__*/_jsxs(ScrollView, {
+      testID: "buoy-routes-sitemap-scroll",
       style: styles.scrollView,
       contentContainerStyle: styles.scrollContent,
       children: [!isSearching && /*#__PURE__*/_jsxs(View, {
@@ -306,6 +323,8 @@ export function RoutesSitemap({
               style: [styles.iconButton, IS_DESKTOP && styles.iconButtonDesktop],
               onPress: handleGoHome,
               accessibilityLabel: "Go to home route",
+              accessibilityRole: "button",
+              testID: "buoy-routes-sitemap-home",
               children: /*#__PURE__*/_jsx(Home, {
                 size: ACTION_ICON_SIZE,
                 color: night.color.textSecondary
@@ -318,6 +337,7 @@ export function RoutesSitemap({
             style: [styles.actionWrapper, IS_DESKTOP && styles.actionWrapperDesktop],
             children: [/*#__PURE__*/_jsx(CopyButton, {
               value: copyAllData,
+              testID: "buoy-routes-sitemap-copy",
               size: IS_DESKTOP ? ACTION_ICON_SIZE : 14,
               buttonStyle: IS_DESKTOP ? styles.actionButtonHeaderDesktop : styles.actionButtonHeader
             }), /*#__PURE__*/_jsx(Text, {
@@ -330,6 +350,9 @@ export function RoutesSitemap({
               style: [styles.iconButton, IS_DESKTOP && styles.iconButtonDesktop, isRefreshing && styles.refreshButtonDisabled],
               onPress: handleManualRefresh,
               disabled: isRefreshing,
+              testID: "buoy-routes-sitemap-refresh",
+              accessibilityRole: "button",
+              accessibilityLabel: "Refresh route tree",
               children: /*#__PURE__*/_jsx(RefreshCw, {
                 size: ACTION_ICON_SIZE,
                 color: isRefreshing ? night.color.textTertiary : night.color.textSecondary
@@ -343,6 +366,9 @@ export function RoutesSitemap({
             children: [/*#__PURE__*/_jsx(TouchableOpacity, {
               style: [styles.iconButton, IS_DESKTOP && styles.iconButtonDesktop],
               onPress: () => setIsSearching(true),
+              testID: "buoy-routes-sitemap-search-open",
+              accessibilityRole: "button",
+              accessibilityLabel: "Search routes",
               children: /*#__PURE__*/_jsx(Search, {
                 size: ACTION_ICON_SIZE,
                 color: night.color.textSecondary
@@ -356,28 +382,36 @@ export function RoutesSitemap({
           style: styles.statsGrid,
           children: [/*#__PURE__*/_jsx(StatItem, {
             value: stats.total,
-            label: "Total"
+            label: "Total",
+            id: "total"
           }), /*#__PURE__*/_jsx(StatItem, {
             value: stats.static,
-            label: "Static"
+            label: "Static",
+            id: "static"
           }), /*#__PURE__*/_jsx(StatItem, {
             value: stats.dynamic,
-            label: "Dynamic"
+            label: "Dynamic",
+            id: "dynamic"
           }), /*#__PURE__*/_jsx(StatItem, {
             value: stats.catchAll,
-            label: "Catch-All"
+            label: "Catch-All",
+            id: "catch-all"
           }), /*#__PURE__*/_jsx(StatItem, {
             value: stats.layouts,
-            label: "Layouts"
+            label: "Layouts",
+            id: "layouts"
           }), /*#__PURE__*/_jsx(StatItem, {
             value: stats.groups,
-            label: "Groups"
+            label: "Groups",
+            id: "groups"
           })]
         })]
       }), displayGroups.length === 0 ? /*#__PURE__*/_jsx(View, {
         style: styles.emptyState,
+        testID: "buoy-routes-sitemap-empty",
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.emptyText,
+          testID: "buoy-routes-sitemap-empty-text",
           children: "No routes found"
         })
       }) : displayGroups.map(group => /*#__PURE__*/_jsx(RouteGroupView, {
@@ -389,11 +423,13 @@ export function RoutesSitemap({
         style: styles.metaFooter,
         children: [/*#__PURE__*/_jsx(Text, {
           style: styles.metaText,
+          testID: "buoy-routes-sitemap-updated",
           children: lastRefreshLabel
         }), /*#__PURE__*/_jsx(View, {
           style: styles.sourceBadge,
           children: /*#__PURE__*/_jsx(Text, {
             style: styles.sourceText,
+            testID: "buoy-routes-sitemap-source",
             children: sourceLabel
           })
         })]
@@ -412,12 +448,19 @@ export function RoutesSitemap({
 
 function StatItem({
   value,
-  label
+  label,
+  id
 }) {
   return /*#__PURE__*/_jsxs(View, {
     style: styles.statItem,
+    testID: `buoy-routes-stat-${id}`
+    // Fabric merges the number and its caption into this container, so a
+    // stat that isn't spelled out announces as a bare digit.
+    ,
+    accessibilityLabel: `${label}, ${value}`,
     children: [/*#__PURE__*/_jsx(Text, {
       style: styles.statValue,
+      testID: `buoy-routes-stat-${id}-value`,
       children: value
     }), /*#__PURE__*/_jsx(Text, {
       style: styles.statLabel,
@@ -437,6 +480,9 @@ function RouteGroupView({
       style: styles.groupHeader,
       onPress: onToggleExpand,
       activeOpacity: 0.7,
+      testID: sitemapGroupTestID(group.title),
+      accessibilityRole: "button",
+      accessibilityLabel: `${group.title}, ${group.routes.length} routes`,
       children: [/*#__PURE__*/_jsxs(View, {
         style: styles.groupHeaderLeft,
         children: [isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
@@ -453,6 +499,7 @@ function RouteGroupView({
         style: styles.groupBadge,
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.groupCount,
+          testID: `${sitemapGroupTestID(group.title)}-count`,
           children: group.routes.length
         })
       })]
@@ -480,6 +527,7 @@ function RouteItemView({
   const hasChildren = route.children.length > 0;
   const typeColor = getRouteTypeColor(route.type);
   const canNavigate = route.type !== "layout" && route.type !== "group";
+  const testID = sitemapRouteTestID(route.path);
 
   // Leaf routes (no children) have nothing to drill into — expanding would only
   // reveal the Copy/Go actions, so show those inline instead of behind a toggle.
@@ -489,6 +537,7 @@ function RouteItemView({
     style: [styles.routeItem, {
       marginLeft: depth * 12
     }],
+    testID: testID,
     children: /*#__PURE__*/_jsxs(View, {
       style: styles.routeCard,
       children: [/*#__PURE__*/_jsxs(View, {
@@ -497,6 +546,9 @@ function RouteItemView({
           style: styles.routeHeaderLeft,
           onPress: () => setIsExpanded(!isExpanded),
           activeOpacity: 0.7,
+          testID: `${testID}-toggle`,
+          accessibilityRole: "button",
+          accessibilityLabel: `${route.path}, ${route.type}, ${route.children.length} nested`,
           children: [/*#__PURE__*/_jsx(View, {
             style: styles.expandIndicator,
             children: isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
@@ -509,6 +561,7 @@ function RouteItemView({
           }), /*#__PURE__*/_jsx(Text, {
             style: styles.routePath,
             numberOfLines: 3,
+            testID: `${testID}-path`,
             children: route.path
           })]
         }) :
@@ -516,12 +569,19 @@ function RouteItemView({
         // Non-toggling header for leaf routes (keeps the chevron column as a
         // spacer so paths stay aligned with expandable siblings).
         _jsxs(View, {
-          style: styles.routeHeaderLeft,
+          style: styles.routeHeaderLeft
+          // `accessible` as well as the label: a plain View is not an
+          // element, so without it the label is never announced and the
+          // path is read as a bare text node with no type beside it.
+          ,
+          accessible: true,
+          accessibilityLabel: `${route.path}, ${route.type}`,
           children: [/*#__PURE__*/_jsx(View, {
             style: styles.expandIndicator
           }), /*#__PURE__*/_jsx(Text, {
             style: styles.routePath,
             numberOfLines: 3,
+            testID: `${testID}-path`,
             children: route.path
           })]
         }), /*#__PURE__*/_jsxs(View, {
@@ -530,6 +590,7 @@ function RouteItemView({
             style: styles.childCountBadge,
             children: /*#__PURE__*/_jsx(Text, {
               style: styles.childCountText,
+              testID: `${testID}-children-count`,
               children: route.children.length
             })
           }), /*#__PURE__*/_jsx(View, {
@@ -541,15 +602,20 @@ function RouteItemView({
               style: [styles.typeText, {
                 color: typeColor
               }],
+              testID: `${testID}-type`,
               children: route.type.toUpperCase()
             })
           }), /*#__PURE__*/_jsx(InlineCopyButton, {
             value: route.path,
-            buttonStyle: styles.iconAction
+            buttonStyle: styles.iconAction,
+            testID: `${testID}-copy`
           }), canNavigate && /*#__PURE__*/_jsx(TouchableOpacity, {
             style: styles.goButton,
             onPress: () => onNavigate(route),
             activeOpacity: 0.7,
+            testID: `${testID}-go`,
+            accessibilityRole: "button",
+            accessibilityLabel: `Go to ${route.path}`,
             children: /*#__PURE__*/_jsx(Text, {
               style: styles.goButtonText,
               children: "Go"

package/lib/module/utils/testIDs.js

@@ -0,0 +1,55 @@
+"use strict";
+
+/**
+ * Stable e2e handles for the routes tool.
+ *
+ * Everything in this tool is addressed by its PATH, never by a list index or a
+ * per-session id. Route events are a prepend-list whose indices shift on every
+ * navigation, the sitemap re-sorts and regroups as you search, and the stack
+ * renumbers itself on every push — the pathname is the one thing that means the
+ * same screen on the next launch, and the only thing a test can name up front.
+ *
+ * A pathname is not testID-safe as it stands (`/blog/2024/react-native-tips`,
+ * `/pokemon/[id]`), so it is slugged the way the rest of Buoy's handles read:
+ * `buoy-routes-route-blog-year-slug`.
+ */
+
+/** Any path-ish string → a testID-safe slug (`/` → `-`, brackets dropped). */
+export function pathSlug(path) {
+  return String(path).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "root";
+}
+
+/**
+ * `buoy-routes-event-row-<slug>-<visit>` for one row of the events timeline.
+ *
+ * The visit number is part of the handle because revisiting a screen is the
+ * normal case here: three trips to `/about` would otherwise be three views
+ * sharing one testID, which Detox reports as "multiple elements found" — an
+ * ambiguity error where the test meant "the second visit". It also makes the
+ * tool's own visit counting addressable rather than merely visible.
+ */
+export function eventRowTestID(pathname, visitNumber) {
+  return `buoy-routes-event-row-${pathSlug(pathname)}-${visitNumber}`;
+}
+
+/** `buoy-routes-route-<slug>` for one row of the sitemap. */
+export function sitemapRouteTestID(path) {
+  return `buoy-routes-route-${pathSlug(path)}`;
+}
+
+/** `buoy-routes-group-<slug>` for a sitemap group header. */
+export function sitemapGroupTestID(title) {
+  return `buoy-routes-group-${pathSlug(title)}`;
+}
+
+/**
+ * `buoy-routes-stack-item-<index>` for one frame of the navigation stack.
+ *
+ * The exception to addressing by path: a stack legitimately holds the same
+ * route twice (push `/route-bench/1` from `/route-bench/1`), and its whole
+ * subject is POSITION — "index 2 of 4" is what the row means, so the position
+ * is what the handle should say.
+ */
+export function stackItemTestID(index) {
+  return `buoy-routes-stack-item-${index}`;
+}

package/lib/typescript/components/NavigationStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationStack.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationStack.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAuBH,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,uBAAuB,CAAC;AAM/B,uEAAuE;AACvE,MAAM,MAAM,yBAAyB,GACjC,iBAAiB,GACjB,YAAY,GACZ,QAAQ,GACR,UAAU,CAAC;AAEf,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,GAAG,CAAC;IAEZ;;;;OAIG;IACH,aAAa,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAEnC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CACT,MAAM,EAAE,yBAAyB,EACjC,OAAO,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,KACzB,IAAI,CAAC;IAEV;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAMD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,aAAa,EACb,QAAQ,EACR,iBAAiB,GAClB,EAAE,oBAAoB,+BAgbtB"}
+{"version":3,"file":"NavigationStack.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationStack.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAuBH,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,uBAAuB,CAAC;AAO/B,uEAAuE;AACvE,MAAM,MAAM,yBAAyB,GACjC,iBAAiB,GACjB,YAAY,GACZ,QAAQ,GACR,UAAU,CAAC;AAEf,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,GAAG,CAAC;IAEZ;;;;OAIG;IACH,aAAa,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAEnC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CACT,MAAM,EAAE,yBAAyB,EACjC,OAAO,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,KACzB,IAAI,CAAC;IAEV;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAMD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,aAAa,EACb,QAAQ,EACR,iBAAiB,GAClB,EAAE,oBAAoB,+BA6dtB"}

package/lib/typescript/components/RouteEventDetail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RouteEventDetail.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventDetail.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIzD,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,gBAAgB,CAAC;IACxB,sFAAsF;IACtF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qFAAqF;IACrF,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,WAAe,EACf,UAAU,GACX,EAAE,qBAAqB,+BA+BvB"}
+{"version":3,"file":"RouteEventDetail.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventDetail.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIzD,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,gBAAgB,CAAC;IACxB,sFAAsF;IACtF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qFAAqF;IACrF,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,WAAe,EACf,UAAU,GACX,EAAE,qBAAqB,+BAmCvB"}

package/lib/typescript/components/RouteEventExpandedContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RouteEventExpandedContent.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventExpandedContent.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,WAAW,8BAA8B;IAC7C,KAAK,EAAE,gBAAgB,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAeD,wBAAgB,yBAAyB,CAAC,EACxC,KAAK,EACL,WAAW,EACX,aAAa,GACd,EAAE,8BAA8B,+BAiHhC"}
+{"version":3,"file":"RouteEventExpandedContent.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventExpandedContent.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,WAAW,8BAA8B;IAC7C,KAAK,EAAE,gBAAgB,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAeD,wBAAgB,yBAAyB,CAAC,EACxC,KAAK,EACL,WAAW,EACX,aAAa,GACd,EAAE,8BAA8B,+BA+IhC"}

package/lib/typescript/components/RouteEventItemCompact.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RouteEventItemCompact.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventItemCompact.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIzD,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,gBAAgB,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB;0DACsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AA6FD,eAAO,MAAM,qBAAqB,kEAmEhC,CAAC"}
+{"version":3,"file":"RouteEventItemCompact.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventItemCompact.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAKzD,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,gBAAgB,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB;0DACsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AA6FD,eAAO,MAAM,qBAAqB,kEA0FhC,CAAC"}