@buoy-gg/network 7.0.12 → 7.0.14

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

@@ -11,6 +11,8 @@ var _NetworkEventItemCompact = require("./NetworkEventItemCompact");
 var _NetworkUpgradeBanner = require("./NetworkUpgradeBanner");
 var _useNetworkEventList = require("../hooks/useNetworkEventList");
 var _useNetworkSaved = require("../hooks/useNetworkSaved");
+var _useOverrideRules = require("../hooks/useOverrideRules");
+var _matchRule = require("../overrides/matchRule");
 var _withPinnedFirst = require("../utils/withPinnedFirst");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -91,6 +93,62 @@ function PinnedSection({
     }, event.id))]
   });
 }
+
+/**
+ * The OVERRIDDEN strip, above the pins.
+ *
+ * An overridden request is the one thing in this list that isn't true — the app
+ * got something the server never sent. That has to be impossible to miss, and a
+ * glyph on a row twenty scroll-positions down isn't. It sits ABOVE pins because
+ * a stale override explains a bug, whereas a pin only marks one.
+ *
+ * Rows are matched against the RULES rather than filtered on the `override`
+ * mark, so the request you built a rule from hoists immediately instead of
+ * waiting for the endpoint to be called again.
+ *
+ * The header button is PAUSE, not "Manage". Flipping overrides off and on is by
+ * far the most repeated action in a testing session — force the failure, check
+ * the UI, turn it off, check the happy path, turn it back on — and it used to
+ * cost a trip to another screen each way. The manager is still one tap away on
+ * the toolbar; it just isn't the thing you reach for twenty times an hour.
+ */
+function OverriddenSection({
+  events,
+  onEventPress,
+  onLongPress,
+  savedLiveIds,
+  paused,
+  onTogglePaused
+}) {
+  if (events.length === 0) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.overriddenSection, paused && styles.overriddenSectionOff],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.overriddenHeader,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FlaskConical, {
+        size: 11,
+        color: paused ? _sharedUi.macOSColors.text.muted : _sharedUi.macOSColors.semantic.warning
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.overriddenTitle, paused && styles.overriddenTitleOff],
+        children: paused ? `PAUSED · ${events.length}` : `OVERRIDDEN · ${events.length}`
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        onPress: onTogglePaused,
+        "sentry-label": "ignore pause overrides",
+        style: styles.overriddenManage,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.overriddenManageText, paused && styles.overriddenTitleOff],
+          children: paused ? "Resume" : "Pause"
+        })
+      })]
+    }), events.map(event => /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkEventItemCompact.NetworkEventItemCompact, {
+      event: event,
+      onPress: onEventPress,
+      onLongPress: onLongPress,
+      overridden: true,
+      saved: savedLiveIds.has(event.id)
+    }, event.id))]
+  });
+}
 function NetworkListScreen({
   visible,
   paused,
@@ -121,16 +179,41 @@ function NetworkListScreen({
     togglePin,
     clearPinned
   } = (0, _useNetworkSaved.useNetworkSaved)();
+
+  // Which rules are live right now — the strip below reflects the rules, not
+  // the history, so it's correct the moment a rule is made or removed.
   const {
-    pinned,
-    rest
-  } = (0, _withPinnedFirst.splitPinned)(visibleEvents, pinnedEvents, pinnedLiveIds);
+    rules,
+    enabled: overridesEnabled,
+    setEnabled,
+    isRuleSpent
+  } = (0, _useOverrideRules.useOverrideRules)();
 
   // 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);
+
+  // Hoist anything an active rule covers. Done after `splitPinned` so a request
+  // that is both pinned and overridden appears once, in the louder section.
+  // Paused rules still populate the strip — that's how you find the thing you
+  // paused in order to resume it. The header says PAUSED instead.
+  const activeRules = rules.filter(rule => rule.enabled && !isRuleSpent(rule));
+  const isOverridden = event => activeRules.some(rule => (0, _matchRule.ruleMatches)(rule, event.url, String(event.method || "GET")));
+  const overridden = activeRules.length ? [...pinned, ...rest].filter(isOverridden) : [];
+  const overriddenIds = new Set(overridden.map(event => event.id));
+  const pinnedRows = pinned.filter(event => !overriddenIds.has(event.id));
+  const restRows = overriddenIds.size ? rest.filter(event => !overriddenIds.has(event.id)) : rest;
   const isEnabled = !paused;
   const renderItem = ({
     item
@@ -162,14 +245,21 @@ function NetworkListScreen({
         style: styles.disabledText,
         children: "Network interception is disabled"
       })]
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(PinnedSection, {
-      events: pinned,
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(OverriddenSection, {
+      events: overridden,
+      onEventPress: onEventPress,
+      onLongPress: handleLongPress,
+      savedLiveIds: savedLiveIds,
+      paused: !overridesEnabled,
+      onTogglePaused: () => setEnabled(!overridesEnabled)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PinnedSection, {
+      events: pinnedRows,
       onEventPress: onEventPress,
       onLongPress: handleLongPress,
       savedLiveIds: savedLiveIds,
       onClearPinned: clearPinned
-    }), rest.length > 0 || hasLockedEvents ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
-      data: rest,
+    }), restRows.length > 0 || hasLockedEvents ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+      data: restRows,
       renderItem: renderItem,
       keyExtractor: keyExtractor,
       contentContainerStyle: styles.listContent,
@@ -198,7 +288,7 @@ function NetworkListScreen({
       extraData: savedLiveIds,
       "sentry-label": "ignore network events list",
       ListFooterComponent: renderListFooter
-    }) : pinned.length > 0 ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyState, {
+    }) : pinnedRows.length > 0 || overridden.length > 0 ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyState, {
       isEnabled: isEnabled
     })]
   });
@@ -213,6 +303,42 @@ const styles = _reactNative.StyleSheet.create({
    * these rows do NOT obey the filters, and the boundary is what tells the
    * user why a request they just filtered out is still on screen.
    */
+  overriddenSection: {
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.macOSColors.semantic.warning + "44",
+    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground
+  },
+  overriddenSectionOff: {
+    borderBottomColor: _sharedUi.macOSColors.border.default,
+    backgroundColor: _sharedUi.macOSColors.background.card
+  },
+  overriddenTitleOff: {
+    color: _sharedUi.macOSColors.text.muted
+  },
+  overriddenHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 4
+  },
+  overriddenTitle: {
+    flex: 1,
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.8,
+    color: _sharedUi.macOSColors.semantic.warning
+  },
+  overriddenManage: {
+    paddingHorizontal: 6,
+    paddingVertical: 2
+  },
+  overriddenManageText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: _sharedUi.macOSColors.semantic.warning
+  },
   pinnedSection: {
     borderBottomWidth: 1,
     borderBottomColor: _sharedUi.macOSColors.border.default,

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

@@ -15,10 +15,17 @@ var _NetworkCopySettingsView = require("./NetworkCopySettingsView");
 var _NetworkHeaderLive = require("./NetworkHeaderLive");
 var _NetworkListScreen = require("./NetworkListScreen");
 var _NetworkSavedScreen = require("./NetworkSavedScreen");
+var _NetworkOverridesScreen = require("./NetworkOverridesScreen");
+var _NetworkOverridesButton = require("./NetworkOverridesButton");
+var _NetworkOverrideHeaderButton = require("./NetworkOverrideHeaderButton");
+var _NetworkHeaderMenu = require("./NetworkHeaderMenu");
 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 _types = require("../overrides/types");
 var _jsxRuntime = require("react/jsx-runtime");
 // ============================================================================
 // Screens (rule4 stable router: each gates itself with `return null`; the
@@ -29,7 +36,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function NetworkDetailScreen({
   visible,
-  eventId,
   paused,
   ignoredPatternValues,
   onTogglePattern,
@@ -38,34 +44,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,11 +198,38 @@ 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 [showOverridesView, setShowOverridesView] = (0, _react.useState)(false);
+  const [showHeaderMenu, setShowHeaderMenu] = (0, _react.useState)(false);
+  /**
+   * Overrides are a DEVICE capability — a rule runs inside the app's own
+   * `fetch`/`XMLHttpRequest`, which the dashboard doesn't have.
+   *
+   * That doesn't mean the dashboard can't AUTHOR them: in `inline` mode the
+   * rule store runs as a mirror of the connected device (see
+   * `overrideRulesStore.enableRemoteMode`), so the screens below are the same
+   * ones the phone renders and every edit is forwarded. The one thing the
+   * dashboard never does is apply a rule to its own traffic —
+   * `disableEngine()` guarantees that.
+   */
+  const overridesAvailable = true;
+  /**
+   * A rule prefilled from a request the user was looking at, handed to the
+   * Overrides screen when it mounts. Lives here rather than in that screen
+   * because the request that seeds it is on a DIFFERENT screen — this is the
+   * one place both are in scope.
+   */
+  const [pendingOverrideDraft, setPendingOverrideDraft] = (0, _react.useState)(null);
   const [activeTab, setActiveTab] = (0, _react.useState)("filters");
   const [searchText, setSearchText] = (0, _react.useState)("");
   const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
@@ -236,13 +301,32 @@ 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);
+  }, []);
+
+  /**
+   * "Custom…" in a request's Override section. Stable identity because the
+   * detail view is memoized on its props and an unstable callback would defeat
+   * the bail-out that keeps prev/next stepping cheap.
+   */
+  const handleOverridePress = (0, _react.useCallback)((draft, ruleId) => {
+    setPendingOverrideDraft(ruleId ? {
+      ...draft,
+      id: ruleId
+    } : draft);
+    setShowOverridesView(true);
+    // Leave the detail view, or its header would sit on top of the editor.
+    _networkSelectionStore.networkSelectionStore.clear();
   }, []);
+
+  // Stable identity: the Overrides screen adopts the draft in an effect keyed
+  // on both, so an unstable callback would re-run it every render.
+  const handlePendingOverrideConsumed = (0, _react.useCallback)(() => setPendingOverrideDraft(null), []);
   const handleSearch = text => {
     setSearchText(text);
     setFilter(prev => ({
@@ -299,19 +383,35 @@ 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
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
           title: "Request Details",
           centered: true
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderLive.NetworkDetailPinActions, {
-            eventId: selectedEventId,
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
+          children: [overridesAvailable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkOverrideHeaderButton.NetworkOverrideHeaderButton, {
+            onOpen: handleOverridePress
+          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderLive.NetworkDetailPinActions, {
             isPro: isPro,
             onUpgradePress: () => showUpgrade("saved")
-          })
+          })]
+        })]
+      });
+    }
+
+    // Overrides manager header.
+    if (showOverridesView && overridesAvailable) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+          onBack: () => {
+            setShowOverridesView(false);
+            setPendingOverrideDraft(null);
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+          title: "Response Overrides",
+          centered: true
         })]
       });
     }
@@ -383,35 +483,26 @@ function NetworkModalInner({
             size: 14,
             color: _sharedUi.macOSColors.text.secondary
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          "sentry-label": "ignore filter",
-          onPress: () => {
-            setShowFilterView(true);
-          },
-          style: [styles.headerActionButton, (filter.status || filter.method || filter.contentType) && styles.activeFilterButton],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
-            size: 14,
-            color: filter.status || filter.method || filter.contentType ? _sharedUi.macOSColors.semantic.info : _sharedUi.macOSColors.text.muted
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderLive.NetworkSavedButton, {
-          onPress: () => setShowSavedView(true)
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderLive.NetworkHeaderCopyButton, {
-          isPro: isPro,
-          filter: filter,
-          ignoredPatterns: ignoredPatterns,
-          copySettings: copySettings,
-          paused: paused,
-          onUpgradePress: () => showUpgrade("export")
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
+        }), overridesAvailable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkOverridesButton.NetworkOverridesButton, {
+          onPress: () => setShowOverridesView(true)
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
           isEnabled: !paused,
           onToggle: () => setPaused(prev => !prev),
           accessibilityLabel: "Toggle network interception"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderLive.NetworkClearButton, {
           paused: paused
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderMenu.NetworkHeaderMenuButton, {
+          onPress: () => setShowHeaderMenu(prev => !prev),
+          isOpen: showHeaderMenu,
+          hasIndicator: hasActiveFilter
         })]
       })]
     });
   };
+
+  // Surfaced on the ⋯ so moving Filters into the menu doesn't hide the one
+  // thing that button was communicating.
+  const hasActiveFilter = !!(filter.status || filter.method || filter.contentType);
   const persistenceKey = enableSharedModalDimensions ? _sharedUi.devToolsStorageKeys.modal.root() : _sharedUi.devToolsStorageKeys.network.modal();
   if (!visible) return null;
 
@@ -422,13 +513,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 +529,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,15 +544,27 @@ 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,
         ignoredPatterns: ignoredPatterns,
         settings: copySettings,
         onSettingsChange: setCopySettings
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkOverridesScreen.NetworkOverridesScreen, {
+        visible: overridesAvailable && showOverridesView && !hasSelection && !showFilterView,
+        isPro: isPro,
+        onUpgradePress: () => showUpgrade("overrides"),
+        pendingDraft: pendingOverrideDraft,
+        onPendingConsumed: handlePendingOverrideConsumed
+        // Inline (desktop panel) has no home indicator to clear.
+        ,
+        applySafeAreaInset: !inline && modalMode === "bottomSheet"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkSavedScreen.NetworkSavedScreen, {
-        visible: showSavedView && selectedEventId == null && !showFilterView,
+        visible: showSavedView && !hasSelection && !showFilterView &&
+        // Overrides wins in the header branch too — the two must agree, or
+        // one screen renders under the other's header.
+        !(showOverridesView && overridesAvailable),
         isPro: isPro,
         copySettings: copySettings,
         search: savedSearch,
@@ -471,7 +572,7 @@ function NetworkModalInner({
         onEventPress: handleEventPress,
         onUpgradePress: () => showUpgrade("saved")
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkListScreen.NetworkListScreen, {
-        visible: selectedEventId == null && !showFilterView && !showSavedView,
+        visible: !hasSelection && !showFilterView && !showSavedView && !(showOverridesView && overridesAvailable),
         paused: paused,
         filter: filter,
         ignoredPatterns: ignoredPatterns,
@@ -480,12 +581,51 @@ function NetworkModalInner({
         onEventPress: handleEventPress,
         onUpgradePress: () => showUpgrade("export")
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.UpgradeModal, {
+    }), showHeaderMenu ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_NetworkHeaderMenu.NetworkHeaderMenu, {
+      onClose: () => setShowHeaderMenu(false),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderMenu.NetworkHeaderMenuItem, {
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
+          size: 14,
+          color: hasActiveFilter ? _sharedUi.macOSColors.semantic.info : _sharedUi.macOSColors.text.secondary
+        }),
+        label: "Filters",
+        detail: hasActiveFilter ? "Active" : undefined,
+        onPress: () => {
+          setShowHeaderMenu(false);
+          setActiveTab("filters");
+          setShowFilterView(true);
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderMenu.NetworkHeaderMenuItem, {
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Bookmark, {
+          size: 14,
+          color: _sharedUi.macOSColors.text.secondary
+        }),
+        label: "Saved requests",
+        onPress: () => {
+          setShowHeaderMenu(false);
+          setShowSavedView(true);
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.menuCopyRow,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderLive.NetworkHeaderCopyButton, {
+          isPro: isPro,
+          filter: filter,
+          ignoredPatterns: ignoredPatterns,
+          copySettings: copySettings,
+          paused: paused,
+          onUpgradePress: () => {
+            setShowHeaderMenu(false);
+            showUpgrade("export");
+          },
+          label: "Copy requests"
+        })
+      })]
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.UpgradeModal, {
       visible: showUpgradeModal,
       onClose: () => setShowUpgradeModal(false),
-      featureName: upgradeReason === "saved" ? "Saved Requests" : "Network Export",
-      description: upgradeReason === "saved" ? "Keep the requests that matter. Saved requests survive Clear, app restarts, and the 500-request history cap." : "Export network requests to share with your team, debug APIs, or feed into AI tools.",
-      benefits: upgradeReason === "saved" ? [`Save up to ${_networkSavedStore.MAX_SAVED} requests (free keeps ${_networkSavedStore.FREE_TIER_SAVED_LIMIT})`, "Failed requests stay put through a Clear", "Snapshots survive an app restart", "Export saved requests to teammates or AI assistants"] : ["Export to JSON, Markdown, or plain text", "Customizable copy presets (URLs only, LLM-ready, full data)", "Share request details with teammates", "Feed network data directly to AI assistants"]
+      featureName: upgradeReason === "saved" ? "Saved Requests" : upgradeReason === "overrides" ? "Response Overrides" : "Network Export",
+      description: upgradeReason === "saved" ? "Keep the requests that matter. Saved requests survive Clear, app restarts, and the 500-request history cap." : upgradeReason === "overrides" ? "Force any endpoint to fail, stall or return something else — no backend changes, no code changes. Free keeps one active rule." : "Export network requests to share with your team, debug APIs, or feed into AI tools.",
+      benefits: upgradeReason === "overrides" ? [`Run ${_types.MAX_RULES} rules at once (free keeps ${_types.FREE_TIER_RULE_LIMIT})`, "Force a 500, a 401 or an empty list in one tap", "Simulate offline, timeouts and slow connections", "Rules survive an app reload, so you can test the boot path"] : upgradeReason === "saved" ? [`Save up to ${_networkSavedStore.MAX_SAVED} requests (free keeps ${_networkSavedStore.FREE_TIER_SAVED_LIMIT})`, "Failed requests stay put through a Clear", "Snapshots survive an app restart", "Export saved requests to teammates or AI assistants"] : ["Export to JSON, Markdown, or plain text", "Customizable copy presets (URLs only, LLM-ready, full data)", "Share request details with teammates", "Feed network data directly to AI assistants"]
     })]
   });
 
@@ -529,6 +669,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: {
@@ -564,6 +708,9 @@ const styles = _reactNative.StyleSheet.create({
     marginLeft: 6,
     padding: 4
   },
+  menuCopyRow: {
+    paddingHorizontal: 6
+  },
   headerActionButton: {
     width: 32,
     height: 32,