@buoy-gg/network 7.0.12 → 7.0.14

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

@@ -1,8 +1,8 @@
 "use strict";
 
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, memo } from "react";
 import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
-import { Clock, Upload, Download, AlertCircle, ChevronDown, ChevronUp, Lock, Unlock, FileJson, Filter, Globe, Link, Copy, InlineCopyButton, macOSColors, useFeatureGate, UpgradeModal } from "@buoy-gg/shared-ui";
+import { Clock, Upload, Download, AlertCircle, ChevronDown, ChevronUp, Lock, Unlock, FileJson, Filter, Globe, Link, Copy, FlaskConical, InlineCopyButton, macOSColors, useFeatureGate, UpgradeModal } from "@buoy-gg/shared-ui";
 import { formatBytes, formatDuration, formatHttpStatus } from "../utils/formatting";
 import { formatRelativeTime } from "@buoy-gg/shared-ui";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
@@ -16,6 +16,10 @@ import { useNetworkBodyResolver } from "../sync/networkBodyResolver";
  */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const NEUTRAL_ICON = 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.
  *
@@ -69,8 +73,11 @@ const TimingPhases = ({
         children: /*#__PURE__*/_jsx(View, {
           style: [styles.phaseBar, {
             backgroundColor: phase.color,
-            // A floor so a 1ms phase is still a visible tick.
-            width: `${Math.max(1, phase.value / span * 100)}%`
+            // A floor so a 1ms phase is still a visible tick, and a
+            // ceiling because `total` and the phases are measured at
+            // different points — ttfb can exceed event.duration, which
+            // would push the bar past its track and over the label.
+            width: `${Math.min(100, Math.max(1, phase.value / span * 100))}%`
           }]
         })
       }), /*#__PURE__*/_jsx(Text, {
@@ -81,6 +88,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__*/_jsx(View, {
+  style: styles.bodyDeferred
+});
+
 // Component for collapsible sections matching Sentry style
 const CollapsibleSection = ({
   title,
@@ -260,11 +278,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.
  */
-export function NetworkEventDetailView({
+export const NetworkEventDetailView = /*#__PURE__*/memo(function NetworkEventDetailView({
   event,
-  ignoredPatterns = new Set(),
-  onTogglePattern = () => {}
+  ignoredPatterns = EMPTY_PATTERNS,
+  onTogglePattern = noop,
+  showBodies = true
 }) {
   const status = event.status ? formatHttpStatus(event.status) : null;
   const isPending = !event.status && !event.error;
@@ -408,8 +445,24 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
               style: styles.httpDurationText,
               children: formatDuration(event.duration)
             })]
-          }) : null, isPro ? /*#__PURE__*/_jsx(InlineCopyButton, {
-            value: getFullRequestDetails(),
+          }) : null, event.override ? /*#__PURE__*/_jsxs(View, {
+            style: styles.overrideBadge,
+            children: [/*#__PURE__*/_jsx(FlaskConical, {
+              size: 10,
+              color: macOSColors.semantic.warning
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.overrideBadgeText,
+              children: event.override.ruleName || "Overridden"
+            })]
+          }) : null, isPro ? /*#__PURE__*/_jsx(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__*/_jsx(TouchableOpacity, {
             style: styles.copyFullButton,
@@ -543,14 +596,14 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
         defaultOpen: false,
         children: /*#__PURE__*/_jsx(View, {
           style: styles.dataViewerContainer,
-          children: /*#__PURE__*/_jsx(DataViewer, {
+          children: showBodies ? /*#__PURE__*/_jsx(DataViewer, {
             title: "",
             data: requestData,
             showTypeFilter: true,
             rawMode: true,
             initialExpanded: true,
             disableCopy: !isPro
-          })
+          }) : /*#__PURE__*/_jsx(BodyDeferred, {})
         })
       }) : requestBodyOmitted ? /*#__PURE__*/_jsx(CollapsibleSection, {
         title: "Request Body",
@@ -575,14 +628,14 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
         defaultOpen: true,
         children: /*#__PURE__*/_jsx(View, {
           style: styles.dataViewerContainer,
-          children: /*#__PURE__*/_jsx(DataViewer, {
+          children: showBodies ? /*#__PURE__*/_jsx(DataViewer, {
             title: "",
             data: responseData,
             showTypeFilter: true,
             rawMode: true,
             initialExpanded: true,
             disableCopy: !isPro
-          })
+          }) : /*#__PURE__*/_jsx(BodyDeferred, {})
         })
       }) : responseBodyOmitted ? /*#__PURE__*/_jsx(CollapsibleSection, {
         title: "Response Body",
@@ -687,7 +740,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 = StyleSheet.create({
   container: {
     flex: 1,
@@ -754,6 +807,20 @@ const styles = StyleSheet.create({
     color: macOSColors.text.secondary,
     fontSize: 11
   },
+  overrideBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 6,
+    paddingVertical: 3,
+    borderRadius: 4,
+    backgroundColor: macOSColors.semantic.warningBackground
+  },
+  overrideBadgeText: {
+    color: macOSColors.semantic.warning,
+    fontSize: 10,
+    fontWeight: "700"
+  },
   copyFullButton: {
     marginLeft: "auto",
     flexShrink: 0,
@@ -906,7 +973,8 @@ const styles = StyleSheet.create({
     height: 7,
     borderRadius: 4,
     backgroundColor: macOSColors.background.hover,
-    justifyContent: "center"
+    justifyContent: "center",
+    overflow: "hidden"
   },
   phaseBar: {
     height: 7,
@@ -963,6 +1031,10 @@ const styles = 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/module/network/components/NetworkEventItemCompact.js

@@ -2,7 +2,7 @@
 
 import { memo } from "react";
 import { StyleSheet, View, Text } from "react-native";
-import { ChevronRight, Upload, Download, Clock, AlertCircle, Bookmark, Pin, DevToolsCard, MethodBadge, TypeBadge, macOSColors } from "@buoy-gg/shared-ui";
+import { ChevronRight, Upload, Download, Clock, AlertCircle, Bookmark, FlaskConical, Pin, DevToolsCard, MethodBadge, TypeBadge, macOSColors } from "@buoy-gg/shared-ui";
 import { formatBytes, formatDuration } from "../utils/formatting";
 import { formatRelativeTime } from "@buoy-gg/shared-ui";
 import { useTickEveryMinute } from "../hooks/useTickEveryMinute";
@@ -170,6 +170,7 @@ function NetworkEventItemCompact({
   onPress,
   pinned = false,
   saved = false,
+  overridden = false,
   onLongPress
 }) {
   const statusColor = getStatusColor(event.status, event.error);
@@ -208,6 +209,9 @@ function NetworkEventItemCompact({
       }) : null, saved ? /*#__PURE__*/_jsx(Bookmark, {
         size: 10,
         color: macOSColors.semantic.debug
+      }) : null, overridden || event.override ? /*#__PURE__*/_jsx(FlaskConical, {
+        size: 10,
+        color: macOSColors.semantic.warning
       }) : null, /*#__PURE__*/_jsx(StatusIndicator, {
         event: event,
         isPending: isPending,

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

@@ -23,6 +23,7 @@ import { Bookmark, CheckCircle, XCircle, Clock, Copy, Pin, Trash2, CopyButton, m
 import { networkEventStore } from "../utils/networkEventStore";
 import { flagsForEventId, networkSavedStore, FREE_TIER_SAVED_LIMIT, MAX_PINNED, MAX_SAVED } from "../utils/networkSavedStore";
 import { useNetworkSaved } from "../hooks/useNetworkSaved";
+import { useSelectedNetworkEventId } from "../hooks/useNetworkSelection";
 import { useNetworkBadgeCounts } from "../hooks/useNetworkBadgeCounts";
 import { useNetworkHasEvents, useNetworkHasMatches } from "../hooks/useNetworkHasMatches";
 import { generateNetworkCopyText } from "../utils/generateNetworkCopyText";
@@ -141,12 +142,16 @@ export 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.
  */
 export function NetworkDetailPinActions({
-  eventId,
   isPro,
   onUpgradePress
 }) {
+  const eventId = useSelectedNetworkEventId();
   const state = useNetworkSaved();
   const {
     pinned,
@@ -209,7 +214,8 @@ export function NetworkHeaderCopyButton({
   ignoredPatterns,
   copySettings,
   paused,
-  onUpgradePress
+  onUpgradePress,
+  label
 }) {
   const hasEvents = useNetworkHasMatches({
     filter,
@@ -217,15 +223,18 @@ export function NetworkHeaderCopyButton({
     paused
   });
   if (!isPro) {
-    return /*#__PURE__*/_jsx(TouchableOpacity, {
+    return /*#__PURE__*/_jsxs(TouchableOpacity, {
       "sentry-label": "ignore copy pro",
       onPress: onUpgradePress,
-      style: [styles.headerActionButton, !hasEvents && styles.headerActionButtonDisabled],
+      style: [label ? styles.copyMenuRow : styles.headerActionButton, !hasEvents && styles.headerActionButtonDisabled],
       disabled: !hasEvents,
-      children: /*#__PURE__*/_jsx(Copy, {
+      children: [/*#__PURE__*/_jsx(Copy, {
         size: 14,
         color: hasEvents ? macOSColors.text.secondary : macOSColors.text.disabled
-      })
+      }), label ? /*#__PURE__*/_jsx(Text, {
+        style: styles.copyMenuLabel,
+        children: label
+      }) : null]
     });
   }
   return /*#__PURE__*/_jsx(CopyButton
@@ -234,7 +243,9 @@ export function NetworkHeaderCopyButton({
   , {
     value: () => generateNetworkCopyText(filterNetworkEvents(applyIgnoredPatterns(networkEventStore.getEvents(), ignoredPatterns), filter), copySettings),
     size: 14,
-    buttonStyle: styles.headerActionButton,
+    label: label,
+    buttonStyle: label ? styles.copyMenuRow : styles.headerActionButton,
+    labelStyle: styles.copyMenuLabel,
     colors: {
       idle: hasEvents ? macOSColors.text.secondary : macOSColors.text.disabled,
       success: macOSColors.semantic.success,
@@ -244,6 +255,20 @@ export function NetworkHeaderCopyButton({
   });
 }
 const styles = StyleSheet.create({
+  /** The overflow-menu variant: a full-width row, matching the other items. */
+  copyMenuRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingHorizontal: 6,
+    paddingVertical: 11,
+    justifyContent: "flex-start"
+  },
+  copyMenuLabel: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: macOSColors.text.primary
+  },
   headerChipRow: {
     flexDirection: "row",
     alignItems: "center",

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

@@ -0,0 +1,177 @@
+"use strict";
+
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { absoluteFill, macOSColors } from "@buoy-gg/shared-ui";
+
+/**
+ * The header's overflow menu.
+ *
+ * The toolbar had grown to three status badges and six icon buttons, which on a
+ * 402pt screen meant the pending badge was being overlapped by the search
+ * button. Something had to leave, and the rule for deciding what is:
+ *
+ *   **A control that COMMUNICATES STATE stays visible. A destination or a rare
+ *   action goes in the menu.**
+ *
+ * That keeps the power toggle (are we capturing?), the overrides flask (is the
+ * app being lied to, and how many rules?), the status badges (what happened)
+ * and Clear (the reproduce loop is clear → repro → read, and burying the first
+ * step doubles it). Search stays because it's the only way through 500 rows.
+ *
+ * Filters, Saved and Copy leave. Filters is the interesting one — it does show
+ * state, so the ⋯ carries a dot when a filter is applied rather than hiding
+ * that fact.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function NetworkHeaderMenuButton({
+  onPress,
+  isOpen,
+  hasIndicator
+}) {
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    onPress: onPress,
+    "sentry-label": "ignore toggle header menu",
+    accessibilityLabel: isOpen ? "Close menu" : "More actions",
+    style: [styles.button, isOpen && styles.buttonOpen],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.dots,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.dot, isOpen && styles.dotOpen]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.dot, isOpen && styles.dotOpen]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.dot, isOpen && styles.dotOpen]
+      })]
+    }), hasIndicator ? /*#__PURE__*/_jsx(View, {
+      style: styles.indicator
+    }) : null]
+  });
+}
+/**
+ * The dropdown itself, rendered in the modal BODY rather than the header —
+ * the header is a fixed-height row and anything overflowing it is clipped, so
+ * a panel anchored to the top-right of the body lands exactly where a dropdown
+ * from the ⋯ should appear.
+ */
+export function NetworkHeaderMenu({
+  onClose,
+  children
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.overlay,
+    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+      style: styles.backdrop,
+      activeOpacity: 1,
+      onPress: onClose,
+      "sentry-label": "ignore dismiss header menu"
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.panel,
+      children: children
+    })]
+  });
+}
+export function NetworkHeaderMenuItem({
+  icon,
+  label,
+  detail,
+  onPress
+}) {
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    onPress: onPress,
+    "sentry-label": "ignore header menu item",
+    style: styles.item,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.itemIcon,
+      children: icon
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.itemLabel,
+      children: label
+    }), detail ? /*#__PURE__*/_jsx(Text, {
+      style: styles.itemDetail,
+      children: detail
+    }) : null]
+  });
+}
+const styles = StyleSheet.create({
+  // The same 32×32 box every other header action uses, minus the fill and
+  // border. Padding alone gave a 3pt-wide hit area AND a shorter box than its
+  // neighbours, which is why the dots sat high in the row; a fixed square
+  // centres the glyph on the same baseline as the search/power/clear icons.
+  button: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  // Only lit while the menu is down — the button is the one thing not covered
+  // by the backdrop, so it has to look like the thing that is currently open.
+  buttonOpen: {
+    backgroundColor: macOSColors.background.hover
+  },
+  dots: {
+    flexDirection: "column",
+    gap: 2.5,
+    alignItems: "center"
+  },
+  dot: {
+    width: 3,
+    height: 3,
+    borderRadius: 2,
+    backgroundColor: macOSColors.text.secondary
+  },
+  dotOpen: {
+    backgroundColor: macOSColors.text.primary
+  },
+  indicator: {
+    position: "absolute",
+    // Sits just up-and-right of the top dot. Anchored to the 32pt box's corner
+    // it would float off on its own, since the dot column is only 3pt wide.
+    top: 6,
+    right: 8,
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: macOSColors.semantic.info
+  },
+  overlay: {
+    ...absoluteFill,
+    zIndex: 50
+  },
+  backdrop: {
+    ...absoluteFill,
+    backgroundColor: "rgba(0,0,0,0.5)"
+  },
+  panel: {
+    position: "absolute",
+    top: 6,
+    right: 8,
+    minWidth: 196,
+    paddingVertical: 4,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: macOSColors.border.hover,
+    backgroundColor: macOSColors.background.card
+  },
+  item: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 11
+  },
+  itemIcon: {
+    width: 16,
+    alignItems: "center"
+  },
+  itemLabel: {
+    flex: 1,
+    fontSize: 13,
+    fontWeight: "600",
+    color: macOSColors.text.primary
+  },
+  itemDetail: {
+    fontSize: 11,
+    color: macOSColors.text.muted
+  }
+});

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

@@ -14,11 +14,13 @@
 
 import { useCallback } from "react";
 import { FlatList, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { Globe, Pin, Power, macOSColors } from "@buoy-gg/shared-ui";
+import { FlaskConical, Globe, Pin, Power, macOSColors } from "@buoy-gg/shared-ui";
 import { NetworkEventItemCompact } from "./NetworkEventItemCompact";
 import { NetworkUpgradeBanner } from "./NetworkUpgradeBanner";
 import { useNetworkEventList } from "../hooks/useNetworkEventList";
 import { useNetworkSaved } from "../hooks/useNetworkSaved";
+import { useOverrideRules } from "../hooks/useOverrideRules";
+import { ruleMatches } from "../overrides/matchRule";
 import { splitPinned } from "../utils/withPinnedFirst";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function EmptyState({
@@ -87,6 +89,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__*/_jsxs(View, {
+    style: [styles.overriddenSection, paused && styles.overriddenSectionOff],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.overriddenHeader,
+      children: [/*#__PURE__*/_jsx(FlaskConical, {
+        size: 11,
+        color: paused ? macOSColors.text.muted : macOSColors.semantic.warning
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.overriddenTitle, paused && styles.overriddenTitleOff],
+        children: paused ? `PAUSED · ${events.length}` : `OVERRIDDEN · ${events.length}`
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: onTogglePaused,
+        "sentry-label": "ignore pause overrides",
+        style: styles.overriddenManage,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.overriddenManageText, paused && styles.overriddenTitleOff],
+          children: paused ? "Resume" : "Pause"
+        })
+      })]
+    }), events.map(event => /*#__PURE__*/_jsx(NetworkEventItemCompact, {
+      event: event,
+      onPress: onEventPress,
+      onLongPress: onLongPress,
+      overridden: true,
+      saved: savedLiveIds.has(event.id)
+    }, event.id))]
+  });
+}
 export function NetworkListScreen({
   visible,
   paused,
@@ -117,16 +175,41 @@ export function NetworkListScreen({
     togglePin,
     clearPinned
   } = 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
-  } = splitPinned(visibleEvents, pinnedEvents, pinnedLiveIds);
+    rules,
+    enabled: overridesEnabled,
+    setEnabled,
+    isRuleSpent
+  } = useOverrideRules();
 
   // Stable identity: handed to memoized rows.
   const handleLongPress = 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
+  } = 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 => 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
@@ -158,14 +241,21 @@ export function NetworkListScreen({
         style: styles.disabledText,
         children: "Network interception is disabled"
       })]
-    }) : null, /*#__PURE__*/_jsx(PinnedSection, {
-      events: pinned,
+    }) : null, /*#__PURE__*/_jsx(OverriddenSection, {
+      events: overridden,
+      onEventPress: onEventPress,
+      onLongPress: handleLongPress,
+      savedLiveIds: savedLiveIds,
+      paused: !overridesEnabled,
+      onTogglePaused: () => setEnabled(!overridesEnabled)
+    }), /*#__PURE__*/_jsx(PinnedSection, {
+      events: pinnedRows,
       onEventPress: onEventPress,
       onLongPress: handleLongPress,
       savedLiveIds: savedLiveIds,
       onClearPinned: clearPinned
-    }), rest.length > 0 || hasLockedEvents ? /*#__PURE__*/_jsx(FlatList, {
-      data: rest,
+    }), restRows.length > 0 || hasLockedEvents ? /*#__PURE__*/_jsx(FlatList, {
+      data: restRows,
       renderItem: renderItem,
       keyExtractor: keyExtractor,
       contentContainerStyle: styles.listContent,
@@ -194,7 +284,7 @@ export function NetworkListScreen({
       extraData: savedLiveIds,
       "sentry-label": "ignore network events list",
       ListFooterComponent: renderListFooter
-    }) : pinned.length > 0 ? null : /*#__PURE__*/_jsx(EmptyState, {
+    }) : pinnedRows.length > 0 || overridden.length > 0 ? null : /*#__PURE__*/_jsx(EmptyState, {
       isEnabled: isEnabled
     })]
   });
@@ -209,6 +299,42 @@ const styles = 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: macOSColors.semantic.warning + "44",
+    backgroundColor: macOSColors.semantic.warningBackground
+  },
+  overriddenSectionOff: {
+    borderBottomColor: macOSColors.border.default,
+    backgroundColor: macOSColors.background.card
+  },
+  overriddenTitleOff: {
+    color: 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: macOSColors.semantic.warning
+  },
+  overriddenManage: {
+    paddingHorizontal: 6,
+    paddingVertical: 2
+  },
+  overriddenManageText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: macOSColors.semantic.warning
+  },
   pinnedSection: {
     borderBottomWidth: 1,
     borderBottomColor: macOSColors.border.default,