@buoy-gg/network 4.0.2 → 6.0.0

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

@@ -7,32 +7,99 @@ exports.NetworkModal = NetworkModal;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
-var _NetworkEventItemCompact = require("./NetworkEventItemCompact");
 var _NetworkFilterViewV = require("./NetworkFilterViewV3");
 var _useTickEveryMinute = require("../hooks/useTickEveryMinute");
 var _NetworkEventDetailView = require("./NetworkEventDetailView");
 var _NetworkCopySettingsView = require("./NetworkCopySettingsView");
-var _useNetworkEvents = require("../hooks/useNetworkEvents");
-var _formatting = require("../utils/formatting");
+var _NetworkHeaderLive = require("./NetworkHeaderLive");
+var _NetworkListScreen = require("./NetworkListScreen");
+var _useNetworkEventList = require("../hooks/useNetworkEventList");
 var _jsxRuntime = require("react/jsx-runtime");
-// Decompose by Responsibility: Extract empty state component
-function EmptyState({
-  isEnabled
+// ============================================================================
+// Screens (rule4 stable router: each gates itself with `return null`; the
+// root renders all four as stable siblings instead of a nested ternary).
+// Subscribing screens run their hooks unconditionally and pass
+// `paused || !visible` so hidden screens don't subscribe.
+// ============================================================================
+
+function NetworkDetailScreen({
+  visible,
+  event,
+  ignoredPatternValues,
+  onTogglePattern
 }) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.emptyState,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Globe, {
-      size: 32,
-      color: _sharedUi.macOSColors.text.muted
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.emptyTitle,
-      children: "No network events"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.emptyText,
-      children: isEnabled ? "Network requests will appear here" : "Enable interception to start capturing"
-    })]
+  if (!visible || !event) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkEventDetailView.NetworkEventDetailView, {
+    event: event,
+    ignoredPatterns: ignoredPatternValues,
+    onTogglePattern: onTogglePattern
+  });
+}
+function NetworkFilterScreen({
+  visible,
+  paused,
+  isPro,
+  filter,
+  onFilterChange,
+  ignoredPatterns,
+  onRemovePattern,
+  onAddPattern,
+  onTogglePatternMode
+}) {
+  // Facet counts read the same filtered list the user is looking at.
+  const {
+    events
+  } = (0, _useNetworkEventList.useNetworkEventList)({
+    filter,
+    ignoredPatterns,
+    paused: paused || !visible,
+    isPro
+  });
+  if (!visible) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkFilterViewV.NetworkFilterViewV3, {
+    events: events,
+    filter: filter,
+    onFilterChange: onFilterChange,
+    ignoredPatterns: ignoredPatterns,
+    onRemovePattern: onRemovePattern,
+    onAddPattern: onAddPattern,
+    onTogglePatternMode: onTogglePatternMode
   });
 }
+function NetworkCopyScreen({
+  visible,
+  paused,
+  isPro,
+  filter,
+  ignoredPatterns,
+  settings,
+  onSettingsChange
+}) {
+  const {
+    events
+  } = (0, _useNetworkEventList.useNetworkEventList)({
+    filter,
+    ignoredPatterns,
+    paused: paused || !visible,
+    isPro
+  });
+  if (!visible) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkCopySettingsView.NetworkCopySettingsView, {
+    settings: settings,
+    onSettingsChange: onSettingsChange,
+    events: events
+  });
+}
+
+// ============================================================================
+// Root — UI-state orchestration ONLY (rule3). No event-store subscription
+// lives here: live data is consumed by the header leaves
+// (NetworkHeaderLive) and the screens, so network events never re-render
+// the modal shell/header. Profiling evidence: tool-bench 2026-07-06 —
+// with the subscription here, 15 events re-rendered JsModal + every
+// header button 15× and all visible rows 105×.
+// ============================================================================
+
 function NetworkModalInner({
   visible,
   onClose,
@@ -43,44 +110,19 @@ function NetworkModalInner({
   const {
     isPro
   } = (0, _sharedUi.useFeatureGate)();
-  const {
-    events,
-    allEvents,
-    stats,
-    filter,
-    setFilter,
-    clearEvents,
-    isCapturing,
-    pauseCapturing,
-    resumeCapturing,
-    hasLockedEvents,
-    lockedEventCount,
-    isEventLocked,
-    requestLimit
-  } = (0, _useNetworkEvents.useNetworkEvents)({
-    isPro
-  });
-  const isEnabled = isCapturing;
-  const toggleInterception = (0, _react.useCallback)(() => {
-    if (isCapturing) {
-      pauseCapturing();
-    } else {
-      resumeCapturing();
-    }
-  }, [isCapturing, pauseCapturing, resumeCapturing]);
-  const handleModeChange = (0, _react.useCallback)(_mode => {
-    // Mode changes handled by JsModal
-  }, []);
+
+  // Capture pause (the power toggle's freeze-stream semantic) — gates
+  // every subscriber in this modal's tree via props.
+  const [paused, setPaused] = (0, _react.useState)(false);
+  const [filter, setFilter] = (0, _react.useState)({});
   const [selectedEvent, setSelectedEvent] = (0, _react.useState)(null);
   const [showFilterView, setShowFilterView] = (0, _react.useState)(false);
   const [activeTab, setActiveTab] = (0, _react.useState)("filters");
   const [searchText, setSearchText] = (0, _react.useState)("");
   const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
   const searchInputRef = (0, _react.useRef)(null);
-  // Ignored domains/URL patterns now live in a shared, persisted singleton store
-  // (@buoy-gg/shared-ui) so the Network tool and the Events tool stay in sync and
-  // share the exact same filter logic. The four handlers below are thin wrappers
-  // exposed by the hook; `values` is the derived Set used for presence checks.
+  // Ignored domains/URL patterns live in a shared, persisted singleton store
+  // (@buoy-gg/shared-ui) so the Network tool and the Events tool stay in sync.
   const {
     patterns: ignoredPatterns,
     values: ignoredPatternValues,
@@ -90,7 +132,6 @@ function NetworkModalInner({
     toggleMode: toggleIgnoredPatternMode
   } = (0, _sharedUi.useIgnoredPatterns)();
   const [copySettings, setCopySettings] = (0, _react.useState)(_NetworkCopySettingsView.DEFAULT_COPY_SETTINGS);
-  const flatListRef = (0, _react.useRef)(null);
   const hasLoadedCopySettings = (0, _react.useRef)(false);
   const [showUpgradeModal, setShowUpgradeModal] = (0, _react.useState)(false);
 
@@ -135,9 +176,6 @@ function NetworkModalInner({
   }, [copySettings]);
 
   // Simple handlers - no useCallback needed per rule2
-  const handleEventPress = event => {
-    setSelectedEvent(event);
-  };
   const handleBack = () => {
     setSelectedEvent(null);
   };
@@ -148,6 +186,15 @@ function NetworkModalInner({
       searchText: text
     }));
   };
+  const toggleStatusFilter = status => {
+    setFilter(prev => ({
+      ...prev,
+      status: prev.status === status ? undefined : status
+    }));
+  };
+  const handleModeChange = _mode => {
+    // Mode changes handled by JsModal
+  };
   (0, _react.useEffect)(() => {
     if (isSearchActive) {
       requestAnimationFrame(() => {
@@ -156,226 +203,10 @@ function NetworkModalInner({
     }
   }, [isSearchActive]);
 
-  // Filter events based on ignored patterns (mode-aware)
-  const filteredEvents = (0, _react.useMemo)(() => {
-    if (ignoredPatterns.length === 0) return events;
-    return events.filter(event => {
-      const isFiltered = ignoredPatterns.some(pattern => (0, _sharedUi.urlMatchesIgnoredPattern)(event.url, pattern));
-      return !isFiltered;
-    });
-  }, [events, ignoredPatterns]);
-
-  // Helper to check if payload should be included based on size
-  const shouldIncludePayload = (0, _react.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 = (0, _react.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 ? (0, _formatting.formatBytes)(event.requestSize) : "N/A";
-        const resSize = event.responseSize ? (0, _formatting.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 ? (0, _formatting.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 ? (0, _formatting.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 = (0, _react.useMemo)(() => {
-    if (filteredEvents.length === 0) return "";
-    return generateCopyText();
-  }, [filteredEvents.length, generateCopyText]);
-
-  // Compute badge stats from all events (before status filtering) with ignored patterns applied.
-  // This ensures counts stay stable when toggling between status filters.
-  const badgeStats = (0, _react.useMemo)(() => {
-    let successful = 0;
-    let failed = 0;
-    let pending = 0;
-    const eventsForStats = ignoredPatterns.length === 0 ? allEvents : allEvents.filter(event => !ignoredPatterns.some(pattern => (0, _sharedUi.urlMatchesIgnoredPattern)(event.url, pattern)));
-    for (const event of eventsForStats) {
-      if (event.status && event.status >= 200 && event.status < 300) {
-        successful++;
-      } else if (event.error || event.status && event.status >= 400) {
-        failed++;
-      } else if (!event.status && !event.error) {
-        pending++;
-      }
-    }
-    return {
-      successful,
-      failed,
-      pending
-    };
-  }, [allEvents, ignoredPatterns]);
-
-  // 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 = (0, _react.useMemo)(() => {
-    return filteredEvents.filter(event => !isEventLocked(event.id));
-  }, [filteredEvents, isEventLocked]);
-
-  // Keep renderItem memoized for FlatList performance (justified by FlatList docs)
-  const renderItem = (0, _react.useMemo)(() => {
-    return ({
-      item
-    }) => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkEventItemCompact.NetworkEventItemCompact, {
-        event: item,
-        onPress: handleEventPress
-      });
-    };
-  }, []); // handleEventPress defined inline
-
-  // Footer component showing upgrade banner when events are locked
-  const renderListFooter = (0, _react.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__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-      style: styles.limitBanner,
-      onPress: () => setShowUpgradeModal(true),
-      activeOpacity: 0.8,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.limitBannerContent,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.limitBannerLeft,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
-            size: 16,
-            color: "#20C997"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.limitBannerText,
-            children: bannerText
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProBadge, {})]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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"
@@ -410,7 +241,9 @@ function NetworkModalInner({
       });
     }
 
-    // Main list view header with search and filters
+    // Main list view header with search and filters. The live pieces
+    // (count chips, copy, trash) are self-subscribing leaves — this
+    // header function itself only re-runs on user interaction.
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
       children: [onBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
         onBack: onBack
@@ -447,54 +280,11 @@ function NetworkModalInner({
               color: _sharedUi.macOSColors.text.secondary
             })
           }) : null]
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.headerChipRow,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-            style: [styles.headerChip, filter.status === "success" && styles.headerChipActive],
-            onPress: () => setFilter({
-              ...filter,
-              status: filter.status === "success" ? undefined : "success"
-            }),
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CheckCircle, {
-              size: 12,
-              color: _sharedUi.macOSColors.semantic.success
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.headerChipValue, {
-                color: _sharedUi.macOSColors.semantic.success
-              }],
-              children: badgeStats.successful
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-            style: [styles.headerChip, filter.status === "error" && styles.headerChipActive],
-            onPress: () => setFilter({
-              ...filter,
-              status: filter.status === "error" ? undefined : "error"
-            }),
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.XCircle, {
-              size: 12,
-              color: _sharedUi.macOSColors.semantic.error
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.headerChipValue, {
-                color: _sharedUi.macOSColors.semantic.error
-              }],
-              children: badgeStats.failed
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-            style: [styles.headerChip, filter.status === "pending" && styles.headerChipActive],
-            onPress: () => setFilter({
-              ...filter,
-              status: filter.status === "pending" ? undefined : "pending"
-            }),
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
-              size: 12,
-              color: _sharedUi.macOSColors.semantic.warning
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.headerChipValue, {
-                color: _sharedUi.macOSColors.semantic.warning
-              }],
-              children: badgeStats.pending
-            })]
-          })]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderLive.NetworkHeaderBadges, {
+          activeStatus: filter.status,
+          onToggleStatus: toggleStatusFilter,
+          ignoredPatterns: ignoredPatterns,
+          paused: paused
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
@@ -515,44 +305,31 @@ function NetworkModalInner({
             size: 14,
             color: filter.status || filter.method || filter.contentType ? _sharedUi.macOSColors.semantic.info : _sharedUi.macOSColors.text.muted
           })
-        }), isPro ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CopyButton, {
-          value: copyTextValue,
-          size: 14,
-          buttonStyle: styles.headerActionButton,
-          colors: {
-            idle: filteredEvents.length > 0 ? _sharedUi.macOSColors.text.secondary : _sharedUi.macOSColors.text.disabled,
-            success: _sharedUi.macOSColors.semantic.success,
-            error: _sharedUi.macOSColors.semantic.error
-          },
-          disabled: filteredEvents.length === 0
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          "sentry-label": "ignore copy pro",
-          onPress: () => setShowUpgradeModal(true),
-          style: [styles.headerActionButton, filteredEvents.length === 0 && styles.headerActionButtonDisabled],
-          disabled: filteredEvents.length === 0,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Copy, {
-            size: 14,
-            color: filteredEvents.length > 0 ? _sharedUi.macOSColors.text.secondary : _sharedUi.macOSColors.text.disabled
-          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderLive.NetworkHeaderCopyButton, {
+          isPro: isPro,
+          filter: filter,
+          ignoredPatterns: ignoredPatterns,
+          copySettings: copySettings,
+          paused: paused,
+          onUpgradePress: () => setShowUpgradeModal(true)
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
-          isEnabled: isEnabled,
-          onToggle: toggleInterception,
+          isEnabled: !paused,
+          onToggle: () => setPaused(prev => !prev),
           accessibilityLabel: "Toggle network interception"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          "sentry-label": "ignore clear events",
-          onPress: clearEvents,
-          style: [styles.headerActionButton, events.length === 0 && styles.headerActionButtonDisabled],
-          disabled: events.length === 0,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
-            size: 14,
-            color: events.length > 0 ? _sharedUi.macOSColors.text.muted : _sharedUi.macOSColors.text.disabled
-          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderLive.NetworkClearButton, {
+          paused: paused
         })]
       })]
     });
   };
   const persistenceKey = enableSharedModalDimensions ? _sharedUi.devToolsStorageKeys.modal.root() : _sharedUi.devToolsStorageKeys.network.modal();
   if (!visible) return null;
+
+  // The LIST screen owns its scrolling (FlatList virtualization requires
+  // it — inside JsModal's ScrollView wrapper every row mounts, which at
+  // the 500-event cap measured 17 JS FPS / 133% CPU / 1.4GB; see
+  // NetworkListScreen). Detail/filter/copy still use the wrapper.
+  const listOwnsScroll = selectedEvent == null && !showFilterView;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.JsModal, {
     visible: visible,
     onClose: onClose,
@@ -566,58 +343,43 @@ function NetworkModalInner({
     enablePersistence: true,
     initialMode: "bottomSheet",
     enableGlitchEffects: true,
+    disableScrollWrapper: listOwnsScroll,
     styles: {},
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.container,
-      children: selectedEvent ?
-      /*#__PURE__*/
-      /* Show detail view if event is selected */
-      (0, _jsxRuntime.jsx)(_NetworkEventDetailView.NetworkEventDetailView, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NetworkDetailScreen, {
+        visible: selectedEvent != null,
         event: selectedEvent,
-        ignoredPatterns: ignoredPatternValues,
+        ignoredPatternValues: ignoredPatternValues,
         onTogglePattern: toggleIgnoredPattern
-      }) : showFilterView ? (/* Show filter/copy view based on active tab */
-      activeTab === "copy" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkCopySettingsView.NetworkCopySettingsView, {
-        settings: copySettings,
-        onSettingsChange: setCopySettings,
-        events: filteredEvents
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkFilterViewV.NetworkFilterViewV3, {
-        events: filteredEvents,
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NetworkFilterScreen, {
+        visible: showFilterView && activeTab === "filters" && !selectedEvent,
+        paused: paused,
+        isPro: isPro,
         filter: filter,
         onFilterChange: setFilter,
         ignoredPatterns: ignoredPatterns,
         onRemovePattern: removeIgnoredPattern,
         onAddPattern: addIgnoredPattern,
         onTogglePatternMode: toggleIgnoredPatternMode
-      })) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [!isEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.disabledBanner,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Power, {
-            size: 14,
-            color: _sharedUi.macOSColors.semantic.warning
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.disabledText,
-            children: "Network interception is disabled"
-          })]
-        }) : null, unlockedEvents.length > 0 || hasLockedEvents ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(EmptyState, {
-          isEnabled: isEnabled
-        })]
-      })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NetworkCopyScreen, {
+        visible: showFilterView && activeTab === "copy" && !selectedEvent,
+        paused: paused,
+        isPro: isPro,
+        filter: filter,
+        ignoredPatterns: ignoredPatterns,
+        settings: copySettings,
+        onSettingsChange: setCopySettings
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkListScreen.NetworkListScreen, {
+        visible: selectedEvent == null && !showFilterView,
+        paused: paused,
+        filter: filter,
+        ignoredPatterns: ignoredPatterns,
+        isPro: isPro,
+        searchText: searchText,
+        onEventPress: setSelectedEvent,
+        onUpgradePress: () => setShowUpgradeModal(true)
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.UpgradeModal, {
       visible: showUpgradeModal,
       onClose: () => setShowUpgradeModal(false),
@@ -632,46 +394,6 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1,
     backgroundColor: _sharedUi.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: _sharedUi.macOSColors.text.primary,
-    fontSize: 14,
-    fontWeight: "500",
-    flex: 1,
-    marginLeft: 8
-  },
-  headerStats: {
-    display: "none"
-  },
-  headerStatsText: {
-    fontSize: 12,
-    color: _sharedUi.macOSColors.text.muted,
-    fontWeight: "500"
-  },
-  headerFilteredText: {
-    fontSize: 11,
-    color: _sharedUi.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",
@@ -693,39 +415,6 @@ const styles = _reactNative.StyleSheet.create({
     marginLeft: 6,
     padding: 4
   },
-  headerChipRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  headerChip: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
-    paddingHorizontal: 10,
-    paddingVertical: 5,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default
-  },
-  headerChipActive: {
-    backgroundColor: _sharedUi.macOSColors.semantic.infoBackground,
-    borderColor: _sharedUi.macOSColors.semantic.info + "50",
-    shadowColor: _sharedUi.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,
@@ -736,175 +425,9 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
-  headerActionButtonDisabled: {
-    opacity: 0.55
-  },
-  // Shared navbar styles (matching React Query modal)
-  tabNavigationContainer: {
-    flexDirection: "row",
-    backgroundColor: _sharedUi.macOSColors.background.card,
-    borderRadius: 6,
-    padding: 2,
-    borderWidth: 1,
-    borderColor: _sharedUi.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: _sharedUi.macOSColors.semantic.infoBackground,
-    borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.semantic.info + "40"
-  },
-  tabButtonInactive: {
-    backgroundColor: "transparent"
-  },
-  tabButtonText: {
-    fontSize: 12,
-    fontWeight: "600",
-    letterSpacing: 0.5,
-    fontFamily: "monospace",
-    textTransform: "uppercase"
-  },
-  tabButtonTextActive: {
-    color: _sharedUi.macOSColors.semantic.info
-  },
-  tabButtonTextInactive: {
-    color: _sharedUi.macOSColors.text.muted
-  },
-  startButton: {
-    backgroundColor: _sharedUi.macOSColors.semantic.successBackground,
-    borderColor: _sharedUi.macOSColors.semantic.success + "40"
-  },
-  stopButton: {
-    backgroundColor: _sharedUi.macOSColors.semantic.errorBackground,
-    borderColor: _sharedUi.macOSColors.semantic.error + "40"
-  },
   activeFilterButton: {
     backgroundColor: _sharedUi.macOSColors.semantic.infoBackground,
     borderColor: _sharedUi.macOSColors.semantic.info + "40"
-  },
-  activeIgnoreButton: {
-    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground,
-    borderColor: _sharedUi.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: _sharedUi.macOSColors.background.hover,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: "transparent"
-  },
-  statChipActive: {
-    backgroundColor: _sharedUi.macOSColors.semantic.info + "26",
-    borderColor: _sharedUi.macOSColors.semantic.info + "66"
-  },
-  statValue: {
-    fontSize: 14,
-    fontWeight: "600",
-    fontFamily: "monospace"
-  },
-  statLabel: {
-    fontSize: 10,
-    color: _sharedUi.macOSColors.text.muted,
-    fontWeight: "500",
-    textTransform: "uppercase"
-  },
-  disabledBanner: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    padding: 10,
-    marginHorizontal: 12,
-    marginTop: 8,
-    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.semantic.warning + "20"
-  },
-  disabledText: {
-    color: _sharedUi.macOSColors.semantic.warning,
-    fontSize: 11,
-    flex: 1
-  },
-  listContent: {
-    paddingTop: 8
-  },
-  emptyState: {
-    alignItems: "center",
-    paddingVertical: 40
-  },
-  emptyTitle: {
-    color: _sharedUi.macOSColors.text.primary,
-    fontSize: 14,
-    fontWeight: "600",
-    marginTop: 12,
-    marginBottom: 6
-  },
-  emptyText: {
-    color: _sharedUi.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
   }
 });