@buoy-gg/network 7.0.12 → 7.0.13

package/lib/commonjs/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "DEFAULT_SETTLE_MS", {
+  enumerable: true,
+  get: function () {
+    return _networkSelectionStore.DEFAULT_SETTLE_MS;
+  }
+});
 Object.defineProperty(exports, "FREE_TIER_SAVED_LIMIT", {
   enumerable: true,
   get: function () {
@@ -147,6 +153,12 @@ Object.defineProperty(exports, "networkSavedStore", {
     return _networkSavedStore.networkSavedStore;
   }
 });
+Object.defineProperty(exports, "networkSelectionStore", {
+  enumerable: true,
+  get: function () {
+    return _networkSelectionStore.networkSelectionStore;
+  }
+});
 Object.defineProperty(exports, "networkSyncAdapter", {
   enumerable: true,
   get: function () {
@@ -231,6 +243,7 @@ var _useLiveNetworkEvent = require("./network/hooks/useLiveNetworkEvent");
 var _useNetworkBadgeCounts = require("./network/hooks/useNetworkBadgeCounts");
 var _useNetworkSaved = require("./network/hooks/useNetworkSaved");
 var _withPinnedFirst = require("./network/utils/withPinnedFirst");
+var _networkSelectionStore = require("./network/utils/networkSelectionStore");
 var _useTickEveryMinute = require("./network/hooks/useTickEveryMinute");
 var _formatting = require("./network/utils/formatting");
 var _sharedUi = require("@buoy-gg/shared-ui");

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

@@ -8,6 +8,8 @@ var _react = require("react");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _useNetworkEventList = require("../hooks/useNetworkEventList");
 var _useNetworkSaved = require("../hooks/useNetworkSaved");
+var _useNetworkSelection = require("../hooks/useNetworkSelection");
+var _networkSelectionStore = require("../utils/networkSelectionStore");
 var _withPinnedFirst = require("../utils/withPinnedFirst");
 var _selectSavedEvents = require("../utils/selectSavedEvents");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -18,8 +20,8 @@ var _jsxRuntime = require("react/jsx-runtime");
  * It is its OWN leaf (rule3) because it is the only part of the detail screen
  * that needs the event LIST. Subscribing here keeps the request stream out of
  * the detail body's render path, which is the expensive subtree (headers,
- * bodies, JSON viewers, diff views): a request arriving re-renders this
- * ~30-node footer and nothing else.
+ * bodies, JSON viewers): a request arriving re-renders this ~30-node footer
+ * and nothing else.
  *
  * The order it steps through is EXACTLY what the list screen renders —
  * `[...pinned, ...rest]` off the same `useNetworkEventList` + `splitPinned`
@@ -29,17 +31,24 @@ var _jsxRuntime = require("react/jsx-runtime");
  * "request N of <what the list is showing>", never "N of everything ever
  * captured". Detail opened from the Saved screen steps through the SAVED
  * list instead (with its own search applied), for the same reason.
+ *
+ * This component OWNS the navigable order but not the cursor: it publishes
+ * the ordered ids into `networkSelectionStore` and reads the cursor back.
+ * That split is what makes stepping O(1) (the store keeps the index, so
+ * there is no `findIndex` per render) and what lets the benchmark harness
+ * drive `step(+1)` directly without going through the UI.
  */
 
+/** Stable identities — the store is a singleton, so these never need to change. */
+const stepPrevious = () => _networkSelectionStore.networkSelectionStore.step(-1);
+const stepNext = () => _networkSelectionStore.networkSelectionStore.step(1);
 const NetworkDetailStepper = exports.NetworkDetailStepper = /*#__PURE__*/(0, _react.memo)(function NetworkDetailStepper({
-  eventId,
   paused,
   filter,
   ignoredPatterns,
   isPro,
   fromSaved,
   savedSearch,
-  onSelect,
   applySafeAreaInset
 }) {
   const {
@@ -67,7 +76,16 @@ const NetworkDetailStepper = exports.NetworkDetailStepper = /*#__PURE__*/(0, _re
     } = (0, _withPinnedFirst.splitPinned)(visibleEvents, pinnedEvents, pinnedLiveIds);
     return pinned.length === 0 ? rest : [...pinned, ...rest];
   }, [fromSaved, savedRecords, savedSearch, isPro, visibleEvents, pinnedEvents, pinnedLiveIds]);
-  const index = ordered.findIndex(event => event.id === eventId);
+
+  // Publish the navigable order. `setIds` re-anchors the cursor BY ID and
+  // no-ops when the ids are unchanged, so this is safe to run every render.
+  (0, _react.useEffect)(() => {
+    _networkSelectionStore.networkSelectionStore.setIds((0, _networkSelectionStore.toSelectionIds)(ordered));
+  }, [ordered]);
+  const {
+    index,
+    total
+  } = (0, _useNetworkSelection.useNetworkCursor)();
 
   // Not in the list at all: the filter changed under it while it was open, it
   // aged past the 500-request cap, or it is a saved snapshot with no live twin.
@@ -79,16 +97,10 @@ const NetworkDetailStepper = exports.NetworkDetailStepper = /*#__PURE__*/(0, _re
   // the same direction as scrolling up, which is what the arrow means here.
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EventStepperFooter, {
     currentIndex: index,
-    totalItems: ordered.length,
+    totalItems: total,
     itemLabel: "Request",
     applySafeAreaInset: applySafeAreaInset,
-    onPrevious: () => {
-      const target = ordered[index - 1];
-      if (target) onSelect(target.id);
-    },
-    onNext: () => {
-      const target = ordered[index + 1];
-      if (target) onSelect(target.id);
-    }
+    onPrevious: stepPrevious,
+    onNext: stepNext
   });
 });

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NetworkEventDetailView = NetworkEventDetailView;
+exports.NetworkEventDetailView = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
@@ -17,6 +17,10 @@ var _jsxRuntime = require("react/jsx-runtime");
  * body glyphs). The Lock/Unlock pair keeps its colour because
  * secure-vs-insecure is a genuine signal, as does the status pill.
  */const NEUTRAL_ICON = _sharedUi.macOSColors.semantic.success;
+
+/** Hoisted so the defaults don't mint a new Set/function per render. */
+const EMPTY_PATTERNS = new Set();
+const noop = () => {};
 /**
  * The measurable slice of a request's lifetime, as proportional bars.
  *
@@ -82,6 +86,17 @@ const TimingPhases = ({
   });
 };
 
+/**
+ * Stand-in for a body tree while the prev/next cursor is still moving.
+ *
+ * Deliberately a fixed-height nothing: it must cost ~0 to render (that is the
+ * entire point) and it must not resize the scroll view as the real tree swaps
+ * in, or fast stepping would make the page jump under the reader.
+ */
+const BodyDeferred = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  style: styles.bodyDeferred
+});
+
 // Component for collapsible sections matching Sentry style
 const CollapsibleSection = ({
   title,
@@ -261,11 +276,30 @@ const UrlBreakdown = ({
 /**
  * Detailed inspector rendering request/response metadata for a single network event. Designed to
  * mimic Sentry’s layout with collapsible sections, diff views, and quick copy affordances.
+ *
+ * MEMOIZED with profiling evidence, not by reflex. Two render paths hit this
+ * subtree with unchanged props:
+ *
+ *  1. `useLiveNetworkEvent` re-subscribes when the selected ID changes, and
+ *     `subscribeToEvents` replays immediately — so every step through the
+ *     prev/next footer committed the SAME event object twice, rendering this
+ *     whole tree (expanded DataViewer included) a second time for nothing.
+ *  2. Any modal-root state change (header search, mode toggle) re-renders the
+ *     shell, and the detail body has nothing to do with it.
+ *
+ * Both props besides `event` are stable by construction — `values` is memoized
+ * in `useIgnoredPatterns` and `toggle` is module-scope there — so the bail-out
+ * actually fires.
+ *
+ * Measured baseline (js-top, example-dev-build, 5 steps over 109–324KB
+ * pokeapi responses): 307ms of React work across 5 steps ≈ 61ms of JS per
+ * step. Case 1 alone is half of that, since it re-ran the whole body render.
  */
-function NetworkEventDetailView({
+const NetworkEventDetailView = exports.NetworkEventDetailView = /*#__PURE__*/(0, _react.memo)(function NetworkEventDetailView({
   event,
-  ignoredPatterns = new Set(),
-  onTogglePattern = () => {}
+  ignoredPatterns = EMPTY_PATTERNS,
+  onTogglePattern = noop,
+  showBodies = true
 }) {
   const status = event.status ? (0, _formatting.formatHttpStatus)(event.status) : null;
   const isPending = !event.status && !event.error;
@@ -409,8 +443,15 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
               style: styles.httpDurationText,
               children: (0, _formatting.formatDuration)(event.duration)
             })]
-          }) : null, isPro ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InlineCopyButton, {
-            value: getFullRequestDetails(),
+          }) : null, isPro ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InlineCopyButton
+          // LAZY, not `getFullRequestDetails()`. CopyButton resolves a
+          // function value at press time; calling it here instead
+          // pretty-printed the headers AND both bodies on every render —
+          // four JSON.stringify passes over the full payload just to have
+          // a string nobody asked for yet. Same shape NetworkSavedScreen
+          // already uses for its copy button.
+          , {
+            value: getFullRequestDetails,
             buttonStyle: styles.copyFullButton
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
             style: styles.copyFullButton,
@@ -544,14 +585,14 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
         defaultOpen: false,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.dataViewerContainer,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
+          children: showBodies ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
             title: "",
             data: requestData,
             showTypeFilter: true,
             rawMode: true,
             initialExpanded: true,
             disableCopy: !isPro
-          })
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(BodyDeferred, {})
         })
       }) : requestBodyOmitted ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleSection, {
         title: "Request Body",
@@ -576,14 +617,14 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
         defaultOpen: true,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.dataViewerContainer,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
+          children: showBodies ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
             title: "",
             data: responseData,
             showTypeFilter: true,
             rawMode: true,
             initialExpanded: true,
             disableCopy: !isPro
-          })
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(BodyDeferred, {})
         })
       }) : responseBodyOmitted ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleSection, {
         title: "Response Body",
@@ -688,7 +729,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
       benefits: ["Copy full request details including headers and body", "Export to JSON, Markdown, or plain text", "Share request data with teammates", "Feed data to AI assistants for debugging"]
     })]
   });
-}
+});
 const styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1,
@@ -964,6 +1005,10 @@ const styles = _reactNative.StyleSheet.create({
     marginHorizontal: -12,
     marginBottom: -12
   },
+  /** Placeholder for a not-yet-mounted body tree. See BodyDeferred. */
+  bodyDeferred: {
+    height: 120
+  },
   // Error box
   errorBox: {
     flexDirection: "row",

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

@@ -13,6 +13,7 @@ var _sharedUi = require("@buoy-gg/shared-ui");
 var _networkEventStore = require("../utils/networkEventStore");
 var _networkSavedStore = require("../utils/networkSavedStore");
 var _useNetworkSaved = require("../hooks/useNetworkSaved");
+var _useNetworkSelection = require("../hooks/useNetworkSelection");
 var _useNetworkBadgeCounts = require("../hooks/useNetworkBadgeCounts");
 var _useNetworkHasMatches = require("../hooks/useNetworkHasMatches");
 var _generateNetworkCopyText = require("../utils/generateNetworkCopyText");
@@ -149,12 +150,16 @@ function NetworkSavedButton({
  * The event object is resolved at PRESS time rather than held as a prop: the
  * live store has the fresh copy while the request is in flight, and the saved
  * store is the only copy once it has been cleared or aged out.
+ *
+ * The selected id is SUBSCRIBED here rather than passed down, so stepping
+ * through requests doesn't have to re-render the modal root just to rebuild
+ * the header around a new prop.
  */
 function NetworkDetailPinActions({
-  eventId,
   isPro,
   onUpgradePress
 }) {
+  const eventId = (0, _useNetworkSelection.useSelectedNetworkEventId)();
   const state = (0, _useNetworkSaved.useNetworkSaved)();
   const {
     pinned,

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

@@ -121,16 +121,21 @@ function NetworkListScreen({
     togglePin,
     clearPinned
   } = (0, _useNetworkSaved.useNetworkSaved)();
-  const {
-    pinned,
-    rest
-  } = (0, _withPinnedFirst.splitPinned)(visibleEvents, pinnedEvents, pinnedLiveIds);
 
   // Stable identity: handed to memoized rows.
   const handleLongPress = (0, _react.useCallback)(event => {
     togglePin(event);
   }, [togglePin]);
+
+  // Everything above is a hook and must run unconditionally; everything below
+  // is work. `splitPinned` is an O(n) pass over the whole list, and this screen
+  // re-renders on every modal-root state change — including every prev/next
+  // step, where it is hidden and the result is thrown away.
   if (!visible) return null;
+  const {
+    pinned,
+    rest
+  } = (0, _withPinnedFirst.splitPinned)(visibleEvents, pinnedEvents, pinnedLiveIds);
   const isEnabled = !paused;
   const renderItem = ({
     item

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

@@ -18,6 +18,8 @@ var _NetworkSavedScreen = require("./NetworkSavedScreen");
 var _NetworkDetailStepper = require("./NetworkDetailStepper");
 var _useNetworkEventList = require("../hooks/useNetworkEventList");
 var _useLiveNetworkEvent = require("../hooks/useLiveNetworkEvent");
+var _useNetworkSelection = require("../hooks/useNetworkSelection");
+var _networkSelectionStore = require("../utils/networkSelectionStore");
 var _networkSavedStore = require("../utils/networkSavedStore");
 var _jsxRuntime = require("react/jsx-runtime");
 // ============================================================================
@@ -29,7 +31,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function NetworkDetailScreen({
   visible,
-  eventId,
   paused,
   ignoredPatternValues,
   onTogglePattern,
@@ -38,34 +39,66 @@ function NetworkDetailScreen({
   ignoredPatterns,
   fromSaved,
   savedSearch,
-  onSelectEvent,
   applySafeAreaInset
 }) {
+  /**
+   * The detail renders at the IMMEDIATE selection — every step, no delay.
+   * Measured, 100 steps at a 150ms tap interval over 64KB payloads:
+   *
+   *   whole detail, bodies included ... 647ms/step
+   *   detail with no bodies at all ....  43ms/step (over the 150ms tap gap)
+   *
+   * So ~93% of a step is the request/response BODY trees, and everything else
+   * — status, URL breakdown, timing, header counts — is affordable at any tap
+   * rate. Deferring the whole detail (which is what this used to do) therefore
+   * bought nothing a user could feel: it made the cheap 43ms wait alongside
+   * the expensive 450ms instead of splitting them.
+   *
+   * So only the expensive part waits. `bodyId` trails `selectedId` by the
+   * settle window, so `heavyReady` is false exactly while the cursor is still
+   * moving — the JSON trees are skipped during a burst and mount once you land.
+   */
+  const eventId = (0, _useNetworkSelection.useSelectedNetworkEventId)();
+  const settledId = (0, _useNetworkSelection.useNetworkBodyEventId)();
+  const heavyReady = eventId != null && eventId === settledId;
   // Resolve the ID to the live event so a request opened while pending picks
   // up its response/error in place instead of freezing on the snapshot taken
   // when the row was tapped.
   const event = (0, _useLiveNetworkEvent.useLiveNetworkEvent)(eventId, {
     paused: paused || !visible
   });
-  if (!visible || !event) return null;
+
+  // Instrumentation for the benchmark harness. Gated on `heavyReady` on
+  // purpose: the cheap chrome now renders on every step, so reporting here
+  // unconditionally would make `bodyMs` a duplicate of `cursorMs`. What the
+  // harness needs to know is when the expensive TREES landed.
+  (0, _react.useEffect)(() => {
+    if (visible && event && heavyReady) {
+      _networkSelectionStore.networkSelectionStore.reportRendered(event.id);
+    }
+  }, [visible, event, heavyReady]);
+  if (!visible) return null;
   // Column: the detail body scrolls, the stepper stays pinned under it. The
   // body owns its scroll here (see `bodyOwnsScroll`) — inside JsModal's
-  // wrapper the footer would scroll away with the content.
+  // wrapper the footer would scroll away with the content. The spacer keeps
+  // the footer at the bottom on the rare frame where the ID resolves to
+  // nothing (cleared, aged out, and not saved).
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.detailRoot,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkEventDetailView.NetworkEventDetailView, {
+    children: [event ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkEventDetailView.NetworkEventDetailView, {
       event: event,
       ignoredPatterns: ignoredPatternValues,
-      onTogglePattern: onTogglePattern
+      onTogglePattern: onTogglePattern,
+      showBodies: heavyReady
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.detailBodyFallback
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkDetailStepper.NetworkDetailStepper, {
-      eventId: event.id,
       paused: paused,
       filter: filter,
       ignoredPatterns: ignoredPatterns,
       isPro: isPro,
       fromSaved: fromSaved,
       savedSearch: savedSearch,
-      onSelect: onSelectEvent,
       applySafeAreaInset: applySafeAreaInset
     })]
   });
@@ -160,9 +193,15 @@ function NetworkModalInner({
     if (controlledPause) onPausedChange(value);else setPausedState(value);
   };
   const [filter, setFilter] = (0, _react.useState)({});
-  // The SELECTION is UI state (an ID); the event object it points at is read
-  // live from the store by the detail screen — see useLiveNetworkEvent.
-  const [selectedEventId, setSelectedEventId] = (0, _react.useState)(null);
+  /**
+   * The cursor lives in `networkSelectionStore`, and the root subscribes to
+   * the BOOLEAN only. That is the whole point: this component re-renders
+   * `JsModal` (which can never bail — its `header` prop is a fresh object
+   * every render), the entire header, and all five screens. None of them care
+   * WHICH request is selected, only THAT one is, and this flips twice a
+   * session instead of once per tap.
+   */
+  const hasSelection = (0, _useNetworkSelection.useHasNetworkSelection)();
   const [showFilterView, setShowFilterView] = (0, _react.useState)(false);
   const [showSavedView, setShowSavedView] = (0, _react.useState)(false);
   const [activeTab, setActiveTab] = (0, _react.useState)("filters");
@@ -236,12 +275,12 @@ function NetworkModalInner({
 
   // Simple handlers - no useCallback needed per rule2
   const handleBack = () => {
-    setSelectedEventId(null);
+    _networkSelectionStore.networkSelectionStore.clear();
   };
 
   // Stable identity: this is passed down to the memoized list rows.
   const handleEventPress = (0, _react.useCallback)(event => {
-    setSelectedEventId(event.id);
+    _networkSelectionStore.networkSelectionStore.select(event.id);
   }, []);
   const handleSearch = text => {
     setSearchText(text);
@@ -299,7 +338,7 @@ function NetworkModalInner({
     }
 
     // Event detail view header
-    if (selectedEventId) {
+    if (hasSelection) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
           onBack: handleBack
@@ -308,7 +347,6 @@ function NetworkModalInner({
           centered: true
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderLive.NetworkDetailPinActions, {
-            eventId: selectedEventId,
             isPro: isPro,
             onUpgradePress: () => showUpgrade("saved")
           })
@@ -422,13 +460,12 @@ function NetworkModalInner({
   // same deal. The DETAIL screen owns it as well, so its prev/next footer
   // stays pinned instead of scrolling away with the body. Filter/copy still
   // use the wrapper.
-  const bodyOwnsScroll = selectedEventId != null || !showFilterView;
+  const bodyOwnsScroll = hasSelection || !showFilterView;
   const body = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.container,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NetworkDetailScreen, {
-        visible: selectedEventId != null,
-        eventId: selectedEventId,
+        visible: hasSelection,
         paused: paused,
         ignoredPatternValues: ignoredPatternValues,
         onTogglePattern: toggleIgnoredPattern,
@@ -439,13 +476,12 @@ function NetworkModalInner({
         // the user came from — and therefore which one to step through.
         ,
         fromSaved: showSavedView,
-        savedSearch: savedSearch,
-        onSelectEvent: setSelectedEventId
+        savedSearch: savedSearch
         // Inline (desktop panel) has no home indicator to clear.
         ,
         applySafeAreaInset: !inline && modalMode === "bottomSheet"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NetworkFilterScreen, {
-        visible: showFilterView && activeTab === "filters" && !selectedEventId,
+        visible: showFilterView && activeTab === "filters" && !hasSelection,
         paused: paused,
         isPro: isPro,
         filter: filter,
@@ -455,7 +491,7 @@ function NetworkModalInner({
         onAddPattern: addIgnoredPattern,
         onTogglePatternMode: toggleIgnoredPatternMode
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NetworkCopyScreen, {
-        visible: showFilterView && activeTab === "copy" && !selectedEventId,
+        visible: showFilterView && activeTab === "copy" && !hasSelection,
         paused: paused,
         isPro: isPro,
         filter: filter,
@@ -463,7 +499,7 @@ function NetworkModalInner({
         settings: copySettings,
         onSettingsChange: setCopySettings
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkSavedScreen.NetworkSavedScreen, {
-        visible: showSavedView && selectedEventId == null && !showFilterView,
+        visible: showSavedView && !hasSelection && !showFilterView,
         isPro: isPro,
         copySettings: copySettings,
         search: savedSearch,
@@ -471,7 +507,7 @@ function NetworkModalInner({
         onEventPress: handleEventPress,
         onUpgradePress: () => showUpgrade("saved")
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkListScreen.NetworkListScreen, {
-        visible: selectedEventId == null && !showFilterView && !showSavedView,
+        visible: !hasSelection && !showFilterView && !showSavedView,
         paused: paused,
         filter: filter,
         ignoredPatterns: ignoredPatterns,
@@ -529,6 +565,10 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1,
     minHeight: 0
   },
+  /** Holds the footer down when the selected ID resolves to no event. */
+  detailBodyFallback: {
+    flex: 1
+  },
   /** Inline shell — fills the host panel; `minHeight: 0` so the list's own
    * FlatList can scroll instead of stretching the column. */
   inlineRoot: {

package/lib/commonjs/network/hooks/useNetworkSelection.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHasNetworkSelection = useHasNetworkSelection;
+exports.useNetworkBodyEventId = useNetworkBodyEventId;
+exports.useNetworkCursor = useNetworkCursor;
+exports.useSelectedNetworkEventId = useSelectedNetworkEventId;
+var _react = require("react");
+var _networkSelectionStore = require("../utils/networkSelectionStore");
+/**
+ * Narrow subscriptions to the prev/next cursor (`networkSelectionStore`).
+ *
+ * One hook per consumer, each returning the SMALLEST value that consumer
+ * renders — that is the whole point of moving the cursor into a store. The
+ * modal root takes `useHasNetworkSelection()` (a boolean that flips twice a
+ * session), so a step no longer re-renders `JsModal`, the header and all five
+ * screens; the footer and the body take the parts that actually change.
+ */
+
+const subscribe = onChange => _networkSelectionStore.networkSelectionStore.subscribe(onChange);
+const getState = () => _networkSelectionStore.networkSelectionStore.getState();
+
+/**
+ * Is ANYTHING selected — i.e. is the detail screen up?
+ *
+ * `useSyncExternalStore` compares the selector's result, so the root only
+ * re-renders when this boolean flips, not on every step.
+ */
+function useHasNetworkSelection() {
+  return (0, _react.useSyncExternalStore)(subscribe, () => getState().selectedId != null, () => getState().selectedId != null);
+}
+
+/** Where the USER is. Moves synchronously on tap — footer, header pin actions. */
+function useSelectedNetworkEventId() {
+  return (0, _react.useSyncExternalStore)(subscribe, () => getState().selectedId, () => getState().selectedId);
+}
+
+/** What the BODY may render. Lags `selectedId` — see networkSelectionStore. */
+function useNetworkBodyEventId() {
+  return (0, _react.useSyncExternalStore)(subscribe, () => getState().bodyId, () => getState().bodyId);
+}
+
+/** Cursor position + list length, for the "REQUEST n OF m" counter. */
+function useNetworkCursor() {
+  const index = (0, _react.useSyncExternalStore)(subscribe, () => getState().index, () => getState().index);
+  const total = (0, _react.useSyncExternalStore)(subscribe, () => getState().ids.length, () => getState().ids.length);
+  return {
+    index,
+    total
+  };
+}