@buoy-gg/route-events 1.7.2

package/lib/module/components/RouteEventsModalWithTabs.js

@@ -0,0 +1,557 @@
+"use strict";
+
+import { useState, useCallback, useEffect, useRef, useMemo } from "react";
+import { Text, View, TouchableOpacity, StyleSheet, Alert } from "react-native";
+import { useRouter } from "expo-router";
+import { JsModal, ModalHeader, TabSelector, formatRelativeTime, devToolsStorageKeys, Navigation, Pause, Play, Trash2, Filter, SearchBar, safeGetItem, safeSetItem, ToolbarCopyButton, Lock, ProUpgradeModal, buoyColors } from "@buoy-gg/shared-ui";
+
+// Lazy load the license hooks to avoid circular dependencies
+let _useIsPro = null;
+let _licenseLoadAttempted = false;
+function loadLicenseModule() {
+  if (_licenseLoadAttempted) return;
+  _licenseLoadAttempted = true;
+  try {
+    const mod = require("@buoy-gg/license");
+    if (mod) {
+      _useIsPro = mod.useIsPro ?? null;
+    }
+  } catch {
+    // License package not available
+  }
+}
+function getUseIsPro() {
+  loadLicenseModule();
+  return _useIsPro ?? (() => false);
+}
+
+// Free tier limit for route events
+const FREE_TIER_EVENT_LIMIT = 3;
+import { routeObserver as defaultRouteObserver } from "../RouteObserver";
+import { RouteFilterViewV2 } from "./RouteFilterViewV2";
+import { RoutesSitemap } from "./RoutesSitemap";
+import { NavigationStack } from "./NavigationStack";
+import { RouteEventsTimeline } from "./RouteEventsTimeline";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function RouteEventsModalWithTabs({
+  visible,
+  onClose,
+  onBack,
+  onMinimize,
+  enableSharedModalDimensions = false,
+  routeObserver = defaultRouteObserver
+}) {
+  const router = useRouter();
+  const [activeTab, setActiveTab] = useState("events");
+  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+
+  // Check Pro status internally
+  const useIsPro = getUseIsPro();
+  const isPro = useIsPro();
+
+  // NOTE: Route tracking requires <RouteTracker /> to be placed inside the navigation tree.
+  // The useRouteObserver hook uses expo-router hooks that only work inside Stack/Tabs/Slot.
+  // See the RouteTracker component export for easy setup.
+
+  // Event Listener state
+  const [events, setEvents] = useState([]);
+  const [isListening, setIsListening] = useState(false);
+  const [showFilters, setShowFilters] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [ignoredPatterns, setIgnoredPatterns] = useState(new Set(["/_sitemap", "/api", "/__dev"]));
+  const lastEventRef = useRef(null);
+  const hasLoadedFilters = useRef(false);
+  const hasLoadedTabState = useRef(false);
+  const hasLoadedMonitoringState = useRef(false);
+  const handleModeChange = useCallback(_mode => {
+    // Mode changes handled by JsModal
+  }, []);
+  const handleNavigate = useCallback(pathname => {
+    try {
+      router.push(pathname);
+    } catch (error) {
+      Alert.alert("Navigation Error", String(error));
+    }
+  }, [router]);
+
+  // Load persisted tab state on mount
+  useEffect(() => {
+    if (!visible || hasLoadedTabState.current) return;
+    const loadTabState = async () => {
+      try {
+        const storedTab = await safeGetItem(devToolsStorageKeys.routeEvents.activeTab());
+        if (storedTab && (storedTab === "routes" || storedTab === "events")) {
+          setActiveTab(storedTab);
+        }
+        hasLoadedTabState.current = true;
+      } catch (error) {
+        // Failed to load tab state
+      }
+    };
+    loadTabState();
+  }, [visible]);
+
+  // Load persisted monitoring state on mount
+  useEffect(() => {
+    if (!visible || hasLoadedMonitoringState.current) return;
+    const loadMonitoringState = async () => {
+      try {
+        const storedMonitoring = await safeGetItem(devToolsStorageKeys.routeEvents.isMonitoring());
+        if (storedMonitoring !== null) {
+          const shouldMonitor = storedMonitoring === "true";
+          setIsListening(shouldMonitor);
+        }
+        hasLoadedMonitoringState.current = true;
+      } catch (error) {
+        // Failed to load monitoring state
+      }
+    };
+    loadMonitoringState();
+  }, [visible]);
+
+  // Save tab state when it changes
+  useEffect(() => {
+    if (!hasLoadedTabState.current) return;
+    const saveTabState = async () => {
+      try {
+        await safeSetItem(devToolsStorageKeys.routeEvents.activeTab(), activeTab);
+      } catch (error) {
+        // Failed to save tab state
+      }
+    };
+    saveTabState();
+  }, [activeTab]);
+
+  // Save monitoring state when it changes
+  useEffect(() => {
+    if (!hasLoadedMonitoringState.current) return;
+    const saveMonitoringState = async () => {
+      try {
+        await safeSetItem(devToolsStorageKeys.routeEvents.isMonitoring(), isListening.toString());
+      } catch (error) {
+        // Failed to save monitoring state
+      }
+    };
+    saveMonitoringState();
+  }, [isListening]);
+
+  // Load persisted filters on mount
+  useEffect(() => {
+    if (!visible || hasLoadedFilters.current) return;
+    const loadFilters = async () => {
+      try {
+        const storedFilters = await safeGetItem(devToolsStorageKeys.routeEvents.eventFilters());
+        if (storedFilters) {
+          const filters = JSON.parse(storedFilters);
+          setIgnoredPatterns(new Set(filters));
+        }
+        hasLoadedFilters.current = true;
+      } catch (error) {
+        // Failed to load filters
+      }
+    };
+    loadFilters();
+  }, [visible]);
+
+  // Save filters when they change
+  useEffect(() => {
+    if (!hasLoadedFilters.current) return;
+    const saveFilters = async () => {
+      try {
+        const filters = Array.from(ignoredPatterns);
+        await safeSetItem(devToolsStorageKeys.routeEvents.eventFilters(), JSON.stringify(filters));
+      } catch (error) {
+        // Failed to save filters
+      }
+    };
+    saveFilters();
+  }, [ignoredPatterns]);
+
+  // Event listener setup - keeps capturing even when minimized
+  useEffect(() => {
+    if (!isListening) return;
+
+    // Set up event listener
+    const unsubscribe = routeObserver.addListener(event => {
+      lastEventRef.current = event;
+      setEvents(prev => {
+        const updated = [event, ...prev];
+        return updated.slice(0, 500);
+      });
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [isListening, routeObserver]);
+  const handleToggleListening = useCallback(() => {
+    setIsListening(prev => !prev);
+  }, []);
+  const handleClearEvents = useCallback(() => {
+    if (events.length === 0) return;
+
+    // Gate clear behind Pro
+    if (!isPro) {
+      setShowUpgradeModal(true);
+      return;
+    }
+    Alert.alert("Clear Events", `Clear ${events.length} event${events.length !== 1 ? "s" : ""}?`, [{
+      text: "Cancel",
+      style: "cancel"
+    }, {
+      text: "Clear",
+      style: "destructive",
+      onPress: () => setEvents([])
+    }]);
+  }, [events.length, isPro]);
+  const handleTogglePattern = useCallback(pattern => {
+    setIgnoredPatterns(prev => {
+      const next = new Set(prev);
+      if (next.has(pattern)) {
+        next.delete(pattern);
+      } else {
+        next.add(pattern);
+      }
+      return next;
+    });
+  }, []);
+  const handleAddPattern = useCallback(pattern => {
+    setIgnoredPatterns(prev => new Set([...prev, pattern]));
+  }, []);
+  const handleToggleFilters = useCallback(() => {
+    setShowFilters(!showFilters);
+  }, [showFilters]);
+
+  // Get all unique pathnames from events
+  const allEventPathnames = useMemo(() => {
+    const pathnames = new Set();
+    events.forEach(event => {
+      if (event.pathname) {
+        pathnames.add(event.pathname);
+      }
+    });
+    return Array.from(pathnames).sort();
+  }, [events]);
+
+  // Filter events based on ignored patterns and search query
+  const filteredEvents = useMemo(() => {
+    return events.filter(event => {
+      if (!event.pathname) return false;
+
+      // Filter out pathnames that match ignored patterns
+      const shouldIgnore = Array.from(ignoredPatterns).some(pattern => event.pathname.includes(pattern));
+      if (shouldIgnore) return false;
+
+      // Filter by search query (search in pathname and param values)
+      if (searchQuery.trim()) {
+        const query = searchQuery.toLowerCase();
+        const pathnameMatch = event.pathname.toLowerCase().includes(query);
+        const paramsMatch = Object.entries(event.params || {}).some(([key, value]) => {
+          const valueStr = Array.isArray(value) ? value.join(" ") : value;
+          return key.toLowerCase().includes(query) || valueStr.toLowerCase().includes(query);
+        });
+        return pathnameMatch || paramsMatch;
+      }
+      return true;
+    });
+  }, [events, ignoredPatterns, searchQuery]);
+
+  // Limit visible events for free tier
+  const visibleEvents = useMemo(() => {
+    if (isPro) return filteredEvents;
+    return filteredEvents.slice(0, FREE_TIER_EVENT_LIMIT);
+  }, [filteredEvents, isPro]);
+
+  // Calculate locked event count
+  const lockedEventCount = useMemo(() => {
+    if (isPro) return 0;
+    return Math.max(0, filteredEvents.length - FREE_TIER_EVENT_LIMIT);
+  }, [filteredEvents.length, isPro]);
+
+  // Calculate visit counts for each route (for duplicate detection)
+  const visitCounts = useMemo(() => {
+    const counts = new Map();
+    const eventVisitNumbers = new Map();
+
+    // Iterate from oldest to newest to assign visit numbers correctly
+    for (let i = events.length - 1; i >= 0; i--) {
+      const event = events[i];
+      const currentCount = counts.get(event.pathname) || 0;
+      const visitNumber = currentCount + 1;
+      counts.set(event.pathname, visitNumber);
+      eventVisitNumbers.set(i, visitNumber);
+    }
+    return eventVisitNumbers;
+  }, [events]);
+
+  // Prepare copy data - memoized so it only rebuilds when dependencies change
+  const copyAllEventsData = useMemo(() => {
+    return {
+      summary: {
+        total: events.length,
+        filtered: filteredEvents.length,
+        listening: isListening,
+        ignoredPatterns: Array.from(ignoredPatterns),
+        timestamp: new Date().toISOString()
+      },
+      events: filteredEvents.map((event, index) => ({
+        index,
+        visitNumber: visitCounts.get(index) || 1,
+        pathname: event.pathname,
+        timestamp: event.timestamp,
+        timestampRelative: formatRelativeTime(event.timestamp),
+        params: event.params,
+        segments: event.segments,
+        previousPathname: event.previousPathname,
+        timeSincePrevious: event.timeSincePrevious
+      }))
+    };
+  }, [events.length, filteredEvents, isListening, ignoredPatterns, visitCounts]);
+  if (!visible) return null;
+  const persistenceKey = enableSharedModalDimensions ? devToolsStorageKeys.modal.root() : devToolsStorageKeys.routeEvents.modal();
+
+  // No footer needed since we're showing a timeline
+  const footerNode = null;
+  const renderContent = () => {
+    if (activeTab === "routes") {
+      return /*#__PURE__*/_jsx(RoutesSitemap, {
+        style: styles.contentWrapper
+      });
+    }
+    if (activeTab === "stack") {
+      return /*#__PURE__*/_jsx(NavigationStack, {
+        style: styles.contentWrapper
+      });
+    }
+
+    // Events tab content
+    if (showFilters) {
+      return /*#__PURE__*/_jsx(RouteFilterViewV2, {
+        ignoredPatterns: ignoredPatterns,
+        onTogglePattern: handleTogglePattern,
+        onAddPattern: handleAddPattern,
+        availablePathnames: allEventPathnames
+      });
+    }
+
+    // Show search bar if there are events (even if filtered to 0)
+    const showSearchBar = events.length > 0;
+    if (filteredEvents.length === 0) {
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.contentWrapper,
+        children: [showSearchBar && /*#__PURE__*/_jsx(View, {
+          style: styles.searchContainer,
+          children: /*#__PURE__*/_jsx(SearchBar, {
+            value: searchQuery,
+            onChange: setSearchQuery,
+            placeholder: "Search pathname or params..."
+          })
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.emptyState,
+          children: [/*#__PURE__*/_jsx(Navigation, {
+            size: 48,
+            color: buoyColors.textMuted
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.emptyTitle,
+            children: searchQuery.trim() ? "No matching events" : isListening ? "No route events yet" : "Event listener is paused"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.emptySubtitle,
+            children: searchQuery.trim() ? "Try a different search term" : isListening ? "Navigation events will appear here" : "Press play to start monitoring"
+          })]
+        })]
+      });
+    }
+
+    // Show chronological timeline of events
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.contentWrapper,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.searchContainer,
+        children: /*#__PURE__*/_jsx(SearchBar, {
+          value: searchQuery,
+          onChange: setSearchQuery,
+          placeholder: "Search pathname or params..."
+        })
+      }), lockedEventCount > 0 && /*#__PURE__*/_jsxs(View, {
+        style: styles.lockedEventsBanner,
+        children: [/*#__PURE__*/_jsx(Lock, {
+          size: 14,
+          color: buoyColors.warning
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.lockedEventsBannerText,
+          children: [lockedEventCount, " older ", lockedEventCount === 1 ? 'event' : 'events', " locked"]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.lockedEventsBannerSubtext,
+          children: "Upgrade to Pro for full history"
+        })]
+      }), /*#__PURE__*/_jsx(RouteEventsTimeline, {
+        events: visibleEvents,
+        visitCounts: visitCounts,
+        onNavigate: handleNavigate
+      })]
+    });
+  };
+  return /*#__PURE__*/_jsxs(JsModal, {
+    visible: visible,
+    onClose: onClose,
+    onMinimize: onMinimize,
+    persistenceKey: persistenceKey,
+    header: {
+      showToggleButton: true,
+      customContent: showFilters ? /*#__PURE__*/_jsxs(ModalHeader, {
+        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+          onBack: () => setShowFilters(false)
+        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: "Filters"
+        })]
+      }) : /*#__PURE__*/_jsxs(ModalHeader, {
+        children: [onBack && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
+          onBack: onBack
+        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: "",
+          noMargin: true,
+          children: /*#__PURE__*/_jsx(TabSelector, {
+            tabs: [{
+              key: "routes",
+              label: "Routes"
+            }, {
+              key: "events",
+              label: `Events${events.length > 0 && activeTab !== "events" ? ` (${events.length})` : ""}`
+            }, {
+              key: "stack",
+              label: "Stack"
+            }],
+            activeTab: activeTab,
+            onTabChange: tab => setActiveTab(tab)
+          })
+        }), /*#__PURE__*/_jsx(ModalHeader.Actions, {
+          children: activeTab === "events" && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(ToolbarCopyButton, {
+              value: copyAllEventsData,
+              buttonStyle: styles.iconButton
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: handleToggleFilters,
+              style: [styles.iconButton, ignoredPatterns.size > 0 && styles.activeFilterButton],
+              children: /*#__PURE__*/_jsx(Filter, {
+                size: 14,
+                color: ignoredPatterns.size > 0 ? buoyColors.primary : buoyColors.textSecondary
+              })
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: handleToggleListening,
+              style: [styles.iconButton, isListening && styles.activeButton],
+              children: isListening ? /*#__PURE__*/_jsx(Pause, {
+                size: 14,
+                color: buoyColors.success
+              }) : /*#__PURE__*/_jsx(Play, {
+                size: 14,
+                color: buoyColors.success
+              })
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: handleClearEvents,
+              style: styles.iconButton,
+              children: /*#__PURE__*/_jsx(Trash2, {
+                size: 14,
+                color: buoyColors.error
+              })
+            })]
+          })
+        })]
+      })
+    },
+    onModeChange: handleModeChange,
+    enablePersistence: true,
+    initialMode: "bottomSheet",
+    enableGlitchEffects: true,
+    styles: {},
+    footer: footerNode,
+    footerHeight: footerNode ? 68 : 0,
+    children: [renderContent(), /*#__PURE__*/_jsx(ProUpgradeModal, {
+      visible: showUpgradeModal,
+      onClose: () => setShowUpgradeModal(false),
+      featureName: "Route Event Management"
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  iconButton: {
+    padding: 6,
+    borderRadius: 6,
+    backgroundColor: buoyColors.input
+  },
+  activeButton: {
+    backgroundColor: buoyColors.success + "1A"
+  },
+  activeFilterButton: {
+    backgroundColor: buoyColors.primary + "1A"
+  },
+  emptyState: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 32
+  },
+  emptyTitle: {
+    color: buoyColors.text,
+    fontSize: 16,
+    fontWeight: "600",
+    marginTop: 16,
+    marginBottom: 8,
+    fontFamily: "monospace",
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  },
+  emptySubtitle: {
+    color: buoyColors.textSecondary,
+    fontSize: 14,
+    textAlign: "center",
+    fontFamily: "monospace"
+  },
+  contentWrapper: {
+    flex: 1
+  },
+  statsContainer: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    backgroundColor: buoyColors.card,
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.border
+  },
+  statsText: {
+    fontSize: 11,
+    color: buoyColors.textSecondary,
+    fontFamily: "monospace",
+    textAlign: "center"
+  },
+  statsWarning: {
+    color: buoyColors.warning,
+    fontWeight: "600"
+  },
+  searchContainer: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    backgroundColor: buoyColors.base
+  },
+  lockedEventsBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    backgroundColor: buoyColors.warning + "15",
+    borderWidth: 1,
+    borderColor: buoyColors.warning + "30",
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    marginHorizontal: 16,
+    marginBottom: 8
+  },
+  lockedEventsBannerText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: buoyColors.warning,
+    fontFamily: "monospace"
+  },
+  lockedEventsBannerSubtext: {
+    fontSize: 11,
+    color: buoyColors.textSecondary,
+    marginLeft: "auto"
+  }
+});

package/lib/module/components/RouteEventsTimeline.js

@@ -0,0 +1,78 @@
+"use strict";
+
+/**
+ * RouteEventsTimeline - Chronological timeline of route navigation events
+ *
+ * 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.
+ */
+
+import { useCallback, useState } from "react";
+import { View, Text, ScrollView, StyleSheet } from "react-native";
+import { Navigation, buoyColors } from "@buoy-gg/shared-ui";
+import { RouteEventItemCompact } from "./RouteEventItemCompact";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function RouteEventsTimeline({
+  events,
+  visitCounts,
+  onNavigate
+}) {
+  const [expandedIndex, setExpandedIndex] = useState(null);
+  const handleItemPress = useCallback(index => {
+    setExpandedIndex(prev => prev === index ? null : index);
+  }, []);
+  if (events.length === 0) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.emptyState,
+      children: [/*#__PURE__*/_jsx(Navigation, {
+        size: 48,
+        color: buoyColors.textMuted
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.emptyTitle,
+        children: "No events yet"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.emptySubtitle,
+        children: "Navigation events will appear here"
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(ScrollView, {
+    contentContainerStyle: styles.listContent,
+    children: events.map((event, index) => /*#__PURE__*/_jsx(RouteEventItemCompact, {
+      event: event,
+      visitNumber: visitCounts.get(index) || 1,
+      isExpanded: expandedIndex === index,
+      onPress: () => handleItemPress(index),
+      onNavigate: onNavigate
+    }, `event-${index}-${event.timestamp}`))
+  });
+}
+const styles = StyleSheet.create({
+  listContent: {
+    paddingVertical: 8
+  },
+  emptyState: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 32
+  },
+  emptyTitle: {
+    color: buoyColors.text,
+    fontSize: 16,
+    fontWeight: "600",
+    marginTop: 16,
+    marginBottom: 8,
+    fontFamily: "monospace",
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  },
+  emptySubtitle: {
+    color: buoyColors.textSecondary,
+    fontSize: 14,
+    textAlign: "center",
+    fontFamily: "monospace"
+  }
+});

package/lib/module/components/RouteFilterViewV2.js

@@ -0,0 +1,38 @@
+"use strict";
+
+import { Filter, DynamicFilterView } from "@buoy-gg/shared-ui";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function RouteFilterViewV2({
+  ignoredPatterns,
+  onTogglePattern,
+  onAddPattern,
+  availablePathnames = []
+}) {
+  const filterConfig = {
+    addFilterSection: {
+      enabled: true,
+      placeholder: "Enter pattern (e.g., /_sitemap)",
+      title: "ACTIVE FILTERS",
+      icon: Filter
+    },
+    availableItemsSection: {
+      enabled: true,
+      title: "AVAILABLE ROUTES FROM EVENTS",
+      emptyMessage: "No routes available. Routes from navigation events will appear here.",
+      items: availablePathnames
+    },
+    howItWorksSection: {
+      enabled: true,
+      title: "HOW FILTERS WORK",
+      description: "Filtered routes will not appear in the route events list. Patterns match if the route contains the specified text.",
+      examples: ["• /_sitemap → filters /_sitemap routes", "• /api → filters /api/users, /api/posts", "• [id] → filters all routes with [id] param"],
+      icon: Filter
+    },
+    onPatternToggle: onTogglePattern,
+    onPatternAdd: onAddPattern,
+    activePatterns: ignoredPatterns
+  };
+  return /*#__PURE__*/_jsx(DynamicFilterView, {
+    ...filterConfig
+  });
+}