@buoy-gg/network 7.0.11 → 7.0.13

package/README.md

@@ -40,6 +40,7 @@ Want a different label or color? Build the tool with `createNetworkTool({ name,
 - **Full request detail** — request/response headers, payloads, HTTP status, and duration for every call, with status-colored rows.
 - **Filter and search** — narrow by status code, HTTP method, or URL pattern; search captured events; pause/resume capture; clear history.
 - **Pin the one that failed** — pin a request to hold it at the top of the list (ignoring your filters), or save it to a separate favorites list. Both keep a full snapshot, so it survives Clear, the 500-request cap, and an app restart. Long-press a row, or use the buttons in the request detail header.
+- **Step between requests** — the detail view has a Previous/Next footer that walks exactly what the list was showing (same pins, filters, and search — or your Saved list), so comparing two calls doesn't mean going back and finding your place.
 - **Ignore the noise** — a shared ignored-domains/URL filter (`useIgnoredPatterns`) hides endpoints you never want to see, shared with the Events tool.
 - **Hooks for custom UIs** — `useNetworkEvents`, `useNetworkEventList`, `useNetworkBadgeCounts`, and `useNetworkSaved` expose the capture stream with narrow per-consumer subscriptions.
 

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,25 @@ 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 {
     visibleEvents
@@ -66,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.
@@ -78,15 +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",
-    onPrevious: () => {
-      const target = ordered[index - 1];
-      if (target) onSelect(target.id);
-    },
-    onNext: () => {
-      const target = ordered[index + 1];
-      if (target) onSelect(target.id);
-    }
+    applySafeAreaInset: applySafeAreaInset,
+    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

@@ -15,8 +15,11 @@ var _NetworkCopySettingsView = require("./NetworkCopySettingsView");
 var _NetworkHeaderLive = require("./NetworkHeaderLive");
 var _NetworkListScreen = require("./NetworkListScreen");
 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");
 // ============================================================================
@@ -28,22 +31,76 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function NetworkDetailScreen({
   visible,
-  eventId,
   paused,
   ignoredPatternValues,
-  onTogglePattern
+  onTogglePattern,
+  isPro,
+  filter,
+  ignoredPatterns,
+  fromSaved,
+  savedSearch,
+  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;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkEventDetailView.NetworkEventDetailView, {
-    event: event,
-    ignoredPatterns: ignoredPatternValues,
-    onTogglePattern: onTogglePattern
+
+  // 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. 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: [event ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkEventDetailView.NetworkEventDetailView, {
+      event: event,
+      ignoredPatterns: ignoredPatternValues,
+      onTogglePattern: onTogglePattern,
+      showBodies: heavyReady
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.detailBodyFallback
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkDetailStepper.NetworkDetailStepper, {
+      paused: paused,
+      filter: filter,
+      ignoredPatterns: ignoredPatterns,
+      isPro: isPro,
+      fromSaved: fromSaved,
+      savedSearch: savedSearch,
+      applySafeAreaInset: applySafeAreaInset
+    })]
   });
 }
 function NetworkFilterScreen({
@@ -136,14 +193,24 @@ 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");
   const [searchText, setSearchText] = (0, _react.useState)("");
   const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
+  // The Saved screen's search box lives HERE, not in that screen, because the
+  // detail footer steps through the same list the user was just looking at —
+  // and the Saved screen is unmounted while a detail is open.
+  const [savedSearch, setSavedSearch] = (0, _react.useState)("");
   const searchInputRef = (0, _react.useRef)(null);
   // 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.
@@ -208,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);
@@ -228,8 +295,13 @@ function NetworkModalInner({
       status: prev.status === status ? undefined : status
     }));
   };
-  const handleModeChange = _mode => {
-    // Mode changes handled by JsModal
+
+  // JsModal owns the mode; the only thing this modal needs it for is the
+  // detail footer's bottom inset — a bottom sheet sits on the home indicator,
+  // a floating window does not (same call StorageModalWithTabs makes).
+  const [modalMode, setModalMode] = (0, _react.useState)("bottomSheet");
+  const handleModeChange = mode => {
+    setModalMode(mode);
   };
   (0, _react.useEffect)(() => {
     if (isSearchActive) {
@@ -266,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
@@ -275,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")
           })
@@ -386,19 +457,31 @@ function NetworkModalInner({
   // 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). The Saved screen is a FlatList too, so it takes the
-  // same deal. Detail/filter/copy still use the wrapper.
-  const listOwnsScroll = selectedEventId == null && !showFilterView;
+  // 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 = 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
+        onTogglePattern: toggleIgnoredPattern,
+        isPro: isPro,
+        filter: filter,
+        ignoredPatterns: ignoredPatterns
+        // `showSavedView` is what Back returns to, so it is also which list
+        // the user came from — and therefore which one to step through.
+        ,
+        fromSaved: showSavedView,
+        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,
@@ -408,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,
@@ -416,13 +499,15 @@ 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,
+        onSearchChange: setSavedSearch,
         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,
@@ -464,7 +549,7 @@ function NetworkModalInner({
     enablePersistence: true,
     initialMode: "bottomSheet",
     enableGlitchEffects: true,
-    disableScrollWrapper: listOwnsScroll,
+    disableScrollWrapper: bodyOwnsScroll,
     styles: {},
     children: body
   });
@@ -474,6 +559,16 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1,
     backgroundColor: _sharedUi.macOSColors.background.base
   },
+  /** Detail = scrolling body + pinned stepper footer. `minHeight: 0` so the
+   * body's ScrollView scrolls instead of stretching the column. */
+  detailRoot: {
+    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/components/NetworkSavedScreen.js

@@ -10,7 +10,7 @@ var _sharedUi = require("@buoy-gg/shared-ui");
 var _NetworkEventItemCompact = require("./NetworkEventItemCompact");
 var _NetworkUpgradeBanner = require("./NetworkUpgradeBanner");
 var _generateNetworkCopyText = require("../utils/generateNetworkCopyText");
-var _filterNetworkEvents = require("../utils/filterNetworkEvents");
+var _selectSavedEvents = require("../utils/selectSavedEvents");
 var _useNetworkSaved = require("../hooks/useNetworkSaved");
 var _networkSavedStore = require("../utils/networkSavedStore");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -51,6 +51,8 @@ function NetworkSavedScreen({
   visible,
   isPro,
   copySettings,
+  search: searchProp,
+  onSearchChange,
   onEventPress,
   onUpgradePress
 }) {
@@ -60,22 +62,17 @@ function NetworkSavedScreen({
     toggleSave,
     clearSaved
   } = (0, _useNetworkSaved.useNetworkSaved)();
-  const [search, setSearch] = (0, _react.useState)("");
+  const [searchState, setSearchState] = (0, _react.useState)("");
+  const controlled = searchProp != null && onSearchChange != null;
+  const search = controlled ? searchProp : searchState;
+  const setSearch = controlled ? onSearchChange : setSearchState;
   if (!visible) return null;
 
-  /**
-   * A downgrade (or a limit change) can leave a free user holding more saves
-   * than the free tier allows. Rather than deleting their data, the overflow
-   * is LOCKED — oldest first, so the newest saves stay reachable — and the
-   * banner offers the upgrade that unlocks it.
-   */
-  const limit = isPro ? _networkSavedStore.MAX_SAVED : _networkSavedStore.FREE_TIER_SAVED_LIMIT;
-  const unlocked = savedRecords.slice(0, limit);
-  const lockedCount = savedRecords.length - unlocked.length;
-  const events = unlocked.map(record => record.event);
-  const filtered = search ? (0, _filterNetworkEvents.filterNetworkEvents)(events, {
-    searchText: search
-  }) : events;
+  // Shared with the detail footer, so "Next" can't disagree with the row below.
+  const {
+    events: filtered,
+    lockedCount
+  } = (0, _selectSavedEvents.selectSavedEvents)(savedRecords, isPro, search);
   const handleLongPress = event => {
     toggleSave(event);
   };