@buoy-gg/network 7.0.12 → 7.0.14

package/lib/commonjs/index.js

@@ -3,12 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "DEFAULT_SETTLE_MS", {
+  enumerable: true,
+  get: function () {
+    return _networkSelectionStore.DEFAULT_SETTLE_MS;
+  }
+});
+Object.defineProperty(exports, "FREE_TIER_OVERRIDE_LIMIT", {
+  enumerable: true,
+  get: function () {
+    return _types.FREE_TIER_RULE_LIMIT;
+  }
+});
 Object.defineProperty(exports, "FREE_TIER_SAVED_LIMIT", {
   enumerable: true,
   get: function () {
     return _networkSavedStore.FREE_TIER_SAVED_LIMIT;
   }
 });
+Object.defineProperty(exports, "MAX_OVERRIDE_RULES", {
+  enumerable: true,
+  get: function () {
+    return _types.MAX_RULES;
+  }
+});
 Object.defineProperty(exports, "MAX_PINNED", {
   enumerable: true,
   get: function () {
@@ -69,6 +87,18 @@ Object.defineProperty(exports, "NetworkToolView", {
     return _NetworkModal.NetworkToolView;
   }
 });
+Object.defineProperty(exports, "OVERRIDE_STATUS_MAX", {
+  enumerable: true,
+  get: function () {
+    return _types.STATUS_MAX;
+  }
+});
+Object.defineProperty(exports, "OVERRIDE_STATUS_MIN", {
+  enumerable: true,
+  get: function () {
+    return _types.STATUS_MIN;
+  }
+});
 Object.defineProperty(exports, "TickProvider", {
   enumerable: true,
   get: function () {
@@ -87,6 +117,12 @@ Object.defineProperty(exports, "createNetworkTool", {
     return _preset.createNetworkTool;
   }
 });
+Object.defineProperty(exports, "draftFromEvent", {
+  enumerable: true,
+  get: function () {
+    return _presets.draftFromEvent;
+  }
+});
 Object.defineProperty(exports, "flagsForEventId", {
   enumerable: true,
   get: function () {
@@ -147,6 +183,12 @@ Object.defineProperty(exports, "networkSavedStore", {
     return _networkSavedStore.networkSavedStore;
   }
 });
+Object.defineProperty(exports, "networkSelectionStore", {
+  enumerable: true,
+  get: function () {
+    return _networkSelectionStore.networkSelectionStore;
+  }
+});
 Object.defineProperty(exports, "networkSyncAdapter", {
   enumerable: true,
   get: function () {
@@ -159,6 +201,12 @@ Object.defineProperty(exports, "networkToolPreset", {
     return _preset.networkToolPreset;
   }
 });
+Object.defineProperty(exports, "overrideRulesStore", {
+  enumerable: true,
+  get: function () {
+    return _overrideRulesStore.overrideRulesStore;
+  }
+});
 Object.defineProperty(exports, "removeAllNetworkListeners", {
   enumerable: true,
   get: function () {
@@ -231,8 +279,12 @@ var _useLiveNetworkEvent = require("./network/hooks/useLiveNetworkEvent");
 var _useNetworkBadgeCounts = require("./network/hooks/useNetworkBadgeCounts");
 var _useNetworkSaved = require("./network/hooks/useNetworkSaved");
 var _withPinnedFirst = require("./network/utils/withPinnedFirst");
+var _networkSelectionStore = require("./network/utils/networkSelectionStore");
 var _useTickEveryMinute = require("./network/hooks/useTickEveryMinute");
 var _formatting = require("./network/utils/formatting");
+var _overrideRulesStore = require("./network/overrides/overrideRulesStore");
+var _presets = require("./network/overrides/presets");
+var _types = require("./network/overrides/types");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _networkSyncAdapter = require("./network/sync/networkSyncAdapter");
 var _networkBodyResolver = require("./network/sync/networkBodyResolver");

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

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

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

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

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

@@ -173,6 +173,7 @@ function NetworkEventItemCompact({
   onPress,
   pinned = false,
   saved = false,
+  overridden = false,
   onLongPress
 }) {
   const statusColor = getStatusColor(event.status, event.error);
@@ -211,6 +212,9 @@ function NetworkEventItemCompact({
       }) : null, saved ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Bookmark, {
         size: 10,
         color: _sharedUi.macOSColors.semantic.debug
+      }) : null, overridden || event.override ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FlaskConical, {
+        size: 10,
+        color: _sharedUi.macOSColors.semantic.warning
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIndicator, {
         event: event,
         isPending: isPending,

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

@@ -13,6 +13,7 @@ var _sharedUi = require("@buoy-gg/shared-ui");
 var _networkEventStore = require("../utils/networkEventStore");
 var _networkSavedStore = require("../utils/networkSavedStore");
 var _useNetworkSaved = require("../hooks/useNetworkSaved");
+var _useNetworkSelection = require("../hooks/useNetworkSelection");
 var _useNetworkBadgeCounts = require("../hooks/useNetworkBadgeCounts");
 var _useNetworkHasMatches = require("../hooks/useNetworkHasMatches");
 var _generateNetworkCopyText = require("../utils/generateNetworkCopyText");
@@ -149,12 +150,16 @@ function NetworkSavedButton({
  * The event object is resolved at PRESS time rather than held as a prop: the
  * live store has the fresh copy while the request is in flight, and the saved
  * store is the only copy once it has been cleared or aged out.
+ *
+ * The selected id is SUBSCRIBED here rather than passed down, so stepping
+ * through requests doesn't have to re-render the modal root just to rebuild
+ * the header around a new prop.
  */
 function NetworkDetailPinActions({
-  eventId,
   isPro,
   onUpgradePress
 }) {
+  const eventId = (0, _useNetworkSelection.useSelectedNetworkEventId)();
   const state = (0, _useNetworkSaved.useNetworkSaved)();
   const {
     pinned,
@@ -217,7 +222,8 @@ function NetworkHeaderCopyButton({
   ignoredPatterns,
   copySettings,
   paused,
-  onUpgradePress
+  onUpgradePress,
+  label
 }) {
   const hasEvents = (0, _useNetworkHasMatches.useNetworkHasMatches)({
     filter,
@@ -225,15 +231,18 @@ function NetworkHeaderCopyButton({
     paused
   });
   if (!isPro) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_sharedUi.Copy, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Copy, {
         size: 14,
         color: hasEvents ? _sharedUi.macOSColors.text.secondary : _sharedUi.macOSColors.text.disabled
-      })
+      }), label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.copyMenuLabel,
+        children: label
+      }) : null]
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CopyButton
@@ -242,7 +251,9 @@ function NetworkHeaderCopyButton({
   , {
     value: () => (0, _generateNetworkCopyText.generateNetworkCopyText)((0, _filterNetworkEvents.filterNetworkEvents)((0, _filterNetworkEvents.applyIgnoredPatterns)(_networkEventStore.networkEventStore.getEvents(), ignoredPatterns), filter), copySettings),
     size: 14,
-    buttonStyle: styles.headerActionButton,
+    label: label,
+    buttonStyle: label ? styles.copyMenuRow : styles.headerActionButton,
+    labelStyle: styles.copyMenuLabel,
     colors: {
       idle: hasEvents ? _sharedUi.macOSColors.text.secondary : _sharedUi.macOSColors.text.disabled,
       success: _sharedUi.macOSColors.semantic.success,
@@ -252,6 +263,20 @@ function NetworkHeaderCopyButton({
   });
 }
 const styles = _reactNative.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: _sharedUi.macOSColors.text.primary
+  },
   headerChipRow: {
     flexDirection: "row",
     alignItems: "center",

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

@@ -0,0 +1,183 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NetworkHeaderMenu = NetworkHeaderMenu;
+exports.NetworkHeaderMenuButton = NetworkHeaderMenuButton;
+exports.NetworkHeaderMenuItem = NetworkHeaderMenuItem;
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ */
+
+function NetworkHeaderMenuButton({
+  onPress,
+  isOpen,
+  hasIndicator
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    onPress: onPress,
+    "sentry-label": "ignore toggle header menu",
+    accessibilityLabel: isOpen ? "Close menu" : "More actions",
+    style: [styles.button, isOpen && styles.buttonOpen],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.dots,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.dot, isOpen && styles.dotOpen]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.dot, isOpen && styles.dotOpen]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.dot, isOpen && styles.dotOpen]
+      })]
+    }), hasIndicator ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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.
+ */
+function NetworkHeaderMenu({
+  onClose,
+  children
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.overlay,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      style: styles.backdrop,
+      activeOpacity: 1,
+      onPress: onClose,
+      "sentry-label": "ignore dismiss header menu"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.panel,
+      children: children
+    })]
+  });
+}
+function NetworkHeaderMenuItem({
+  icon,
+  label,
+  detail,
+  onPress
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    onPress: onPress,
+    "sentry-label": "ignore header menu item",
+    style: styles.item,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.itemIcon,
+      children: icon
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.itemLabel,
+      children: label
+    }), detail ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.itemDetail,
+      children: detail
+    }) : null]
+  });
+}
+const styles = _reactNative.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: _sharedUi.macOSColors.background.hover
+  },
+  dots: {
+    flexDirection: "column",
+    gap: 2.5,
+    alignItems: "center"
+  },
+  dot: {
+    width: 3,
+    height: 3,
+    borderRadius: 2,
+    backgroundColor: _sharedUi.macOSColors.text.secondary
+  },
+  dotOpen: {
+    backgroundColor: _sharedUi.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: _sharedUi.macOSColors.semantic.info
+  },
+  overlay: {
+    ..._sharedUi.absoluteFill,
+    zIndex: 50
+  },
+  backdrop: {
+    ..._sharedUi.absoluteFill,
+    backgroundColor: "rgba(0,0,0,0.5)"
+  },
+  panel: {
+    position: "absolute",
+    top: 6,
+    right: 8,
+    minWidth: 196,
+    paddingVertical: 4,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.hover,
+    backgroundColor: _sharedUi.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: _sharedUi.macOSColors.text.primary
+  },
+  itemDetail: {
+    fontSize: 11,
+    color: _sharedUi.macOSColors.text.muted
+  }
+});