@buoy-gg/network 1.7.2

package/lib/module/network/components/NetworkModal.js

@@ -0,0 +1,933 @@
+"use strict";
+
+import { useState, useRef, useMemo, useCallback, useEffect } from "react";
+import { View, Text, StyleSheet, TouchableOpacity, TextInput, FlatList } from "react-native";
+import { Globe, Trash2, Power, Search, Filter, CheckCircle, XCircle, Clock, X, Copy, JsModal, ModalHeader, devToolsStorageKeys, macOSColors, useSafeAsyncStorage, CopyButton, TabSelector, useFeatureGate, UpgradeModal, ProBadge, Zap } from "@buoy-gg/shared-ui";
+import { NetworkEventItemCompact } from "./NetworkEventItemCompact";
+import { NetworkFilterViewV3 } from "./NetworkFilterViewV3";
+import { TickProvider } from "../hooks/useTickEveryMinute";
+import { NetworkEventDetailView } from "./NetworkEventDetailView";
+import { NetworkCopySettingsView, DEFAULT_COPY_SETTINGS } from "./NetworkCopySettingsView";
+import { useNetworkEvents } from "../hooks/useNetworkEvents";
+import { formatBytes } from "../utils/formatting";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Decompose by Responsibility: Extract empty state component
+function EmptyState({
+  isEnabled
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.emptyState,
+    children: [/*#__PURE__*/_jsx(Globe, {
+      size: 32,
+      color: macOSColors.text.muted
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.emptyTitle,
+      children: "No network events"
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.emptyText,
+      children: isEnabled ? "Network requests will appear here" : "Enable interception to start capturing"
+    })]
+  });
+}
+function NetworkModalInner({
+  visible,
+  onClose,
+  onBack,
+  onMinimize,
+  enableSharedModalDimensions = false
+}) {
+  const {
+    isPro
+  } = useFeatureGate();
+  const {
+    events,
+    stats,
+    filter,
+    setFilter,
+    clearEvents,
+    isEnabled,
+    toggleInterception,
+    hasLockedEvents,
+    lockedEventCount,
+    isEventLocked,
+    requestLimit
+  } = useNetworkEvents({
+    isPro
+  });
+  const handleModeChange = useCallback(_mode => {
+    // Mode changes handled by JsModal
+  }, []);
+  const [selectedEvent, setSelectedEvent] = useState(null);
+  const [showFilterView, setShowFilterView] = useState(false);
+  const [activeTab, setActiveTab] = useState("filters");
+  const [searchText, setSearchText] = useState("");
+  const [isSearchActive, setIsSearchActive] = useState(false);
+  const searchInputRef = useRef(null);
+  const [ignoredPatterns, setIgnoredPatterns] = useState(new Set());
+  const [copySettings, setCopySettings] = useState(DEFAULT_COPY_SETTINGS);
+  const flatListRef = useRef(null);
+  const hasLoadedFilters = useRef(false);
+  const hasLoadedCopySettings = useRef(false);
+  const {
+    getItem: safeGetItem,
+    setItem: safeSetItem
+  } = useSafeAsyncStorage();
+  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+
+  // Load persisted filters on mount
+  useEffect(() => {
+    if (!visible || hasLoadedFilters.current) return;
+    const loadFilters = async () => {
+      try {
+        // Load ignored patterns (using domains key for now)
+        const storedPatterns = await safeGetItem(devToolsStorageKeys.network.ignoredDomains());
+        if (storedPatterns) {
+          const patterns = JSON.parse(storedPatterns);
+          setIgnoredPatterns(new Set(patterns));
+        }
+      } catch (_error) {
+        // Silently fail - filters will use defaults
+      } finally {
+        hasLoadedFilters.current = true;
+      }
+    };
+    loadFilters();
+  }, [visible, safeGetItem]);
+
+  // Save filters when they change
+  useEffect(() => {
+    if (!hasLoadedFilters.current) return; // Don't save on initial load
+
+    const saveFilters = async () => {
+      try {
+        // Save ignored patterns
+        const patterns = Array.from(ignoredPatterns);
+        await safeSetItem(devToolsStorageKeys.network.ignoredDomains(), JSON.stringify(patterns));
+      } catch (_error) {
+        // Silently fail - filters will remain in memory
+      }
+    };
+    saveFilters();
+  }, [ignoredPatterns, safeSetItem]);
+
+  // Load persisted copy settings on mount
+  useEffect(() => {
+    if (!visible || hasLoadedCopySettings.current) return;
+    const loadCopySettings = async () => {
+      try {
+        const stored = await safeGetItem(devToolsStorageKeys.network.copyOptions());
+        if (stored) {
+          const settings = JSON.parse(stored);
+          setCopySettings(settings);
+        }
+      } catch (_error) {
+        // Silently fail - use defaults
+      } finally {
+        hasLoadedCopySettings.current = true;
+      }
+    };
+    loadCopySettings();
+  }, [visible, safeGetItem]);
+
+  // Save copy settings when they change
+  useEffect(() => {
+    if (!hasLoadedCopySettings.current) return; // Don't save on initial load
+
+    const saveCopySettings = async () => {
+      try {
+        await safeSetItem(devToolsStorageKeys.network.copyOptions(), JSON.stringify(copySettings));
+      } catch (_error) {
+        // Silently fail - settings will remain in memory
+      }
+    };
+    saveCopySettings();
+  }, [copySettings, safeSetItem]);
+
+  // Simple handlers - no useCallback needed per rule2
+  const handleEventPress = event => {
+    setSelectedEvent(event);
+  };
+  const handleBack = () => {
+    setSelectedEvent(null);
+  };
+  const handleSearch = text => {
+    setSearchText(text);
+    setFilter(prev => ({
+      ...prev,
+      searchText: text
+    }));
+  };
+  useEffect(() => {
+    if (isSearchActive) {
+      requestAnimationFrame(() => {
+        searchInputRef.current?.focus();
+      });
+    }
+  }, [isSearchActive]);
+
+  // Filter events based on ignored patterns
+  const filteredEvents = useMemo(() => {
+    if (ignoredPatterns.size === 0) return events;
+    return events.filter(event => {
+      const url = event.url.toLowerCase();
+
+      // Check if any pattern matches the URL
+      const isFiltered = Array.from(ignoredPatterns).some(pattern => url.includes(pattern.toLowerCase()));
+      return !isFiltered;
+    });
+  }, [events, ignoredPatterns]);
+
+  // Helper to check if payload should be included based on size
+  const shouldIncludePayload = useCallback(data => {
+    if (copySettings.bodySizeThreshold === -1) return true;
+    if (!data) return true;
+    try {
+      const size = JSON.stringify(data).length;
+      return size < copySettings.bodySizeThreshold * 1024;
+    } catch {
+      return false;
+    }
+  }, [copySettings.bodySizeThreshold]);
+
+  // Generate copy text based on settings
+  const generateCopyText = useCallback(() => {
+    let eventsToUse = filteredEvents;
+
+    // Apply filter mode
+    if (copySettings.filterMode === "failed") {
+      eventsToUse = eventsToUse.filter(e => e.error || e.status && e.status >= 400);
+    } else if (copySettings.filterMode === "success") {
+      eventsToUse = eventsToUse.filter(e => e.status && e.status >= 200 && e.status < 300);
+    }
+    if (eventsToUse.length === 0) {
+      return "No requests to copy";
+    }
+
+    // Plain text format (URLs only)
+    if (copySettings.format === "plaintext") {
+      return eventsToUse.map(event => `${event.method} ${event.url}`).join("\n");
+    }
+
+    // JSON format
+    if (copySettings.format === "json") {
+      const requests = eventsToUse.map(event => {
+        const obj = {};
+        if (copySettings.includeMethod) {
+          obj.method = event.method;
+          obj.url = event.url;
+        }
+        if (copySettings.includeStatus) {
+          obj.status = event.status;
+          obj.statusText = event.statusText;
+        }
+        if (copySettings.includeDuration) obj.duration = event.duration;
+        if (copySettings.includeTimestamp) obj.timestamp = event.timestamp;
+        if (copySettings.includeClient) obj.requestClient = event.requestClient;
+        if (copySettings.includeSizes) {
+          obj.requestSize = event.requestSize;
+          obj.responseSize = event.responseSize;
+        }
+        if (copySettings.includeErrors && event.error) obj.error = event.error;
+        if (copySettings.includeRequestHeaders) {
+          obj.requestHeaders = event.requestHeaders;
+        }
+        if (copySettings.includeResponseHeaders) {
+          obj.responseHeaders = event.responseHeaders;
+        }
+        if (copySettings.includeRequestBody && shouldIncludePayload(event.requestData)) {
+          obj.requestData = event.requestData;
+        }
+        if (copySettings.includeResponseBody && shouldIncludePayload(event.responseData)) {
+          obj.responseData = event.responseData;
+        }
+        return obj;
+      });
+      return JSON.stringify(requests, null, 2);
+    }
+
+    // Markdown format
+    const requests = eventsToUse.map((event, index) => {
+      let md = `# Request ${index + 1}\n\n`;
+      if (copySettings.includeMethod) {
+        md += `**Method:** ${event.method}\n`;
+        md += `**URL:** ${event.url}\n`;
+      }
+      if (copySettings.includeStatus) {
+        const status = event.status || "Pending";
+        md += `**Status:** ${status}${event.statusText ? ` (${event.statusText})` : ""}\n`;
+      }
+      if (copySettings.includeClient && event.requestClient) {
+        md += `**Client:** ${event.requestClient}\n`;
+      }
+      if (copySettings.includeDuration && event.duration) {
+        md += `**Duration:** ${event.duration}ms\n`;
+      }
+      if (copySettings.includeTimestamp) {
+        md += `**Timestamp:** ${new Date(event.timestamp).toISOString()}\n`;
+      }
+      if (copySettings.includeSizes) {
+        const reqSize = event.requestSize ? formatBytes(event.requestSize) : "N/A";
+        const resSize = event.responseSize ? formatBytes(event.responseSize) : "N/A";
+        md += `**Request Size:** ${reqSize}\n`;
+        md += `**Response Size:** ${resSize}\n`;
+      }
+      if (copySettings.includeErrors && event.error) {
+        md += `**Error:** ${event.error}\n`;
+      }
+      if (copySettings.includeRequestHeaders && Object.keys(event.requestHeaders).length > 0) {
+        md += `\n## Request Headers\n\`\`\`json\n${JSON.stringify(event.requestHeaders, null, 2)}\n\`\`\`\n`;
+      }
+      if (copySettings.includeRequestBody) {
+        md += `\n## Request Data\n`;
+        if (shouldIncludePayload(event.requestData)) {
+          md += `\`\`\`json\n${JSON.stringify(event.requestData, null, 2)}\n\`\`\`\n`;
+        } else {
+          const size = event.requestSize ? formatBytes(event.requestSize) : "Unknown size";
+          md += `_Payload omitted (${size}). Exceeds ${copySettings.bodySizeThreshold}KB threshold._\n`;
+        }
+      }
+      if (copySettings.includeResponseHeaders && Object.keys(event.responseHeaders).length > 0) {
+        md += `\n## Response Headers\n\`\`\`json\n${JSON.stringify(event.responseHeaders, null, 2)}\n\`\`\`\n`;
+      }
+      if (copySettings.includeResponseBody) {
+        md += `\n## Response Data\n`;
+        if (shouldIncludePayload(event.responseData)) {
+          md += `\`\`\`json\n${JSON.stringify(event.responseData, null, 2)}\n\`\`\`\n`;
+        } else {
+          const size = event.responseSize ? formatBytes(event.responseSize) : "Unknown size";
+          md += `_Payload omitted (${size}). Exceeds ${copySettings.bodySizeThreshold}KB threshold._\n`;
+        }
+      }
+      md += `\n---\n`;
+      return md;
+    }).join("\n");
+    const header = `# Network Requests (${eventsToUse.length} total)\n\n`;
+    return header + requests;
+  }, [filteredEvents, copySettings, shouldIncludePayload]);
+
+  // Memoized copy text value for CopyButton
+  const copyTextValue = useMemo(() => {
+    if (filteredEvents.length === 0) return "";
+    return generateCopyText();
+  }, [filteredEvents.length, generateCopyText]);
+
+  // FlatList optimization - only keep what's needed for FlatList performance
+  const keyExtractor = item => item.id;
+
+  // Filter to only show unlocked events in the list
+  const unlockedEvents = useMemo(() => {
+    return filteredEvents.filter(event => !isEventLocked(event.id));
+  }, [filteredEvents, isEventLocked]);
+
+  // Keep renderItem memoized for FlatList performance (justified by FlatList docs)
+  const renderItem = useMemo(() => {
+    return ({
+      item
+    }) => {
+      return /*#__PURE__*/_jsx(NetworkEventItemCompact, {
+        event: item,
+        onPress: handleEventPress
+      });
+    };
+  }, []); // handleEventPress defined inline
+
+  // Footer component showing upgrade banner when events are locked
+  const renderListFooter = useCallback(() => {
+    if (!hasLockedEvents) return null;
+    const isSearching = searchText.length > 0;
+    const bannerText = isSearching ? `${lockedEventCount} matching ${lockedEventCount === 1 ? 'request' : 'requests'} in locked history` : `${lockedEventCount} requests locked`;
+    const subtextMessage = isSearching ? "Upgrade to Pro to search your full request history" : "Upgrade to Pro to unlock full request history";
+    return /*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: styles.limitBanner,
+      onPress: () => setShowUpgradeModal(true),
+      activeOpacity: 0.8,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.limitBannerContent,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.limitBannerLeft,
+          children: [/*#__PURE__*/_jsx(Zap, {
+            size: 16,
+            color: "#20C997"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.limitBannerText,
+            children: bannerText
+          })]
+        }), /*#__PURE__*/_jsx(ProBadge, {})]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.limitBannerSubtext,
+        children: subtextMessage
+      })]
+    });
+  }, [hasLockedEvents, lockedEventCount, searchText]);
+
+  // Compact header with actions (like Sentry/Storage modals)
+  const renderHeaderContent = () => {
+    // Filter view header with tabs
+    if (showFilterView) {
+      // Copy tab is always visible and clickable - gating handled inside the view
+      const tabs = [{
+        key: "filters",
+        label: "Filters"
+      }, {
+        key: "copy",
+        label: "Copy"
+      }];
+      return /*#__PURE__*/_jsxs(ModalHeader, {
+        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+          onBack: () => setShowFilterView(false)
+        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: "",
+          noMargin: true,
+          children: /*#__PURE__*/_jsx(TabSelector, {
+            tabs: tabs,
+            activeTab: activeTab,
+            onTabChange: tab => setActiveTab(tab)
+          })
+        })]
+      });
+    }
+
+    // Event detail view header
+    if (selectedEvent) {
+      return /*#__PURE__*/_jsxs(ModalHeader, {
+        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+          onBack: handleBack
+        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: "Request Details",
+          centered: true
+        })]
+      });
+    }
+
+    // Main list view header with search and filters
+    return /*#__PURE__*/_jsxs(ModalHeader, {
+      children: [onBack && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
+        onBack: onBack
+      }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+        title: "",
+        children: isSearchActive ? /*#__PURE__*/_jsxs(View, {
+          style: styles.headerSearchContainer,
+          children: [/*#__PURE__*/_jsx(Search, {
+            size: 14,
+            color: macOSColors.text.secondary
+          }), /*#__PURE__*/_jsx(TextInput, {
+            ref: searchInputRef,
+            style: styles.headerSearchInput,
+            placeholder: "Search URL, method, operation, error...",
+            placeholderTextColor: macOSColors.text.muted,
+            value: searchText,
+            onChangeText: handleSearch,
+            onSubmitEditing: () => setIsSearchActive(false),
+            onBlur: () => setIsSearchActive(false),
+            "sentry-label": "ignore network search header",
+            accessibilityLabel: "Search network requests",
+            autoCapitalize: "none",
+            autoCorrect: false,
+            returnKeyType: "search"
+          }), searchText.length > 0 ? /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: () => {
+              handleSearch("");
+              setIsSearchActive(false);
+            },
+            "sentry-label": "ignore clear search header",
+            style: styles.headerSearchClear,
+            children: /*#__PURE__*/_jsx(X, {
+              size: 14,
+              color: macOSColors.text.secondary
+            })
+          }) : null]
+        }) : /*#__PURE__*/_jsxs(View, {
+          style: styles.headerChipRow,
+          children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.headerChip, filter.status === "success" && styles.headerChipActive],
+            onPress: () => setFilter({
+              ...filter,
+              status: filter.status === "success" ? undefined : "success"
+            }),
+            children: [/*#__PURE__*/_jsx(CheckCircle, {
+              size: 12,
+              color: macOSColors.semantic.success
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.headerChipValue, {
+                color: macOSColors.semantic.success
+              }],
+              children: stats.successfulRequests
+            })]
+          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.headerChip, filter.status === "error" && styles.headerChipActive],
+            onPress: () => setFilter({
+              ...filter,
+              status: filter.status === "error" ? undefined : "error"
+            }),
+            children: [/*#__PURE__*/_jsx(XCircle, {
+              size: 12,
+              color: macOSColors.semantic.error
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.headerChipValue, {
+                color: macOSColors.semantic.error
+              }],
+              children: stats.failedRequests
+            })]
+          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.headerChip, filter.status === "pending" && styles.headerChipActive],
+            onPress: () => setFilter({
+              ...filter,
+              status: filter.status === "pending" ? undefined : "pending"
+            }),
+            children: [/*#__PURE__*/_jsx(Clock, {
+              size: 12,
+              color: macOSColors.semantic.warning
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.headerChipValue, {
+                color: macOSColors.semantic.warning
+              }],
+              children: stats.pendingRequests
+            })]
+          })]
+        })
+      }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          "sentry-label": "ignore open search",
+          onPress: () => setIsSearchActive(true),
+          style: styles.headerActionButton,
+          children: /*#__PURE__*/_jsx(Search, {
+            size: 14,
+            color: macOSColors.text.secondary
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          "sentry-label": "ignore filter",
+          onPress: () => {
+            setShowFilterView(true);
+          },
+          style: [styles.headerActionButton, (filter.status || filter.method || filter.contentType) && styles.activeFilterButton],
+          children: /*#__PURE__*/_jsx(Filter, {
+            size: 14,
+            color: filter.status || filter.method || filter.contentType ? macOSColors.semantic.info : macOSColors.text.muted
+          })
+        }), isPro ? /*#__PURE__*/_jsx(CopyButton, {
+          value: copyTextValue,
+          size: 14,
+          buttonStyle: styles.headerActionButton,
+          colors: {
+            idle: filteredEvents.length > 0 ? macOSColors.text.secondary : macOSColors.text.disabled,
+            success: macOSColors.semantic.success,
+            error: macOSColors.semantic.error
+          },
+          disabled: filteredEvents.length === 0
+        }) : /*#__PURE__*/_jsx(TouchableOpacity, {
+          "sentry-label": "ignore copy pro",
+          onPress: () => setShowUpgradeModal(true),
+          style: [styles.headerActionButton, filteredEvents.length === 0 && styles.headerActionButtonDisabled],
+          disabled: filteredEvents.length === 0,
+          children: /*#__PURE__*/_jsx(Copy, {
+            size: 14,
+            color: filteredEvents.length > 0 ? macOSColors.text.secondary : macOSColors.text.disabled
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          "sentry-label": "ignore toggle interception",
+          onPress: toggleInterception,
+          style: [styles.headerActionButton, isEnabled ? styles.startButton : styles.stopButton],
+          children: /*#__PURE__*/_jsx(Power, {
+            size: 14,
+            color: isEnabled ? macOSColors.semantic.success : macOSColors.semantic.error
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          "sentry-label": "ignore clear events",
+          onPress: clearEvents,
+          style: [styles.headerActionButton, events.length === 0 && styles.headerActionButtonDisabled],
+          disabled: events.length === 0,
+          children: /*#__PURE__*/_jsx(Trash2, {
+            size: 14,
+            color: events.length > 0 ? macOSColors.text.muted : macOSColors.text.disabled
+          })
+        })]
+      })]
+    });
+  };
+  const persistenceKey = enableSharedModalDimensions ? devToolsStorageKeys.modal.root() : devToolsStorageKeys.network.modal();
+  if (!visible) return null;
+  return /*#__PURE__*/_jsxs(JsModal, {
+    visible: visible,
+    onClose: onClose,
+    onMinimize: onMinimize,
+    persistenceKey: persistenceKey,
+    header: {
+      showToggleButton: true,
+      customContent: renderHeaderContent()
+    },
+    onModeChange: handleModeChange,
+    enablePersistence: true,
+    initialMode: "bottomSheet",
+    enableGlitchEffects: true,
+    styles: {},
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.container,
+      children: selectedEvent ?
+      /*#__PURE__*/
+      /* Show detail view if event is selected */
+      _jsx(NetworkEventDetailView, {
+        event: selectedEvent,
+        ignoredPatterns: ignoredPatterns,
+        onTogglePattern: pattern => {
+          const newPatterns = new Set(ignoredPatterns);
+          if (newPatterns.has(pattern)) {
+            newPatterns.delete(pattern);
+          } else {
+            newPatterns.add(pattern);
+          }
+          setIgnoredPatterns(newPatterns);
+        }
+      }) : showFilterView ? (/* Show filter/copy view based on active tab */
+      activeTab === "copy" ? /*#__PURE__*/_jsx(NetworkCopySettingsView, {
+        settings: copySettings,
+        onSettingsChange: setCopySettings,
+        events: filteredEvents
+      }) : /*#__PURE__*/_jsx(NetworkFilterViewV3, {
+        events: events,
+        filter: filter,
+        onFilterChange: setFilter,
+        ignoredPatterns: ignoredPatterns,
+        onTogglePattern: pattern => {
+          const newPatterns = new Set(ignoredPatterns);
+          if (newPatterns.has(pattern)) {
+            newPatterns.delete(pattern);
+          } else {
+            newPatterns.add(pattern);
+          }
+          setIgnoredPatterns(newPatterns);
+        },
+        onAddPattern: pattern => {
+          const newPatterns = new Set(ignoredPatterns);
+          newPatterns.add(pattern);
+          setIgnoredPatterns(newPatterns);
+        }
+      })) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [!isEnabled ? /*#__PURE__*/_jsxs(View, {
+          style: styles.disabledBanner,
+          children: [/*#__PURE__*/_jsx(Power, {
+            size: 14,
+            color: macOSColors.semantic.warning
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.disabledText,
+            children: "Network interception is disabled"
+          })]
+        }) : null, unlockedEvents.length > 0 || hasLockedEvents ? /*#__PURE__*/_jsx(FlatList, {
+          ref: flatListRef,
+          data: unlockedEvents,
+          renderItem: renderItem,
+          keyExtractor: keyExtractor,
+          contentContainerStyle: styles.listContent,
+          showsVerticalScrollIndicator: true,
+          removeClippedSubviews: true,
+          onEndReachedThreshold: 0.8,
+          initialNumToRender: 10,
+          maxToRenderPerBatch: 10,
+          windowSize: 10,
+          scrollEnabled: false,
+          "sentry-label": "ignore network events list",
+          ListFooterComponent: renderListFooter
+        }) : /*#__PURE__*/_jsx(EmptyState, {
+          isEnabled: isEnabled
+        })]
+      })
+    }), /*#__PURE__*/_jsx(UpgradeModal, {
+      visible: showUpgradeModal,
+      onClose: () => setShowUpgradeModal(false),
+      featureName: "Network Export",
+      description: "Export network requests to share with your team, debug APIs, or feed into AI tools.",
+      benefits: ["Export to JSON, Markdown, or plain text", "Customizable copy presets (URLs only, LLM-ready, full data)", "Share request details with teammates", "Feed network data directly to AI assistants"]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: macOSColors.background.base
+  },
+  // Compact header styles matching Sentry/Storage modals
+  headerContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+    gap: 8,
+    minHeight: 32,
+    paddingLeft: 4
+  },
+  headerTitle: {
+    color: macOSColors.text.primary,
+    fontSize: 14,
+    fontWeight: "500",
+    flex: 1,
+    marginLeft: 8
+  },
+  headerStats: {
+    display: "none"
+  },
+  headerStatsText: {
+    fontSize: 12,
+    color: macOSColors.text.muted,
+    fontWeight: "500"
+  },
+  headerFilteredText: {
+    fontSize: 11,
+    color: macOSColors.semantic.warning,
+    fontWeight: "500",
+    marginLeft: 4
+  },
+  headerActions: {
+    flexDirection: "row",
+    gap: 6,
+    marginLeft: "auto",
+    marginRight: 4
+  },
+  headerCenterArea: {
+    flex: 1,
+    marginHorizontal: 8
+  },
+  headerSearchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: macOSColors.background.input,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    paddingHorizontal: 12,
+    paddingVertical: 5
+  },
+  headerSearchInput: {
+    flex: 1,
+    color: macOSColors.text.primary,
+    fontSize: 13,
+    marginLeft: 6,
+    paddingVertical: 2
+  },
+  headerSearchClear: {
+    marginLeft: 6,
+    padding: 4
+  },
+  headerChipRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  headerChip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: macOSColors.background.hover,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default
+  },
+  headerChipActive: {
+    backgroundColor: macOSColors.semantic.infoBackground,
+    borderColor: macOSColors.semantic.info + "50",
+    shadowColor: macOSColors.semantic.info,
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.08,
+    shadowRadius: 2,
+    elevation: 1
+  },
+  headerChipValue: {
+    fontSize: 12,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  headerActionButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: macOSColors.background.hover,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  headerActionButtonDisabled: {
+    opacity: 0.55
+  },
+  // Shared navbar styles (matching React Query modal)
+  tabNavigationContainer: {
+    flexDirection: "row",
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 6,
+    padding: 2,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    justifyContent: "space-evenly",
+    flex: 1,
+    marginLeft: 8,
+    marginRight: 8
+  },
+  tabButton: {
+    paddingHorizontal: 8,
+    paddingVertical: 5,
+    borderRadius: 4,
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+    marginHorizontal: 1
+  },
+  tabButtonActive: {
+    backgroundColor: macOSColors.semantic.infoBackground,
+    borderWidth: 1,
+    borderColor: macOSColors.semantic.info + "40"
+  },
+  tabButtonInactive: {
+    backgroundColor: "transparent"
+  },
+  tabButtonText: {
+    fontSize: 12,
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    fontFamily: "monospace",
+    textTransform: "uppercase"
+  },
+  tabButtonTextActive: {
+    color: macOSColors.semantic.info
+  },
+  tabButtonTextInactive: {
+    color: macOSColors.text.muted
+  },
+  startButton: {
+    backgroundColor: macOSColors.semantic.successBackground,
+    borderColor: macOSColors.semantic.success + "40"
+  },
+  stopButton: {
+    backgroundColor: macOSColors.semantic.errorBackground,
+    borderColor: macOSColors.semantic.error + "40"
+  },
+  activeFilterButton: {
+    backgroundColor: macOSColors.semantic.infoBackground,
+    borderColor: macOSColors.semantic.info + "40"
+  },
+  activeIgnoreButton: {
+    backgroundColor: macOSColors.semantic.warningBackground,
+    borderColor: macOSColors.semantic.warning + "33"
+  },
+  detailHeaderActions: {
+    flexDirection: "row",
+    gap: 6,
+    marginLeft: "auto",
+    marginRight: 4
+  },
+  // Search bar - minimal design with theme colors
+  searchContainer: {
+    display: "none"
+  },
+  searchInput: {},
+  // Stats bar - minimal design
+  statsBar: {
+    display: "none"
+  },
+  statChip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: macOSColors.background.hover,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: "transparent"
+  },
+  statChipActive: {
+    backgroundColor: macOSColors.semantic.info + "26",
+    borderColor: macOSColors.semantic.info + "66"
+  },
+  statValue: {
+    fontSize: 14,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  statLabel: {
+    fontSize: 10,
+    color: macOSColors.text.muted,
+    fontWeight: "500",
+    textTransform: "uppercase"
+  },
+  disabledBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 10,
+    marginHorizontal: 12,
+    marginTop: 8,
+    backgroundColor: macOSColors.semantic.warningBackground,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: macOSColors.semantic.warning + "20"
+  },
+  disabledText: {
+    color: macOSColors.semantic.warning,
+    fontSize: 11,
+    flex: 1
+  },
+  listContent: {
+    paddingTop: 8
+  },
+  emptyState: {
+    alignItems: "center",
+    paddingVertical: 40
+  },
+  emptyTitle: {
+    color: macOSColors.text.primary,
+    fontSize: 14,
+    fontWeight: "600",
+    marginTop: 12,
+    marginBottom: 6
+  },
+  emptyText: {
+    color: macOSColors.text.muted,
+    fontSize: 12,
+    textAlign: "center"
+  },
+  // Free tier limit banner
+  limitBanner: {
+    backgroundColor: "#1A1A1A",
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: "#20C997" + "40",
+    padding: 12,
+    marginHorizontal: 12,
+    marginTop: 12,
+    marginBottom: 34
+  },
+  limitBannerContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 4
+  },
+  limitBannerLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  limitBannerText: {
+    color: "#E0E0E0",
+    fontSize: 13,
+    fontWeight: "600"
+  },
+  limitBannerSubtext: {
+    color: "#888888",
+    fontSize: 11
+  }
+});
+
+/**
+ * High-level modal surface that wraps the network monitoring experience with shared timing
+ * context. Automatically injects the `TickProvider` so timestamps refresh while the modal is open.
+ */
+export function NetworkModal(props) {
+  return /*#__PURE__*/_jsx(TickProvider, {
+    children: /*#__PURE__*/_jsx(NetworkModalInner, {
+      ...props
+    })
+  });
+}