@buoy-gg/network 7.0.36 → 7.0.39

package/README.md

@@ -2,9 +2,9 @@
 
 [![npm version](https://img.shields.io/npm/v/@buoy-gg/network?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/network) [![npm downloads](https://img.shields.io/npm/dm/@buoy-gg/network?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/network)
 
-**See every HTTP request your React Native app makes — URL, headers, payloads, timing, and errors — live on the device, no Flipper or proxy required.**
+Inspect HTTP requests captured through your React Native app’s global `fetch` and `XMLHttpRequest` hooks. Open a request to see its URL, status, headers, timing, and captured body.
 
-Part of [Buoy](https://github.com/Buoy-gg/buoy) — devtools that live inside your React Native app. Install it and it auto-appears in the floating menu from [`@buoy-gg/core`](https://www.npmjs.com/package/@buoy-gg/core).
+Part of [Buoy](https://github.com/Buoy-gg/buoy). Install the package, complete account setup, and follow the integration steps below.
 
 ![Network Monitor demo](https://github.com/user-attachments/assets/473ddf83-03cd-4bd1-8dc3-0f66eda9fa8a)
 
@@ -14,9 +14,27 @@ Part of [Buoy](https://github.com/Buoy-gg/buoy) — devtools that live inside yo
 npm install @buoy-gg/core @buoy-gg/network
 ```
 
+## Before you start
+
+Use a development build with `@buoy-gg/core` and a Free or Pro Buoy account key. From your app’s directory, sign in:
+
+```bash
+npx --package=@buoy-gg/core buoy login
+```
+
+For Expo, initialize Buoy before rendering the menu:
+
+```tsx
+import { Buoy } from "@buoy-gg/core";
+
+Buoy.init({ licenseKey: process.env.EXPO_PUBLIC_BUOY_KEY });
+```
+
+The login command writes the Expo key to `.env.local`. For React Native CLI, pass the key from your app’s environment configuration; React Native does not load `.env.local` automatically. Mount `FloatingDevTools` inside the same providers as your screens and restart the development server after installation. The [Quick Start](https://buoy.gg/buoy/latest/docs/quick-start) shows the complete root component setup.
+
 ## Quick start
 
-Fully automatic. Render the floating menu once — the Network Monitor is auto-discovered as soon as this package is installed:
+After initialization, render the menu in your app root:
 
 ```tsx
 import { FloatingDevTools } from "@buoy-gg/core";
@@ -33,30 +51,45 @@ export default function App() {
 
 Want a different label or color? Build the tool with `createNetworkTool({ name, colorPreset })` and pass it via `apps={[...]}`.
 
+## Check the integration
+
+Open Network, trigger a new request in your app, and inspect its URL and status. Requests made before instrumentation and account admission, or through a separate native transport, may not appear. A cache hit may make no request. Saved bodies retain capture limits; saving does not recover truncated data.
+
 ## What you get
 
-- **Every request, zero config** — intercepts `fetch` and `XMLHttpRequest`, so fetch, axios, GraphQL clients, and gRPC-web all show up automatically.
-- **Boot requests included** — interception installs at app launch (dev builds), so module-scope fetches, session bootstrap, and your first queries are captured even though they fired before any tool or dashboard was open.
+- **Supported requests** — intercepts global `fetch` and `XMLHttpRequest`. Clients using those paths can be captured; separate native transports and previously saved references may bypass the hooks.
+- **Early capture** — development instrumentation can capture before the panel opens, once its hooks and account admission are ready. It cannot recover earlier requests.
 - **GraphQL gets special treatment** — operation names are extracted from queries, mutations, and subscriptions and shown with variables in arrow notation: `GetUser › 123`. No more guessing which `/graphql` request is which.
-- **Full request detail** — request/response headers, payloads, HTTP status, and duration for every call, with status-colored rows.
+- **Full request detail** — request/response headers, payloads, HTTP status, and duration for captured calls, 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.
+- **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 the captured snapshot, including any body truncation, so it survives Clear and the 500-request cap. Restart recovery requires a successful storage write. 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.
 
-## Desktop & AI
 
-The same live session streams to [Buoy Desktop](https://github.com/Buoy-gg/Buoy-Desktop) (free, macOS/Windows/Linux) and to Claude Code or Cursor via the [Buoy MCP server](https://buoy.gg/buoy/latest/docs/mcp).
+## Desktop & AI
 
-## Free vs Pro
+To connect a React Native app to [Buoy Desktop](https://github.com/Buoy-gg/Buoy-Desktop) or MCP, install `@buoy-gg/external-sync` and follow the [Desktop connection guide](https://buoy.gg/buoy/latest/docs/desktop). Sign in to Desktop separately. [MCP setup](https://buoy.gg/buoy/latest/docs/mcp) also requires a process account and Pro access. Available remote actions depend on the tool and app integration.
 
-Every tool is free. [Pro](https://buoy.gg/pricing) unlocks production builds, the MCP server, and unlimited capture. Every weekend, Pro features unlock free for anyone holding a key — including a free one (`npx buoy login`).
+## Account and plan requirements
 
-> 🎯 **Flutter (beta):** Buoy is now a full suite for Flutter — `flutter pub add buoy`. Network, storage, console, env, routes, images, Riverpod, events, and a live perf HUD, all streaming to the same desktop dashboard and MCP server. [Details →](https://buoy.gg/flutter)
+Use a Free or Pro Buoy account. History limits and paid features vary by tool; see [pricing](https://buoy.gg/pricing). Production access requires Pro where supported. Development-only hooks and actions remain unavailable in release builds.
 
 ---
 
 📚 [Full docs](https://buoy.gg/buoy/latest/docs/tools/network) · [All Buoy tools](https://github.com/Buoy-gg/buoy)
 
 Proprietary software. © Buoy LLC. [Terms](https://buoy.gg/terms)
+
+## Network conditions
+
+In development builds, open **⋯ → Network throttling** to minimize Network and show compact controls over the app. Restore Network from its minimized icon. Tap the signal icon to cycle through No throttling, Slow, Very slow and Offline. Each tap applies the profile immediately and updates the icon and delay. The profile text is a label and can be dragged to move the strip. Close restores Normal and dismisses the controls. Drag the background, delay label or grip to move the strip. Buttons keep their tap actions. In React Native development builds, an open strip returns after reload at its saved position, including when hidden at the edge. Close keeps it closed across reloads. The condition resets to No throttling. Tap the grip to hide or restore it. Free and Pro accounts can use Network conditions after account admission.
+
+Offline rejects new HTTP(S) calls through the installed global fetch and React Native XHR hooks without sending them. Slow and Very slow add one delay before dispatch. They do not limit bandwidth or change device connectivity. Imported native transports, images and WebSockets can bypass these hooks.
+
+Each call keeps the profile selected when it starts. Offline takes precedence over authored overrides without consuming their counters. Latency adds to an authored delay. A finite XHR timeout under active conditions covers the whole call from `send()`, including artificial waits; Normal preserves native timeout behavior.
+
+Conditions remain active when the panel is closed or its list is paused. They reset on a full JS reload or account access loss and are never persisted. Captured requests retain their condition stamp for saved snapshots, detail views and export. Desktop and MCP can control a connected device that advertises the conditions actions.
+
+Network conditions are a development preview. The native compatibility matrix across transports, runtimes and devices is still being worked through, so confirm the behaviour you rely on in your own build before you depend on it.

package/lib/commonjs/index.js

@@ -39,6 +39,12 @@ Object.defineProperty(exports, "MAX_SAVED", {
     return _networkSavedStore.MAX_SAVED;
   }
 });
+Object.defineProperty(exports, "NETWORK_CONDITIONS", {
+  enumerable: true,
+  get: function () {
+    return _store.NETWORK_CONDITIONS;
+  }
+});
 Object.defineProperty(exports, "NetworkBodyResolverProvider", {
   enumerable: true,
   get: function () {
@@ -159,6 +165,12 @@ Object.defineProperty(exports, "generateCurl", {
     return _generateCurl.generateCurl;
   }
 });
+Object.defineProperty(exports, "getNetworkCondition", {
+  enumerable: true,
+  get: function () {
+    return _store.getNetworkCondition;
+  }
+});
 Object.defineProperty(exports, "ignoredPatternsStore", {
   enumerable: true,
   get: function () {
@@ -219,12 +231,24 @@ Object.defineProperty(exports, "removeAllNetworkListeners", {
     return _networkListener.removeAllNetworkListeners;
   }
 });
+Object.defineProperty(exports, "setNetworkCondition", {
+  enumerable: true,
+  get: function () {
+    return _store.setNetworkCondition;
+  }
+});
 Object.defineProperty(exports, "splitPinned", {
   enumerable: true,
   get: function () {
     return _withPinnedFirst.splitPinned;
   }
 });
+Object.defineProperty(exports, "subscribeNetworkConditions", {
+  enumerable: true,
+  get: function () {
+    return _store.subscribeNetworkConditions;
+  }
+});
 Object.defineProperty(exports, "urlMatchesIgnoredPattern", {
   enumerable: true,
   get: function () {
@@ -297,4 +321,5 @@ var _networkBodyResolver = require("./network/sync/networkBodyResolver");
 var _networkEventStore = require("./network/utils/networkEventStore");
 var _networkSavedStore = require("./network/utils/networkSavedStore");
 var _generateCurl = require("./network/utils/generateCurl");
-var _networkListener = require("./network/utils/networkListener");
+var _networkListener = require("./network/utils/networkListener");
+var _store = require("./network/conditions/store");

package/lib/commonjs/index.web.js

@@ -39,6 +39,12 @@ Object.defineProperty(exports, "MAX_SAVED", {
     return _networkSavedStore.MAX_SAVED;
   }
 });
+Object.defineProperty(exports, "NETWORK_CONDITIONS", {
+  enumerable: true,
+  get: function () {
+    return _store.NETWORK_CONDITIONS;
+  }
+});
 Object.defineProperty(exports, "NetworkClearButton", {
   enumerable: true,
   get: function () {
@@ -219,6 +225,12 @@ Object.defineProperty(exports, "generateNetworkCopyText", {
     return _generateNetworkCopyText.generateNetworkCopyText;
   }
 });
+Object.defineProperty(exports, "getNetworkCondition", {
+  enumerable: true,
+  get: function () {
+    return _store.getNetworkCondition;
+  }
+});
 Object.defineProperty(exports, "isNetworkListening", {
   enumerable: true,
   get: function () {
@@ -279,6 +291,12 @@ Object.defineProperty(exports, "selectSavedEvents", {
     return _selectSavedEvents.selectSavedEvents;
   }
 });
+Object.defineProperty(exports, "setNetworkCondition", {
+  enumerable: true,
+  get: function () {
+    return _store.setNetworkCondition;
+  }
+});
 Object.defineProperty(exports, "splitPinned", {
   enumerable: true,
   get: function () {
@@ -297,6 +315,12 @@ Object.defineProperty(exports, "stopNetworkListener", {
     return _networkListener.stopNetworkListener;
   }
 });
+Object.defineProperty(exports, "subscribeNetworkConditions", {
+  enumerable: true,
+  get: function () {
+    return _store.subscribeNetworkConditions;
+  }
+});
 Object.defineProperty(exports, "toSelectionIds", {
   enumerable: true,
   get: function () {
@@ -392,4 +416,5 @@ var _matchRule = require("./network/overrides/matchRule");
 var _filterNetworkEvents = require("./network/utils/filterNetworkEvents");
 var _withPinnedFirst = require("./network/utils/withPinnedFirst");
 var _extractOperationName = require("./network/utils/extractOperationName");
-var _generateCurl = require("./network/utils/generateCurl");
+var _generateCurl = require("./network/utils/generateCurl");
+var _store = require("./network/conditions/store");

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

@@ -447,7 +447,12 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
               style: styles.pendingBadgeText,
               children: "Pending"
             })]
-          }) : null, event.duration ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          }) : null, event.condition && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+            style: {
+              color: "#FFCC66"
+            },
+            children: ["Conditions: ", event.condition.profile, " (+", event.condition.delayMs, " ms)"]
+          }), event.duration ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
             style: styles.httpDuration,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
               size: 10,

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

@@ -82,11 +82,15 @@ function NetworkHeaderMenuItem({
   icon,
   label,
   detail,
+  testID,
   onPress
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
     onPress: onPress,
     "sentry-label": "ignore header menu item",
+    testID: testID,
+    accessibilityRole: "button",
+    accessibilityLabel: label,
     style: styles.item,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.itemIcon,

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NetworkModal = NetworkModal;
 exports.NetworkToolView = NetworkToolView;
+var _NetworkFloatingTool = require("../conditions/NetworkFloatingTool");
 var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
@@ -183,7 +184,8 @@ function NetworkModalInner({
   enableSharedModalDimensions = false,
   inline = false,
   paused: pausedProp,
-  onPausedChange
+  onPausedChange,
+  remoteConditions
 }) {
   const {
     isPro
@@ -213,6 +215,12 @@ function NetworkModalInner({
   const [showSavedView, setShowSavedView] = (0, _react.useState)(false);
   const [showOverridesView, setShowOverridesView] = (0, _react.useState)(false);
   const [showHeaderMenu, setShowHeaderMenu] = (0, _react.useState)(false);
+  const [minimizeRequest, setMinimizeRequest] = (0, _react.useState)(0);
+  const [remoteConditionsSource] = (0, _react.useState)(_NetworkFloatingTool.createRemoteConditionsSource);
+  (0, _react.useEffect)(() => {
+    remoteConditionsSource.update(remoteConditions);
+  }, [remoteConditionsSource, remoteConditions]);
+  (0, _react.useEffect)(() => () => remoteConditionsSource.update(undefined), [remoteConditionsSource]);
   /**
    * Overrides are a DEVICE capability — a rule runs inside the app's own
    * `fetch`/`XMLHttpRequest`, which the dashboard doesn't have.
@@ -493,7 +501,7 @@ function NetworkModalInner({
         }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
           isEnabled: !paused,
           onToggle: () => setPaused(prev => !prev),
-          accessibilityLabel: "Toggle network interception",
+          accessibilityLabel: "Pause network list",
           testID: "buoy-network-power"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderLive.NetworkClearButton, {
           paused: paused
@@ -591,6 +599,18 @@ function NetworkModalInner({
     }), showHeaderMenu ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_NetworkHeaderMenu.NetworkHeaderMenu, {
       onClose: () => setShowHeaderMenu(false),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderMenu.NetworkHeaderMenuItem, {
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Wifi, {
+          size: 14,
+          color: _sharedUi.night.color.textSecondary
+        }),
+        label: "Network throttling",
+        testID: "buoy-network-menu-throttling",
+        onPress: () => {
+          setShowHeaderMenu(false);
+          (0, _NetworkFloatingTool.openNetworkFloatingTool)(remoteConditions ? remoteConditionsSource : undefined);
+          if (!inline) setMinimizeRequest(value => value + 1);
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderMenu.NetworkHeaderMenuItem, {
         icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
           size: 14,
           color: hasActiveFilter ? _sharedUi.night.color.accent : _sharedUi.night.color.textSecondary
@@ -629,12 +649,7 @@ function NetworkModalInner({
       })]
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.UpgradeModal, {
       visible: showUpgradeModal,
-      onClose: () => setShowUpgradeModal(false)
-      // "saved" is a count limit a free key can raise; "overrides" is one it
-      // can't (1 on both tiers) and "export" is Pro-only — freeKeyRaises
-      // sorts those out, so the mapping here can stay literal.
-      ,
-      limitKey: upgradeReason === "saved" ? "network.saved" : upgradeReason === "overrides" ? "network.overrideRules" : undefined,
+      onClose: () => setShowUpgradeModal(false),
       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"]
@@ -657,6 +672,7 @@ function NetworkModalInner({
     visible: visible,
     onClose: onClose,
     onMinimize: onMinimize,
+    minimizeRequest: minimizeRequest,
     persistenceKey: persistenceKey,
     variant: "night",
     header: {

package/lib/commonjs/network/conditions/NetworkConditionsControl.js

@@ -0,0 +1,235 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NetworkConditionsControl = NetworkConditionsControl;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _store = require("./store");
+var _jsxRuntime = require("react/jsx-runtime");
+const options = [{
+  profile: "normal",
+  label: "No throttling"
+}, {
+  profile: "slow",
+  label: "Slow"
+}, {
+  profile: "verySlow",
+  label: "Very slow"
+}, {
+  profile: "offline",
+  label: "Offline"
+}];
+const summaries = {
+  normal: "No added delay",
+  slow: "+500 ms before each new request",
+  verySlow: "+2 seconds before each new request",
+  offline: "New requests fail before sending"
+};
+function NetworkConditionsControl({
+  remote
+}) {
+  const local = (0, _react.useSyncExternalStore)(_store.subscribeNetworkConditions, _store.getNetworkCondition, _store.getNetworkCondition);
+  const localAvailable = (0, _react.useSyncExternalStore)(_store.subscribeNetworkConditions, _store.conditionsCanApply, _store.conditionsCanApply);
+  const [expanded, setExpanded] = (0, _react.useState)(false);
+  const [error, setError] = (0, _react.useState)();
+  const [pending, setPending] = (0, _react.useState)(false);
+  const busy = (0, _react.useRef)(false);
+  const mounted = (0, _react.useRef)(true);
+  (0, _react.useEffect)(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const profile = remote ? remote.profile : local;
+  const available = remote ? remote.available : localAvailable;
+  const active = profile !== null && profile !== "normal";
+  const tint = profile === "offline" ? _sharedUi.night.color.danger : active ? _sharedUi.night.color.warning : _sharedUi.night.color.accent;
+  async function select(value) {
+    if (!available || busy.current) return;
+    if (value === profile) {
+      setExpanded(false);
+      return;
+    }
+    busy.current = true;
+    setPending(true);
+    setError(undefined);
+    try {
+      if (remote) await remote.onChange(value);else (0, _store.setNetworkCondition)(value);
+      if (mounted.current) setExpanded(false);
+    } catch (failure) {
+      if (mounted.current) setError(failure instanceof Error ? failure.message : String(failure));
+    } finally {
+      busy.current = false;
+      if (mounted.current) setPending(false);
+    }
+  }
+  const label = options.find(option => option.profile === profile)?.label ?? "Unavailable";
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.container,
+    testID: "buoy-network-throttling-screen",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.heading,
+      children: "Connection profile"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      testID: "buoy-network-conditions",
+      accessibilityRole: "button",
+      accessibilityLabel: `Network throttling: ${label}`,
+      accessibilityState: {
+        expanded,
+        disabled: !available || pending
+      },
+      disabled: !available || pending,
+      onPress: () => setExpanded(value => !value),
+      style: [styles.dropdown, expanded && styles.dropdownOpen, !available && styles.disabled],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.value, active && {
+          color: tint
+        }],
+        children: label
+      }), pending ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+        size: "small",
+        color: _sharedUi.night.color.textSecondary
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronDown, {
+        size: 16,
+        color: _sharedUi.night.color.textSecondary
+      })]
+    }), expanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      accessibilityRole: "radiogroup",
+      accessibilityLabel: "Connection profile",
+      style: styles.options,
+      children: options.map(option => {
+        const selected = profile === option.profile;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+          testID: `buoy-network-condition-${option.profile}`,
+          accessibilityRole: "radio",
+          accessibilityLabel: option.label,
+          accessibilityState: {
+            checked: selected,
+            disabled: !available || pending
+          },
+          disabled: !available || pending,
+          onPress: () => void select(option.profile),
+          style: [styles.option, selected && styles.selected],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.optionBody,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.optionTitle, selected && {
+                color: tint
+              }],
+              children: option.label
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.caption,
+              children: summaries[option.profile]
+            })]
+          }), selected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Check, {
+            size: 16,
+            color: tint
+          })]
+        }, option.profile);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.caption,
+      accessibilityLiveRegion: "polite",
+      children: pending ? "Applying to device…" : !available ? remote ? "Conditions unavailable on this device" : "Requires a signed-in account and a development build" : profile ? summaries[profile] : "Waiting for device status"
+    }), !!error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      accessibilityRole: "alert",
+      style: styles.error,
+      children: error
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.help,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.heading,
+        children: "How it works"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.caption,
+        children: "Affects new HTTP requests through global fetch and XHR. Slow adds a wait before sending; download speed stays unchanged."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.caption,
+        children: "Stays active when you close this tool or pause capture. Choose No throttling to stop. Reloading the app resets it."
+      })]
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    padding: _sharedUi.night.gutter,
+    gap: 10
+  },
+  heading: {
+    fontSize: _sharedUi.night.font.caption,
+    fontWeight: "600",
+    color: _sharedUi.night.color.textSecondary
+  },
+  dropdown: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12,
+    minHeight: 44,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: _sharedUi.night.radius.segment,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.separator,
+    backgroundColor: _sharedUi.night.color.surfaceElevated
+  },
+  dropdownOpen: {
+    borderColor: _sharedUi.night.color.accentBorderStrong
+  },
+  value: {
+    flex: 1,
+    fontSize: _sharedUi.night.font.body,
+    color: _sharedUi.night.color.text
+  },
+  options: {
+    padding: 4,
+    borderRadius: _sharedUi.night.radius.row,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.border,
+    backgroundColor: _sharedUi.night.color.surface
+  },
+  option: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    minHeight: 54,
+    padding: 10,
+    borderRadius: _sharedUi.night.radius.segment
+  },
+  optionBody: {
+    flex: 1,
+    gap: 4
+  },
+  optionTitle: {
+    fontSize: _sharedUi.night.font.caption,
+    fontWeight: "600",
+    color: _sharedUi.night.color.text
+  },
+  selected: {
+    backgroundColor: _sharedUi.night.color.surfaceElevated
+  },
+  disabled: {
+    opacity: 0.45
+  },
+  caption: {
+    fontSize: _sharedUi.night.font.caption,
+    lineHeight: 19,
+    color: _sharedUi.night.color.textSecondary
+  },
+  help: {
+    marginTop: 14,
+    paddingTop: 16,
+    gap: 10,
+    borderTopWidth: 1,
+    borderTopColor: _sharedUi.night.color.separator
+  },
+  error: {
+    fontSize: _sharedUi.night.font.caption,
+    lineHeight: 18,
+    color: _sharedUi.night.color.danger
+  }
+});