@buoy-gg/route-events 7.0.0 → 7.0.2

package/lib/commonjs/components/RouteEventDetail.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RouteEventDetail = RouteEventDetail;
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _RouteEventExpandedContent = require("./RouteEventExpandedContent");
+var _routeTemplate = require("../utils/routeTemplate");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * RouteEventDetail - Full-screen detail view for a single route event.
+ *
+ * Mirrors how the Events tool shows a detail page for every other event
+ * source: the readable route sections (reusing RouteEventExpandedContent)
+ * plus a prominent "Go to route" action. The back header and toolbar copy
+ * button are owned by the surrounding modal.
+ */
+
+function RouteEventDetail({
+  event,
+  visitNumber = 1,
+  onNavigate
+}) {
+  const routeTemplate = (0, _routeTemplate.getRouteTemplate)(event.pathname, event.segments);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      style: styles.scroll,
+      contentContainerStyle: styles.scrollContent,
+      showsVerticalScrollIndicator: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RouteEventExpandedContent.RouteEventExpandedContent, {
+        event: event,
+        visitNumber: visitNumber,
+        routeTemplate: routeTemplate
+      })
+    }), onNavigate && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.footer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        style: styles.goButton,
+        onPress: () => onNavigate(event.pathname),
+        activeOpacity: 0.8,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Navigation, {
+          size: 16,
+          color: "#FFFFFF"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.goButtonText,
+          children: "Go to route"
+        })]
+      })
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: _sharedUi.buoyColors.base
+  },
+  scroll: {
+    flex: 1
+  },
+  scrollContent: {
+    padding: 14
+  },
+  footer: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: _sharedUi.buoyColors.base,
+    borderTopWidth: 1,
+    borderTopColor: _sharedUi.buoyColors.border
+  },
+  goButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    backgroundColor: _sharedUi.buoyColors.primary,
+    paddingVertical: 12,
+    borderRadius: 8
+  },
+  goButtonText: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#FFFFFF",
+    fontFamily: "monospace",
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  }
+});

package/lib/commonjs/components/RouteEventItemCompact.js

@@ -8,6 +8,7 @@ var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _RouteEventExpandedContent = require("./RouteEventExpandedContent");
+var _routeTemplate = require("../utils/routeTemplate");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * RouteEventItemCompact - Compact list item for route events
@@ -17,29 +18,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 // Route type for color coding
 
-// Infer route template from pathname and segments
-function getRouteTemplate(pathname, segments) {
-  if (!segments || segments.length === 0) return null;
-  const templateParts = segments.map(segment => {
-    // Check if this segment appears to be a dynamic parameter
-    if (/^\d+$/.test(segment)) {
-      return "[id]";
-    }
-    if (/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(segment)) {
-      return "[id]";
-    }
-    return segment;
-  });
-  const template = "/" + templateParts.join("/");
-  return template !== pathname ? template : null;
-}
-
 // Get route type for color coding
 function getRouteType(event) {
   if (event.pathname === "/") {
     return "home";
   }
-  if (getRouteTemplate(event.pathname, event.segments)) {
+  if ((0, _routeTemplate.getRouteTemplate)(event.pathname, event.segments)) {
     return "dynamic";
   }
   if (event.params && Object.keys(event.params).length > 0) {
@@ -127,7 +111,7 @@ const RouteEventItemCompact = exports.RouteEventItemCompact = /*#__PURE__*/(0, _
   index
 }) {
   const routeType = (0, _react.useMemo)(() => getRouteType(event), [event]);
-  const routeTemplate = (0, _react.useMemo)(() => getRouteTemplate(event.pathname, event.segments), [event.pathname, event.segments]);
+  const routeTemplate = (0, _react.useMemo)(() => (0, _routeTemplate.getRouteTemplate)(event.pathname, event.segments), [event.pathname, event.segments]);
   const statusColor = (0, _react.useMemo)(() => getRouteTypeColor(routeType), [routeType]);
   const statusLabel = (0, _react.useMemo)(() => getStatusLabel(routeType), [routeType]);
   const statusSublabel = (0, _react.useMemo)(() => getStatusSublabel(event), [event]);

package/lib/commonjs/components/RouteEventsModalWithTabs.js

@@ -10,6 +10,7 @@ var _safeReactNavigation = require("../utils/safeReactNavigation");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _license = require("@buoy-gg/license");
 var _useRouteEvents = require("../hooks/useRouteEvents");
+var _RouteEventDetail = require("./RouteEventDetail");
 var _RouteFilterViewV = require("./RouteFilterViewV2");
 var _RoutesSitemap = require("./RoutesSitemap");
 var _ReactNavigationRoutes = require("./ReactNavigationRoutes");
@@ -117,6 +118,10 @@ function RouteEventsModalWithTabs({
   // isListening = enabled and store is listening
   const isListening = isListeningEnabled && isStoreListening;
   const [showFilters, setShowFilters] = (0, _react.useState)(false);
+  // Selected event drives the full-screen detail view (parity with the Events
+  // tool). null = list view. visitNumber feeds the "Visited N times" section.
+  const [selectedEvent, setSelectedEvent] = (0, _react.useState)(null);
+  const [selectedVisitNumber, setSelectedVisitNumber] = (0, _react.useState)(1);
   const [searchQuery, setSearchQuery] = (0, _react.useState)("");
   const [ignoredPatterns, setIgnoredPatterns] = (0, _react.useState)(new Set(["/_sitemap", "/api", "/__dev"]));
   const lastEventRef = (0, _react.useRef)(null);
@@ -283,6 +288,18 @@ function RouteEventsModalWithTabs({
   const handleToggleFilters = (0, _react.useCallback)(() => {
     setShowFilters(!showFilters);
   }, [showFilters]);
+  const handleSelectEvent = (0, _react.useCallback)((event, visitNumber) => {
+    setSelectedEvent(event);
+    setSelectedVisitNumber(visitNumber);
+  }, []);
+  const handleBackFromDetail = (0, _react.useCallback)(() => {
+    setSelectedEvent(null);
+  }, []);
+  const handleTabChange = (0, _react.useCallback)(tab => {
+    // Leaving the detail view whenever the tab changes.
+    setSelectedEvent(null);
+    setActiveTab(tab);
+  }, []);
 
   // Get all unique pathnames from events
   const allEventPathnames = (0, _react.useMemo)(() => {
@@ -375,6 +392,14 @@ function RouteEventsModalWithTabs({
   // No footer needed since we're showing a timeline
   const footerNode = null;
   const renderContent = () => {
+    // Detail view takes priority — a selected event replaces the list.
+    if (selectedEvent) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RouteEventDetail.RouteEventDetail, {
+        event: selectedEvent,
+        visitNumber: selectedVisitNumber,
+        onNavigate: handleNavigate
+      });
+    }
     if (activeTab === "routes") {
       return hasExpoRouter ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_RoutesSitemap.RoutesSitemap, {
         style: styles.contentWrapper
@@ -452,7 +477,8 @@ function RouteEventsModalWithTabs({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RouteEventsTimeline.RouteEventsTimeline, {
         events: visibleEvents,
         visitCounts: visitCounts,
-        onNavigate: handleNavigate
+        onNavigate: handleNavigate,
+        onSelectEvent: handleSelectEvent
       })]
     });
   };
@@ -464,7 +490,27 @@ function RouteEventsModalWithTabs({
       persistenceKey: persistenceKey,
       header: {
         showToggleButton: true,
-        customContent: showFilters ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+        customContent: selectedEvent ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+            onBack: handleBackFromDetail
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+            title: selectedEvent.pathname
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
+              value: {
+                pathname: selectedEvent.pathname,
+                previousPathname: selectedEvent.previousPathname,
+                params: selectedEvent.params,
+                segments: selectedEvent.segments,
+                timestamp: selectedEvent.timestamp,
+                timestampISO: new Date(selectedEvent.timestamp).toISOString(),
+                timeSincePrevious: selectedEvent.timeSincePrevious,
+                visitNumber: selectedVisitNumber
+              },
+              buttonStyle: styles.iconButton
+            })
+          })]
+        }) : showFilters ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
             onBack: () => setShowFilters(false)
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
@@ -488,7 +534,7 @@ function RouteEventsModalWithTabs({
                 label: "Stack"
               }],
               activeTab: activeTab,
-              onTabChange: tab => setActiveTab(tab)
+              onTabChange: tab => handleTabChange(tab)
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
             children: [activeTab === "stack" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {

package/lib/commonjs/components/RouteEventsTimeline.js

@@ -15,18 +15,21 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Shows events in the order they happened (most recent first),
  * providing a clear history of navigation actions.
  *
- * Uses two-level expansion pattern matching network/storage components.
+ * Tapping a row opens the full-screen detail view (parity with the Events
+ * tool) via onSelectEvent — rows no longer expand inline.
  */
 
 function RouteEventsTimeline({
   events,
   visitCounts,
-  onNavigate
+  onNavigate,
+  onSelectEvent
 }) {
-  const [expandedIndex, setExpandedIndex] = (0, _react.useState)(null);
   const handleItemPress = (0, _react.useCallback)(index => {
-    setExpandedIndex(prev => prev === index ? null : index);
-  }, []);
+    const event = events[index];
+    if (!event) return;
+    onSelectEvent(event, visitCounts.get(index) || 1);
+  }, [events, visitCounts, onSelectEvent]);
   if (events.length === 0) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.emptyState,
@@ -46,8 +49,7 @@ function RouteEventsTimeline({
     /*#__PURE__*/
     // Virtualized — the previous ScrollView + map mounted ALL events (at
     // the 500-event cap that measured 32.8 JS FPS during an idle dwell,
-    // tool-bench 2026-07-06). extraData re-renders visible rows when the
-    // expanded row changes.
+    // tool-bench 2026-07-06).
     (0, _jsxRuntime.jsx)(_reactNative.FlatList, {
       contentContainerStyle: styles.listContent,
       data: events
@@ -56,14 +58,13 @@ function RouteEventsTimeline({
       // route events on every bounce; tool-bench 2026-07-06).
       ,
       keyExtractor: event => `${event.timestamp}-${event.pathname}`,
-      extraData: expandedIndex,
       renderItem: ({
         item: event,
         index
       }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_RouteEventItemCompact.RouteEventItemCompact, {
         event: event,
         visitNumber: visitCounts.get(index) || 1,
-        isExpanded: expandedIndex === index,
+        isExpanded: false,
         index: index,
         onPress: handleItemPress,
         onNavigate: onNavigate

package/lib/commonjs/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "NavigationStack", {
     return _NavigationStack.NavigationStack;
   }
 });
+Object.defineProperty(exports, "RouteEventDetail", {
+  enumerable: true,
+  get: function () {
+    return _RouteEventDetail.RouteEventDetail;
+  }
+});
 Object.defineProperty(exports, "RouteEventExpandedContent", {
   enumerable: true,
   get: function () {
@@ -130,6 +136,7 @@ var _RoutesSitemap = require("./components/RoutesSitemap");
 var _NavigationStack = require("./components/NavigationStack");
 var _RouteEventItemCompact = require("./components/RouteEventItemCompact");
 var _RouteEventExpandedContent = require("./components/RouteEventExpandedContent");
+var _RouteEventDetail = require("./components/RouteEventDetail");
 var _useRouteObserver = require("./useRouteObserver");
 var _useRouteObserverReactNavigation = require("./useRouteObserverReactNavigation");
 var _useRouteEvents = require("./hooks/useRouteEvents");

package/lib/commonjs/utils/routeTemplate.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRouteTemplate = getRouteTemplate;
+/**
+ * Infer a route template from a concrete pathname and its segments.
+ * Dynamic segments (numeric ids, UUIDs) collapse to `[id]`, so
+ * `/products/42` becomes `/products/[id]`. Returns null when the template
+ * matches the pathname (i.e. the route is fully static).
+ */
+function getRouteTemplate(pathname, segments) {
+  if (!segments || segments.length === 0) return null;
+  const templateParts = segments.map(segment => {
+    // Numeric ids
+    if (/^\d+$/.test(segment)) {
+      return "[id]";
+    }
+    // UUIDs
+    if (/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(segment)) {
+      return "[id]";
+    }
+    return segment;
+  });
+  const template = "/" + templateParts.join("/");
+  return template !== pathname ? template : null;
+}

package/lib/module/components/RouteEventDetail.js

@@ -0,0 +1,86 @@
+"use strict";
+
+/**
+ * RouteEventDetail - Full-screen detail view for a single route event.
+ *
+ * Mirrors how the Events tool shows a detail page for every other event
+ * source: the readable route sections (reusing RouteEventExpandedContent)
+ * plus a prominent "Go to route" action. The back header and toolbar copy
+ * button are owned by the surrounding modal.
+ */
+
+import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native";
+import { Navigation, buoyColors } from "@buoy-gg/shared-ui";
+import { RouteEventExpandedContent } from "./RouteEventExpandedContent";
+import { getRouteTemplate } from "../utils/routeTemplate";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function RouteEventDetail({
+  event,
+  visitNumber = 1,
+  onNavigate
+}) {
+  const routeTemplate = getRouteTemplate(event.pathname, event.segments);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(ScrollView, {
+      style: styles.scroll,
+      contentContainerStyle: styles.scrollContent,
+      showsVerticalScrollIndicator: true,
+      children: /*#__PURE__*/_jsx(RouteEventExpandedContent, {
+        event: event,
+        visitNumber: visitNumber,
+        routeTemplate: routeTemplate
+      })
+    }), onNavigate && /*#__PURE__*/_jsx(View, {
+      style: styles.footer,
+      children: /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.goButton,
+        onPress: () => onNavigate(event.pathname),
+        activeOpacity: 0.8,
+        children: [/*#__PURE__*/_jsx(Navigation, {
+          size: 16,
+          color: "#FFFFFF"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.goButtonText,
+          children: "Go to route"
+        })]
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: buoyColors.base
+  },
+  scroll: {
+    flex: 1
+  },
+  scrollContent: {
+    padding: 14
+  },
+  footer: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: buoyColors.base,
+    borderTopWidth: 1,
+    borderTopColor: buoyColors.border
+  },
+  goButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    backgroundColor: buoyColors.primary,
+    paddingVertical: 12,
+    borderRadius: 8
+  },
+  goButtonText: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#FFFFFF",
+    fontFamily: "monospace",
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  }
+});

package/lib/module/components/RouteEventItemCompact.js

@@ -10,26 +10,10 @@ import { memo, useMemo } from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { CompactRow, RelativeTime, buoyColors } from "@buoy-gg/shared-ui";
 import { RouteEventExpandedContent } from "./RouteEventExpandedContent";
+import { getRouteTemplate } from "../utils/routeTemplate";
 
 // Route type for color coding
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Infer route template from pathname and segments
-function getRouteTemplate(pathname, segments) {
-  if (!segments || segments.length === 0) return null;
-  const templateParts = segments.map(segment => {
-    // Check if this segment appears to be a dynamic parameter
-    if (/^\d+$/.test(segment)) {
-      return "[id]";
-    }
-    if (/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(segment)) {
-      return "[id]";
-    }
-    return segment;
-  });
-  const template = "/" + templateParts.join("/");
-  return template !== pathname ? template : null;
-}
-
 // Get route type for color coding
 function getRouteType(event) {
   if (event.pathname === "/") {

package/lib/module/components/RouteEventsModalWithTabs.js

@@ -16,6 +16,7 @@ import { useIsPro } from "@buoy-gg/license";
 // Free tier limit for route events
 const FREE_TIER_EVENT_LIMIT = 3;
 import { useRouteEvents } from "../hooks/useRouteEvents";
+import { RouteEventDetail } from "./RouteEventDetail";
 import { RouteFilterViewV2 } from "./RouteFilterViewV2";
 import { RoutesSitemap } from "./RoutesSitemap";
 import { ReactNavigationRoutes } from "./ReactNavigationRoutes";
@@ -116,6 +117,10 @@ export function RouteEventsModalWithTabs({
   // isListening = enabled and store is listening
   const isListening = isListeningEnabled && isStoreListening;
   const [showFilters, setShowFilters] = useState(false);
+  // Selected event drives the full-screen detail view (parity with the Events
+  // tool). null = list view. visitNumber feeds the "Visited N times" section.
+  const [selectedEvent, setSelectedEvent] = useState(null);
+  const [selectedVisitNumber, setSelectedVisitNumber] = useState(1);
   const [searchQuery, setSearchQuery] = useState("");
   const [ignoredPatterns, setIgnoredPatterns] = useState(new Set(["/_sitemap", "/api", "/__dev"]));
   const lastEventRef = useRef(null);
@@ -282,6 +287,18 @@ export function RouteEventsModalWithTabs({
   const handleToggleFilters = useCallback(() => {
     setShowFilters(!showFilters);
   }, [showFilters]);
+  const handleSelectEvent = useCallback((event, visitNumber) => {
+    setSelectedEvent(event);
+    setSelectedVisitNumber(visitNumber);
+  }, []);
+  const handleBackFromDetail = useCallback(() => {
+    setSelectedEvent(null);
+  }, []);
+  const handleTabChange = useCallback(tab => {
+    // Leaving the detail view whenever the tab changes.
+    setSelectedEvent(null);
+    setActiveTab(tab);
+  }, []);
 
   // Get all unique pathnames from events
   const allEventPathnames = useMemo(() => {
@@ -374,6 +391,14 @@ export function RouteEventsModalWithTabs({
   // No footer needed since we're showing a timeline
   const footerNode = null;
   const renderContent = () => {
+    // Detail view takes priority — a selected event replaces the list.
+    if (selectedEvent) {
+      return /*#__PURE__*/_jsx(RouteEventDetail, {
+        event: selectedEvent,
+        visitNumber: selectedVisitNumber,
+        onNavigate: handleNavigate
+      });
+    }
     if (activeTab === "routes") {
       return hasExpoRouter ? /*#__PURE__*/_jsx(RoutesSitemap, {
         style: styles.contentWrapper
@@ -451,7 +476,8 @@ export function RouteEventsModalWithTabs({
       }), /*#__PURE__*/_jsx(RouteEventsTimeline, {
         events: visibleEvents,
         visitCounts: visitCounts,
-        onNavigate: handleNavigate
+        onNavigate: handleNavigate,
+        onSelectEvent: handleSelectEvent
       })]
     });
   };
@@ -463,7 +489,27 @@ export function RouteEventsModalWithTabs({
       persistenceKey: persistenceKey,
       header: {
         showToggleButton: true,
-        customContent: showFilters ? /*#__PURE__*/_jsxs(ModalHeader, {
+        customContent: selectedEvent ? /*#__PURE__*/_jsxs(ModalHeader, {
+          children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+            onBack: handleBackFromDetail
+          }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+            title: selectedEvent.pathname
+          }), /*#__PURE__*/_jsx(ModalHeader.Actions, {
+            children: /*#__PURE__*/_jsx(ToolbarCopyButton, {
+              value: {
+                pathname: selectedEvent.pathname,
+                previousPathname: selectedEvent.previousPathname,
+                params: selectedEvent.params,
+                segments: selectedEvent.segments,
+                timestamp: selectedEvent.timestamp,
+                timestampISO: new Date(selectedEvent.timestamp).toISOString(),
+                timeSincePrevious: selectedEvent.timeSincePrevious,
+                visitNumber: selectedVisitNumber
+              },
+              buttonStyle: styles.iconButton
+            })
+          })]
+        }) : showFilters ? /*#__PURE__*/_jsxs(ModalHeader, {
           children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
             onBack: () => setShowFilters(false)
           }), /*#__PURE__*/_jsx(ModalHeader.Content, {
@@ -487,7 +533,7 @@ export function RouteEventsModalWithTabs({
                 label: "Stack"
               }],
               activeTab: activeTab,
-              onTabChange: tab => setActiveTab(tab)
+              onTabChange: tab => handleTabChange(tab)
             })
           }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
             children: [activeTab === "stack" && /*#__PURE__*/_jsx(ToolbarCopyButton, {

package/lib/module/components/RouteEventsTimeline.js

@@ -6,10 +6,11 @@
  * Shows events in the order they happened (most recent first),
  * providing a clear history of navigation actions.
  *
- * Uses two-level expansion pattern matching network/storage components.
+ * Tapping a row opens the full-screen detail view (parity with the Events
+ * tool) via onSelectEvent — rows no longer expand inline.
  */
 
-import { useCallback, useState } from "react";
+import { useCallback } from "react";
 import { View, Text, FlatList, StyleSheet } from "react-native";
 import { Navigation, buoyColors } from "@buoy-gg/shared-ui";
 import { RouteEventItemCompact } from "./RouteEventItemCompact";
@@ -17,12 +18,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function RouteEventsTimeline({
   events,
   visitCounts,
-  onNavigate
+  onNavigate,
+  onSelectEvent
 }) {
-  const [expandedIndex, setExpandedIndex] = useState(null);
   const handleItemPress = useCallback(index => {
-    setExpandedIndex(prev => prev === index ? null : index);
-  }, []);
+    const event = events[index];
+    if (!event) return;
+    onSelectEvent(event, visitCounts.get(index) || 1);
+  }, [events, visitCounts, onSelectEvent]);
   if (events.length === 0) {
     return /*#__PURE__*/_jsxs(View, {
       style: styles.emptyState,
@@ -42,8 +45,7 @@ export function RouteEventsTimeline({
     /*#__PURE__*/
     // Virtualized — the previous ScrollView + map mounted ALL events (at
     // the 500-event cap that measured 32.8 JS FPS during an idle dwell,
-    // tool-bench 2026-07-06). extraData re-renders visible rows when the
-    // expanded row changes.
+    // tool-bench 2026-07-06).
     _jsx(FlatList, {
       contentContainerStyle: styles.listContent,
       data: events
@@ -52,14 +54,13 @@ export function RouteEventsTimeline({
       // route events on every bounce; tool-bench 2026-07-06).
       ,
       keyExtractor: event => `${event.timestamp}-${event.pathname}`,
-      extraData: expandedIndex,
       renderItem: ({
         item: event,
         index
       }) => /*#__PURE__*/_jsx(RouteEventItemCompact, {
         event: event,
         visitNumber: visitCounts.get(index) || 1,
-        isExpanded: expandedIndex === index,
+        isExpanded: false,
         index: index,
         onPress: handleItemPress,
         onNavigate: onNavigate

package/lib/module/index.js

@@ -30,6 +30,7 @@ export { RoutesSitemap } from "./components/RoutesSitemap";
 export { NavigationStack } from "./components/NavigationStack";
 export { RouteEventItemCompact } from "./components/RouteEventItemCompact";
 export { RouteEventExpandedContent } from "./components/RouteEventExpandedContent";
+export { RouteEventDetail } from "./components/RouteEventDetail";
 // =============================================================================
 // HOOKS (For consuming route data)
 // =============================================================================

package/lib/module/utils/routeTemplate.js

@@ -0,0 +1,24 @@
+"use strict";
+
+/**
+ * Infer a route template from a concrete pathname and its segments.
+ * Dynamic segments (numeric ids, UUIDs) collapse to `[id]`, so
+ * `/products/42` becomes `/products/[id]`. Returns null when the template
+ * matches the pathname (i.e. the route is fully static).
+ */
+export function getRouteTemplate(pathname, segments) {
+  if (!segments || segments.length === 0) return null;
+  const templateParts = segments.map(segment => {
+    // Numeric ids
+    if (/^\d+$/.test(segment)) {
+      return "[id]";
+    }
+    // UUIDs
+    if (/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(segment)) {
+      return "[id]";
+    }
+    return segment;
+  });
+  const template = "/" + templateParts.join("/");
+  return template !== pathname ? template : null;
+}

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

@@ -0,0 +1,18 @@
+/**
+ * RouteEventDetail - Full-screen detail view for a single route event.
+ *
+ * Mirrors how the Events tool shows a detail page for every other event
+ * source: the readable route sections (reusing RouteEventExpandedContent)
+ * plus a prominent "Go to route" action. The back header and toolbar copy
+ * button are owned by the surrounding modal.
+ */
+import type { RouteChangeEvent } from "../RouteObserver";
+export interface RouteEventDetailProps {
+    event: RouteChangeEvent;
+    /** How many times this route has been visited (hides "Visited N times" when <= 1). */
+    visitNumber?: number;
+    /** Navigate the host app to this route. When omitted the action button is hidden. */
+    onNavigate?: (pathname: string) => void;
+}
+export declare function RouteEventDetail({ event, visitNumber, onNavigate, }: RouteEventDetailProps): import("react").JSX.Element;
+//# sourceMappingURL=RouteEventDetail.d.ts.map

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

@@ -0,0 +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"}