@buoy-gg/network 7.0.10 → 7.0.12

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/network/components/NetworkDetailStepper.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NetworkDetailStepper = void 0;
+var _react = require("react");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _useNetworkEventList = require("../hooks/useNetworkEventList");
+var _useNetworkSaved = require("../hooks/useNetworkSaved");
+var _withPinnedFirst = require("../utils/withPinnedFirst");
+var _selectSavedEvents = require("../utils/selectSavedEvents");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Previous/Next footer for the request DETAIL screen — step through requests
+ * without bouncing back to the list.
+ *
+ * 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.
+ *
+ * The order it steps through is EXACTLY what the list screen renders —
+ * `[...pinned, ...rest]` off the same `useNetworkEventList` + `splitPinned`
+ * derivation — so "Next" always lands on the row below the one the user
+ * tapped. Because the live filter is an input, typing in the search box or
+ * flipping a status chip re-scopes the stepper in place; the counter is
+ * "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.
+ */
+
+const NetworkDetailStepper = exports.NetworkDetailStepper = /*#__PURE__*/(0, _react.memo)(function NetworkDetailStepper({
+  eventId,
+  paused,
+  filter,
+  ignoredPatterns,
+  isPro,
+  fromSaved,
+  savedSearch,
+  onSelect,
+  applySafeAreaInset
+}) {
+  const {
+    visibleEvents
+  } = (0, _useNetworkEventList.useNetworkEventList)({
+    filter,
+    ignoredPatterns,
+    paused,
+    isPro
+  });
+  const {
+    pinnedEvents,
+    pinnedLiveIds,
+    savedRecords
+  } = (0, _useNetworkSaved.useNetworkSaved)();
+  const ordered = (0, _react.useMemo)(() => {
+    if (fromSaved) {
+      return (0, _selectSavedEvents.selectSavedEvents)(savedRecords, isPro, savedSearch).events;
+    }
+    // Same split the list screen does — pins render above the FlatList, so
+    // they come first here too.
+    const {
+      pinned,
+      rest
+    } = (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);
+
+  // 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.
+  // There is no coherent "next" in that state, so show no footer rather than a
+  // counter that lies.
+  if (index < 0) return null;
+
+  // Both lists are newest-first, so "Previous" walks toward the NEWER request —
+  // 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,
+    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);
+    }
+  });
+});

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

@@ -15,6 +15,7 @@ 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 _networkSavedStore = require("../utils/networkSavedStore");
@@ -31,7 +32,14 @@ function NetworkDetailScreen({
   eventId,
   paused,
   ignoredPatternValues,
-  onTogglePattern
+  onTogglePattern,
+  isPro,
+  filter,
+  ignoredPatterns,
+  fromSaved,
+  savedSearch,
+  onSelectEvent,
+  applySafeAreaInset
 }) {
   // 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
@@ -40,10 +48,26 @@ function NetworkDetailScreen({
     paused: paused || !visible
   });
   if (!visible || !event) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkEventDetailView.NetworkEventDetailView, {
-    event: event,
-    ignoredPatterns: ignoredPatternValues,
-    onTogglePattern: onTogglePattern
+  // 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.
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.detailRoot,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkEventDetailView.NetworkEventDetailView, {
+      event: event,
+      ignoredPatterns: ignoredPatternValues,
+      onTogglePattern: onTogglePattern
+    }), /*#__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
+    })]
   });
 }
 function NetworkFilterScreen({
@@ -144,6 +168,10 @@ function NetworkModalInner({
   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.
@@ -228,8 +256,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) {
@@ -386,8 +419,10 @@ 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 = selectedEventId != null || !showFilterView;
   const body = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.container,
@@ -396,7 +431,19 @@ function NetworkModalInner({
         eventId: selectedEventId,
         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,
+        onSelectEvent: setSelectedEventId
+        // Inline (desktop panel) has no home indicator to clear.
+        ,
+        applySafeAreaInset: !inline && modalMode === "bottomSheet"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NetworkFilterScreen, {
         visible: showFilterView && activeTab === "filters" && !selectedEventId,
         paused: paused,
@@ -419,6 +466,8 @@ function NetworkModalInner({
         visible: showSavedView && selectedEventId == null && !showFilterView,
         isPro: isPro,
         copySettings: copySettings,
+        search: savedSearch,
+        onSearchChange: setSavedSearch,
         onEventPress: handleEventPress,
         onUpgradePress: () => showUpgrade("saved")
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkListScreen.NetworkListScreen, {
@@ -464,7 +513,7 @@ function NetworkModalInner({
     enablePersistence: true,
     initialMode: "bottomSheet",
     enableGlitchEffects: true,
-    disableScrollWrapper: listOwnsScroll,
+    disableScrollWrapper: bodyOwnsScroll,
     styles: {},
     children: body
   });
@@ -474,6 +523,12 @@ 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
+  },
   /** 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);
   };

package/lib/commonjs/network/utils/selectSavedEvents.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectSavedEvents = selectSavedEvents;
+var _filterNetworkEvents = require("./filterNetworkEvents");
+var _networkSavedStore = require("./networkSavedStore");
+/**
+ * The SAVED screen's visible list, as a pure function.
+ *
+ * Two places need the exact same list: the screen that renders it
+ * (`NetworkSavedScreen`) and the detail footer that steps through it
+ * (`NetworkDetailStepper`). If they derived it independently, "Next" would
+ * eventually disagree with the row below — the same drift `withPinnedFirst`
+ * exists to prevent for the live list.
+ */
+
+function selectSavedEvents(savedRecords, isPro, search) {
+  /**
+   * 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.
+   */
+  const limit = isPro ? _networkSavedStore.MAX_SAVED : _networkSavedStore.FREE_TIER_SAVED_LIMIT;
+  const unlocked = savedRecords.slice(0, limit);
+  const events = unlocked.map(record => record.event);
+  return {
+    events: search ? (0, _filterNetworkEvents.filterNetworkEvents)(events, {
+      searchText: search
+    }) : events,
+    lockedCount: savedRecords.length - unlocked.length
+  };
+}

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

@@ -0,0 +1,90 @@
+"use strict";
+
+/**
+ * Previous/Next footer for the request DETAIL screen — step through requests
+ * without bouncing back to the list.
+ *
+ * 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.
+ *
+ * The order it steps through is EXACTLY what the list screen renders —
+ * `[...pinned, ...rest]` off the same `useNetworkEventList` + `splitPinned`
+ * derivation — so "Next" always lands on the row below the one the user
+ * tapped. Because the live filter is an input, typing in the search box or
+ * flipping a status chip re-scopes the stepper in place; the counter is
+ * "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.
+ */
+
+import { memo, useMemo } from "react";
+import { EventStepperFooter } from "@buoy-gg/shared-ui";
+import { useNetworkEventList } from "../hooks/useNetworkEventList";
+import { useNetworkSaved } from "../hooks/useNetworkSaved";
+import { splitPinned } from "../utils/withPinnedFirst";
+import { selectSavedEvents } from "../utils/selectSavedEvents";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const NetworkDetailStepper = /*#__PURE__*/memo(function NetworkDetailStepper({
+  eventId,
+  paused,
+  filter,
+  ignoredPatterns,
+  isPro,
+  fromSaved,
+  savedSearch,
+  onSelect,
+  applySafeAreaInset
+}) {
+  const {
+    visibleEvents
+  } = useNetworkEventList({
+    filter,
+    ignoredPatterns,
+    paused,
+    isPro
+  });
+  const {
+    pinnedEvents,
+    pinnedLiveIds,
+    savedRecords
+  } = useNetworkSaved();
+  const ordered = useMemo(() => {
+    if (fromSaved) {
+      return selectSavedEvents(savedRecords, isPro, savedSearch).events;
+    }
+    // Same split the list screen does — pins render above the FlatList, so
+    // they come first here too.
+    const {
+      pinned,
+      rest
+    } = 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);
+
+  // 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.
+  // There is no coherent "next" in that state, so show no footer rather than a
+  // counter that lies.
+  if (index < 0) return null;
+
+  // Both lists are newest-first, so "Previous" walks toward the NEWER request —
+  // the same direction as scrolling up, which is what the arrow means here.
+  return /*#__PURE__*/_jsx(EventStepperFooter, {
+    currentIndex: index,
+    totalItems: ordered.length,
+    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);
+    }
+  });
+});

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

@@ -10,6 +10,7 @@ import { NetworkCopySettingsView, DEFAULT_COPY_SETTINGS } from "./NetworkCopySet
 import { NetworkHeaderBadges, NetworkClearButton, NetworkDetailPinActions, NetworkHeaderCopyButton, NetworkSavedButton } from "./NetworkHeaderLive";
 import { NetworkListScreen } from "./NetworkListScreen";
 import { NetworkSavedScreen } from "./NetworkSavedScreen";
+import { NetworkDetailStepper } from "./NetworkDetailStepper";
 import { useNetworkEventList } from "../hooks/useNetworkEventList";
 import { useLiveNetworkEvent } from "../hooks/useLiveNetworkEvent";
 import { FREE_TIER_SAVED_LIMIT, MAX_SAVED } from "../utils/networkSavedStore";
@@ -26,7 +27,14 @@ function NetworkDetailScreen({
   eventId,
   paused,
   ignoredPatternValues,
-  onTogglePattern
+  onTogglePattern,
+  isPro,
+  filter,
+  ignoredPatterns,
+  fromSaved,
+  savedSearch,
+  onSelectEvent,
+  applySafeAreaInset
 }) {
   // 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
@@ -35,10 +43,26 @@ function NetworkDetailScreen({
     paused: paused || !visible
   });
   if (!visible || !event) return null;
-  return /*#__PURE__*/_jsx(NetworkEventDetailView, {
-    event: event,
-    ignoredPatterns: ignoredPatternValues,
-    onTogglePattern: onTogglePattern
+  // 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.
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.detailRoot,
+    children: [/*#__PURE__*/_jsx(NetworkEventDetailView, {
+      event: event,
+      ignoredPatterns: ignoredPatternValues,
+      onTogglePattern: onTogglePattern
+    }), /*#__PURE__*/_jsx(NetworkDetailStepper, {
+      eventId: event.id,
+      paused: paused,
+      filter: filter,
+      ignoredPatterns: ignoredPatterns,
+      isPro: isPro,
+      fromSaved: fromSaved,
+      savedSearch: savedSearch,
+      onSelect: onSelectEvent,
+      applySafeAreaInset: applySafeAreaInset
+    })]
   });
 }
 function NetworkFilterScreen({
@@ -139,6 +163,10 @@ function NetworkModalInner({
   const [activeTab, setActiveTab] = useState("filters");
   const [searchText, setSearchText] = useState("");
   const [isSearchActive, setIsSearchActive] = 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] = useState("");
   const searchInputRef = 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.
@@ -223,8 +251,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] = useState("bottomSheet");
+  const handleModeChange = mode => {
+    setModalMode(mode);
   };
   useEffect(() => {
     if (isSearchActive) {
@@ -381,8 +414,10 @@ 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 = selectedEventId != null || !showFilterView;
   const body = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.container,
@@ -391,7 +426,19 @@ function NetworkModalInner({
         eventId: selectedEventId,
         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,
+        onSelectEvent: setSelectedEventId
+        // Inline (desktop panel) has no home indicator to clear.
+        ,
+        applySafeAreaInset: !inline && modalMode === "bottomSheet"
       }), /*#__PURE__*/_jsx(NetworkFilterScreen, {
         visible: showFilterView && activeTab === "filters" && !selectedEventId,
         paused: paused,
@@ -414,6 +461,8 @@ function NetworkModalInner({
         visible: showSavedView && selectedEventId == null && !showFilterView,
         isPro: isPro,
         copySettings: copySettings,
+        search: savedSearch,
+        onSearchChange: setSavedSearch,
         onEventPress: handleEventPress,
         onUpgradePress: () => showUpgrade("saved")
       }), /*#__PURE__*/_jsx(NetworkListScreen, {
@@ -459,7 +508,7 @@ function NetworkModalInner({
     enablePersistence: true,
     initialMode: "bottomSheet",
     enableGlitchEffects: true,
-    disableScrollWrapper: listOwnsScroll,
+    disableScrollWrapper: bodyOwnsScroll,
     styles: {},
     children: body
   });
@@ -469,6 +518,12 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: 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
+  },
   /** Inline shell — fills the host panel; `minHeight: 0` so the list's own
    * FlatList can scroll instead of stretching the column. */
   inlineRoot: {

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

@@ -23,9 +23,9 @@ import { Bookmark, CopyButton, Search, macOSColors } from "@buoy-gg/shared-ui";
 import { NetworkEventItemCompact } from "./NetworkEventItemCompact";
 import { NetworkUpgradeBanner } from "./NetworkUpgradeBanner";
 import { generateNetworkCopyText } from "../utils/generateNetworkCopyText";
-import { filterNetworkEvents } from "../utils/filterNetworkEvents";
+import { selectSavedEvents } from "../utils/selectSavedEvents";
 import { useNetworkSaved } from "../hooks/useNetworkSaved";
-import { FREE_TIER_SAVED_LIMIT, MAX_SAVED } from "../utils/networkSavedStore";
+import { FREE_TIER_SAVED_LIMIT } from "../utils/networkSavedStore";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const keyExtractor = item => item.id;
 function EmptyState() {
@@ -47,6 +47,8 @@ export function NetworkSavedScreen({
   visible,
   isPro,
   copySettings,
+  search: searchProp,
+  onSearchChange,
   onEventPress,
   onUpgradePress
 }) {
@@ -56,22 +58,17 @@ export function NetworkSavedScreen({
     toggleSave,
     clearSaved
   } = useNetworkSaved();
-  const [search, setSearch] = useState("");
+  const [searchState, setSearchState] = 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 ? MAX_SAVED : 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 ? filterNetworkEvents(events, {
-    searchText: search
-  }) : events;
+  // Shared with the detail footer, so "Next" can't disagree with the row below.
+  const {
+    events: filtered,
+    lockedCount
+  } = selectSavedEvents(savedRecords, isPro, search);
   const handleLongPress = event => {
     toggleSave(event);
   };

package/lib/module/network/utils/selectSavedEvents.js

@@ -0,0 +1,30 @@
+"use strict";
+
+/**
+ * The SAVED screen's visible list, as a pure function.
+ *
+ * Two places need the exact same list: the screen that renders it
+ * (`NetworkSavedScreen`) and the detail footer that steps through it
+ * (`NetworkDetailStepper`). If they derived it independently, "Next" would
+ * eventually disagree with the row below — the same drift `withPinnedFirst`
+ * exists to prevent for the live list.
+ */
+
+import { filterNetworkEvents } from "./filterNetworkEvents";
+import { FREE_TIER_SAVED_LIMIT, MAX_SAVED } from "./networkSavedStore";
+export function selectSavedEvents(savedRecords, isPro, search) {
+  /**
+   * 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.
+   */
+  const limit = isPro ? MAX_SAVED : FREE_TIER_SAVED_LIMIT;
+  const unlocked = savedRecords.slice(0, limit);
+  const events = unlocked.map(record => record.event);
+  return {
+    events: search ? filterNetworkEvents(events, {
+      searchText: search
+    }) : events,
+    lockedCount: savedRecords.length - unlocked.length
+  };
+}

package/lib/typescript/network/components/NetworkDetailStepper.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Previous/Next footer for the request DETAIL screen — step through requests
+ * without bouncing back to the list.
+ *
+ * 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.
+ *
+ * The order it steps through is EXACTLY what the list screen renders —
+ * `[...pinned, ...rest]` off the same `useNetworkEventList` + `splitPinned`
+ * derivation — so "Next" always lands on the row below the one the user
+ * tapped. Because the live filter is an input, typing in the search box or
+ * flipping a status chip re-scopes the stepper in place; the counter is
+ * "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.
+ */
+import { type IgnoredPattern } from "@buoy-gg/shared-ui";
+import type { NetworkFilter } from "../types";
+interface NetworkDetailStepperProps {
+    /** The request currently on screen. */
+    eventId: string;
+    paused: boolean;
+    filter: NetworkFilter;
+    ignoredPatterns: readonly IgnoredPattern[];
+    isPro: boolean;
+    /** Detail was opened from the Saved screen — step through THAT list. */
+    fromSaved: boolean;
+    /** The Saved screen's search box (lifted to the modal root so both agree). */
+    savedSearch: string;
+    onSelect: (eventId: string) => void;
+    /** Only a bottom sheet sits on the home indicator — see NetworkModal. */
+    applySafeAreaInset: boolean;
+}
+export declare const NetworkDetailStepper: import("react").NamedExoticComponent<NetworkDetailStepperProps>;
+export {};
+//# sourceMappingURL=NetworkDetailStepper.d.ts.map

package/lib/typescript/network/components/NetworkDetailStepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkDetailStepper.d.ts","sourceRoot":"","sources":["../../../../src/network/components/NetworkDetailStepper.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAGH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,EAAgB,aAAa,EAAE,MAAM,UAAU,CAAC;AAM5D,UAAU,yBAAyB;IACjC,uCAAuC;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,aAAa,CAAC;IACtB,eAAe,EAAE,SAAS,cAAc,EAAE,CAAC;IAC3C,KAAK,EAAE,OAAO,CAAC;IACf,wEAAwE;IACxE,SAAS,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,yEAAyE;IACzE,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,oBAAoB,iEAmE/B,CAAC"}

package/lib/typescript/network/components/NetworkModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkModal.d.ts","sourceRoot":"","sources":["../../../../src/network/components/NetworkModal.tsx"],"names":[],"mappings":"AAiDA,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C;AA0lBD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAMpD;AAED,MAAM,WAAW,oBAAoB;IACnC,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,KAAK,GAAE,oBAAyB,+BAa/D"}
+{"version":3,"file":"NetworkModal.d.ts","sourceRoot":"","sources":["../../../../src/network/components/NetworkModal.tsx"],"names":[],"mappings":"AAkDA,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C;AAopBD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAMpD;AAED,MAAM,WAAW,oBAAoB;IACnC,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,KAAK,GAAE,oBAAyB,+BAa/D"}

package/lib/typescript/network/components/NetworkSavedScreen.d.ts

@@ -20,10 +20,21 @@ interface NetworkSavedScreenProps {
     visible: boolean;
     isPro: boolean;
     copySettings: CopySettings;
+    /**
+     * Controlled search box — pass both halves or neither, same deal as
+     * NetworkModal's `paused`.
+     *
+     * NetworkModal controls it because the detail screen's prev/next footer
+     * steps through THIS list, and this screen is unmounted while a detail is
+     * open (see NetworkDetailStepper). A host rendering the screen on its own
+     * can omit both and keep the local state.
+     */
+    search?: string;
+    onSearchChange?: (search: string) => void;
     /** Row tap — the root's setSelectedEvent (inherently stable setter). */
     onEventPress: (event: NetworkEvent) => void;
     onUpgradePress: () => void;
 }
-export declare function NetworkSavedScreen({ visible, isPro, copySettings, onEventPress, onUpgradePress, }: NetworkSavedScreenProps): import("react").JSX.Element | null;
+export declare function NetworkSavedScreen({ visible, isPro, copySettings, search: searchProp, onSearchChange, onEventPress, onUpgradePress, }: NetworkSavedScreenProps): import("react").JSX.Element | null;
 export {};
 //# sourceMappingURL=NetworkSavedScreen.d.ts.map

package/lib/typescript/network/components/NetworkSavedScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkSavedScreen.d.ts","sourceRoot":"","sources":["../../../../src/network/components/NetworkSavedScreen.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAWH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAyB9D,UAAU,uBAAuB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;IACf,YAAY,EAAE,YAAY,CAAC;IAC3B,wEAAwE;IACxE,YAAY,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,cAAc,GACf,EAAE,uBAAuB,sCAgIzB"}
+{"version":3,"file":"NetworkSavedScreen.d.ts","sourceRoot":"","sources":["../../../../src/network/components/NetworkSavedScreen.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAWH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAqB9D,UAAU,uBAAuB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;IACf,YAAY,EAAE,YAAY,CAAC;IAC3B;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,wEAAwE;IACxE,YAAY,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,KAAK,EACL,YAAY,EACZ,MAAM,EAAE,UAAU,EAClB,cAAc,EACd,YAAY,EACZ,cAAc,GACf,EAAE,uBAAuB,sCA2HzB"}

package/lib/typescript/network/utils/selectSavedEvents.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The SAVED screen's visible list, as a pure function.
+ *
+ * Two places need the exact same list: the screen that renders it
+ * (`NetworkSavedScreen`) and the detail footer that steps through it
+ * (`NetworkDetailStepper`). If they derived it independently, "Next" would
+ * eventually disagree with the row below — the same drift `withPinnedFirst`
+ * exists to prevent for the live list.
+ */
+import type { NetworkEvent } from "../types";
+import { type SavedNetworkRecord } from "./networkSavedStore";
+export interface SavedEventSelection {
+    /** Unlocked saves, minus anything the search box excludes. */
+    events: NetworkEvent[];
+    /** Saves past the tier ceiling — rendered as the upgrade banner, not rows. */
+    lockedCount: number;
+}
+export declare function selectSavedEvents(savedRecords: readonly SavedNetworkRecord[], isPro: boolean, search: string): SavedEventSelection;
+//# sourceMappingURL=selectSavedEvents.d.ts.map

package/lib/typescript/network/utils/selectSavedEvents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectSavedEvents.d.ts","sourceRoot":"","sources":["../../../../src/network/utils/selectSavedEvents.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,OAAO,EAGL,KAAK,kBAAkB,EACxB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,WAAW,mBAAmB;IAClC,8DAA8D;IAC9D,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,8EAA8E;IAC9E,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAC/B,YAAY,EAAE,SAAS,kBAAkB,EAAE,EAC3C,KAAK,EAAE,OAAO,EACd,MAAM,EAAE,MAAM,GACb,mBAAmB,CAarB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/network",
-  "version": "7.0.10",
+  "version": "7.0.12",
   "description": "In-app network inspector for React Native — requests, responses, timing & errors live, with GraphQL operation parsing. Part of Buoy devtools.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -26,7 +26,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/shared-ui": "^7.0.10"
+    "@buoy-gg/shared-ui": "^7.0.12"
   },
   "peerDependencies": {
     "react": "*",