@buoy-gg/network 7.0.35 → 7.0.38

package/lib/commonjs/preset.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.networkToolPreset = exports.createNetworkTool = void 0;
+var _NetworkConditionsIcon = require("./network/conditions/NetworkConditionsIcon");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _NetworkModal = require("./network/components/NetworkModal");
 var _overrideRulesStore = require("./network/overrides/overrideRulesStore");
@@ -72,7 +73,7 @@ const networkToolPreset = exports.networkToolPreset = (0, _sharedUi.defineToolPr
   slot: "both",
   icon: ({
     size
-  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NetworkIcon, {
+  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkConditionsIcon.NetworkConditionsIcon, {
     size: size
   }),
   component: _NetworkModal.NetworkModal,

package/lib/module/index.js

@@ -99,4 +99,5 @@ export { networkEventStore } from "./network/utils/networkEventStore";
 export { networkSavedStore, flagsForEventId, FREE_TIER_SAVED_LIMIT, MAX_PINNED, MAX_SAVED } from "./network/utils/networkSavedStore";
 export { generateCurl } from "./network/utils/generateCurl";
 /** @internal */
-export { networkListener, addNetworkListener, removeAllNetworkListeners } from "./network/utils/networkListener";
+export { networkListener, addNetworkListener, removeAllNetworkListeners } from "./network/utils/networkListener";
+export { NETWORK_CONDITIONS, getNetworkCondition, setNetworkCondition, subscribeNetworkConditions } from "./network/conditions/store";

package/lib/module/index.web.js

@@ -78,4 +78,5 @@ export { ruleMatches } from "./network/overrides/matchRule";
 export { filterNetworkEvents, applyIgnoredPatterns } from "./network/utils/filterNetworkEvents";
 export { splitPinned } from "./network/utils/withPinnedFirst";
 export { extractOperationName } from "./network/utils/extractOperationName";
-export { generateCurl } from "./network/utils/generateCurl";
+export { generateCurl } from "./network/utils/generateCurl";
+export { NETWORK_CONDITIONS, getNetworkCondition, setNetworkCondition, subscribeNetworkConditions } from "./network/conditions/store";

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

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

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

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

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

@@ -1,8 +1,9 @@
 "use strict";
 
+import { createRemoteConditionsSource, openNetworkFloatingTool } from "../conditions/NetworkFloatingTool";
 import { useState, useRef, useEffect, useCallback } from "react";
 import { View, StyleSheet, TouchableOpacity } from "react-native";
-import { Search, Filter, Bookmark, JsModal, ModalHeader, devToolsStorageKeys, macOSColors, night, persistentStorage, NightSegmented, useFeatureGate, UpgradeModal, PowerToggleButton, useIgnoredPatterns, windowDragProps } from "@buoy-gg/shared-ui";
+import { Search, Wifi, Filter, Bookmark, JsModal, ModalHeader, devToolsStorageKeys, macOSColors, night, persistentStorage, NightSegmented, useFeatureGate, UpgradeModal, PowerToggleButton, useIgnoredPatterns, windowDragProps } from "@buoy-gg/shared-ui";
 import { NetworkFilterViewV3 } from "./NetworkFilterViewV3";
 import { TickProvider } from "../hooks/useTickEveryMinute";
 import { NetworkEventDetailView } from "./NetworkEventDetailView";
@@ -178,7 +179,8 @@ function NetworkModalInner({
   enableSharedModalDimensions = false,
   inline = false,
   paused: pausedProp,
-  onPausedChange
+  onPausedChange,
+  remoteConditions
 }) {
   const {
     isPro
@@ -208,6 +210,12 @@ function NetworkModalInner({
   const [showSavedView, setShowSavedView] = useState(false);
   const [showOverridesView, setShowOverridesView] = useState(false);
   const [showHeaderMenu, setShowHeaderMenu] = useState(false);
+  const [minimizeRequest, setMinimizeRequest] = useState(0);
+  const [remoteConditionsSource] = useState(createRemoteConditionsSource);
+  useEffect(() => {
+    remoteConditionsSource.update(remoteConditions);
+  }, [remoteConditionsSource, remoteConditions]);
+  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.
@@ -488,7 +496,7 @@ function NetworkModalInner({
         }) : null, /*#__PURE__*/_jsx(PowerToggleButton, {
           isEnabled: !paused,
           onToggle: () => setPaused(prev => !prev),
-          accessibilityLabel: "Toggle network interception",
+          accessibilityLabel: "Pause network list",
           testID: "buoy-network-power"
         }), /*#__PURE__*/_jsx(NetworkClearButton, {
           paused: paused
@@ -586,6 +594,18 @@ function NetworkModalInner({
     }), showHeaderMenu ? /*#__PURE__*/_jsxs(NetworkHeaderMenu, {
       onClose: () => setShowHeaderMenu(false),
       children: [/*#__PURE__*/_jsx(NetworkHeaderMenuItem, {
+        icon: /*#__PURE__*/_jsx(Wifi, {
+          size: 14,
+          color: night.color.textSecondary
+        }),
+        label: "Network throttling",
+        testID: "buoy-network-menu-throttling",
+        onPress: () => {
+          setShowHeaderMenu(false);
+          openNetworkFloatingTool(remoteConditions ? remoteConditionsSource : undefined);
+          if (!inline) setMinimizeRequest(value => value + 1);
+        }
+      }), /*#__PURE__*/_jsx(NetworkHeaderMenuItem, {
         icon: /*#__PURE__*/_jsx(Filter, {
           size: 14,
           color: hasActiveFilter ? night.color.accent : night.color.textSecondary
@@ -624,12 +644,7 @@ function NetworkModalInner({
       })]
     }) : null, /*#__PURE__*/_jsx(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 ${MAX_OVERRIDE_RULES} rules at once (free keeps ${FREE_TIER_OVERRIDE_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 ${MAX_SAVED} requests (free keeps ${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"]
@@ -652,6 +667,7 @@ function NetworkModalInner({
     visible: visible,
     onClose: onClose,
     onMinimize: onMinimize,
+    minimizeRequest: minimizeRequest,
     persistenceKey: persistenceKey,
     variant: "night",
     header: {

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

@@ -0,0 +1,231 @@
+"use strict";
+
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { ChevronDown, Check, night } from "@buoy-gg/shared-ui";
+import { conditionsCanApply, getNetworkCondition, setNetworkCondition, subscribeNetworkConditions } from "./store";
+import { jsx as _jsx, jsxs as _jsxs } from "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"
+};
+export function NetworkConditionsControl({
+  remote
+}) {
+  const local = useSyncExternalStore(subscribeNetworkConditions, getNetworkCondition, getNetworkCondition);
+  const localAvailable = useSyncExternalStore(subscribeNetworkConditions, conditionsCanApply, conditionsCanApply);
+  const [expanded, setExpanded] = useState(false);
+  const [error, setError] = useState();
+  const [pending, setPending] = useState(false);
+  const busy = useRef(false);
+  const mounted = useRef(true);
+  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" ? night.color.danger : active ? night.color.warning : 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 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__*/_jsxs(View, {
+    style: styles.container,
+    testID: "buoy-network-throttling-screen",
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.heading,
+      children: "Connection profile"
+    }), /*#__PURE__*/_jsxs(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__*/_jsx(Text, {
+        style: [styles.value, active && {
+          color: tint
+        }],
+        children: label
+      }), pending ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "small",
+        color: night.color.textSecondary
+      }) : /*#__PURE__*/_jsx(ChevronDown, {
+        size: 16,
+        color: night.color.textSecondary
+      })]
+    }), expanded && /*#__PURE__*/_jsx(View, {
+      accessibilityRole: "radiogroup",
+      accessibilityLabel: "Connection profile",
+      style: styles.options,
+      children: options.map(option => {
+        const selected = profile === option.profile;
+        return /*#__PURE__*/_jsxs(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__*/_jsxs(View, {
+            style: styles.optionBody,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [styles.optionTitle, selected && {
+                color: tint
+              }],
+              children: option.label
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.caption,
+              children: summaries[option.profile]
+            })]
+          }), selected && /*#__PURE__*/_jsx(Check, {
+            size: 16,
+            color: tint
+          })]
+        }, option.profile);
+      })
+    }), /*#__PURE__*/_jsx(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__*/_jsx(Text, {
+      accessibilityRole: "alert",
+      style: styles.error,
+      children: error
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.help,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.heading,
+        children: "How it works"
+      }), /*#__PURE__*/_jsx(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__*/_jsx(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 = StyleSheet.create({
+  container: {
+    padding: night.gutter,
+    gap: 10
+  },
+  heading: {
+    fontSize: night.font.caption,
+    fontWeight: "600",
+    color: night.color.textSecondary
+  },
+  dropdown: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12,
+    minHeight: 44,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: night.radius.segment,
+    borderWidth: 1,
+    borderColor: night.color.separator,
+    backgroundColor: night.color.surfaceElevated
+  },
+  dropdownOpen: {
+    borderColor: night.color.accentBorderStrong
+  },
+  value: {
+    flex: 1,
+    fontSize: night.font.body,
+    color: night.color.text
+  },
+  options: {
+    padding: 4,
+    borderRadius: night.radius.row,
+    borderWidth: 1,
+    borderColor: night.color.border,
+    backgroundColor: night.color.surface
+  },
+  option: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    minHeight: 54,
+    padding: 10,
+    borderRadius: night.radius.segment
+  },
+  optionBody: {
+    flex: 1,
+    gap: 4
+  },
+  optionTitle: {
+    fontSize: night.font.caption,
+    fontWeight: "600",
+    color: night.color.text
+  },
+  selected: {
+    backgroundColor: night.color.surfaceElevated
+  },
+  disabled: {
+    opacity: 0.45
+  },
+  caption: {
+    fontSize: night.font.caption,
+    lineHeight: 19,
+    color: night.color.textSecondary
+  },
+  help: {
+    marginTop: 14,
+    paddingTop: 16,
+    gap: 10,
+    borderTopWidth: 1,
+    borderTopColor: night.color.separator
+  },
+  error: {
+    fontSize: night.font.caption,
+    lineHeight: 18,
+    color: night.color.danger
+  }
+});

package/lib/module/network/conditions/NetworkConditionsControl.test.js

@@ -0,0 +1,135 @@
+"use strict";
+
+// @vitest-environment jsdom
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { NetworkConditionsControl } from "./NetworkConditionsControl";
+vi.mock("@buoy-gg/shared-ui", async () => ({
+  ChevronDown: () => null,
+  Check: () => null,
+  night: (await vi.importActual("../../../../shared/src/ui/night/nightTheme")).night
+}));
+vi.mock("react-native", () => ({
+  StyleSheet: {
+    create: value => value
+  },
+  View: ({
+    children
+  }) => /*#__PURE__*/createElement("div", null, children),
+  Text: ({
+    children
+  }) => /*#__PURE__*/createElement("span", null, children),
+  ActivityIndicator: () => /*#__PURE__*/createElement("span", null, "pending"),
+  TouchableOpacity: ({
+    children,
+    onPress,
+    disabled,
+    accessibilityLabel,
+    accessibilityState,
+    testID
+  }) => /*#__PURE__*/createElement("button", {
+    onClick: onPress,
+    disabled,
+    "aria-label": accessibilityLabel,
+    "aria-checked": accessibilityState?.checked,
+    "data-testid": testID
+  }, children)
+}));
+vi.mock("./store", () => ({
+  NETWORK_CONDITIONS: {
+    normal: {
+      label: "Normal"
+    },
+    slow: {
+      label: "Slow"
+    },
+    verySlow: {
+      label: "Very slow"
+    },
+    offline: {
+      label: "Offline"
+    }
+  },
+  getNetworkCondition: () => "normal",
+  conditionsCanApply: () => true,
+  subscribeNetworkConditions: () => () => {},
+  setNetworkCondition: vi.fn()
+}));
+let root;
+let container;
+beforeEach(() => {
+  globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+  container = document.createElement("div");
+  root = createRoot(container);
+});
+afterEach(() => act(() => root.unmount()));
+const button = profile => container.querySelector(`[data-testid="buoy-network-condition-${profile}"]`);
+function render(remote) {
+  act(() => root.render(/*#__PURE__*/createElement(NetworkConditionsControl, {
+    remote
+  })));
+}
+const dropdown = () => container.querySelector('[data-testid="buoy-network-conditions"]');
+const open = () => act(() => dropdown().click());
+it("defaults to a closed No throttling dropdown and closes when the current option is chosen", () => {
+  const onChange = vi.fn();
+  render({
+    profile: "normal",
+    available: true,
+    onChange
+  });
+  expect(dropdown().textContent).toBe("No throttling");
+  expect(button("normal")).toBeNull();
+  open();
+  expect(["normal", "slow", "verySlow", "offline"].every(value => !!button(value))).toBe(true);
+  act(() => button("normal").click());
+  expect(button("normal")).toBeNull();
+  expect(onChange).not.toHaveBeenCalled();
+});
+it("blocks duplicate remote changes and waits for the device profile before selecting it", async () => {
+  let finish;
+  const onChange = vi.fn(() => new Promise(resolve => {
+    finish = resolve;
+  }));
+  render({
+    profile: "normal",
+    available: true,
+    onChange
+  });
+  open();
+  act(() => button("slow").click());
+  expect(button("offline").disabled).toBe(true);
+  expect(button("normal").getAttribute("aria-checked")).toBe("true");
+  act(() => button("offline").click());
+  expect(onChange).toHaveBeenCalledExactlyOnceWith("slow");
+  await act(async () => finish());
+  render({
+    profile: "slow",
+    available: true,
+    onChange
+  });
+  expect(dropdown().textContent).toBe("Slow");
+  expect(button("slow")).toBeNull();
+  open();
+  expect(button("slow").getAttribute("aria-checked")).toBe("true");
+});
+it("reports a remote error, permits retry, and disables unavailable devices", async () => {
+  const onChange = vi.fn().mockRejectedValue(new Error("Device disconnected"));
+  render({
+    profile: "normal",
+    available: true,
+    onChange
+  });
+  open();
+  await act(async () => button("offline").click());
+  expect(container.textContent).toContain("Device disconnected");
+  expect(button("offline").disabled).toBe(false);
+  render({
+    profile: null,
+    available: false,
+    onChange
+  });
+  expect(button("normal").disabled).toBe(true);
+  expect(container.textContent).toContain("Conditions unavailable on this device");
+});

package/lib/module/network/conditions/NetworkConditionsIcon.js

@@ -0,0 +1,29 @@
+"use strict";
+
+import { useSyncExternalStore } from "react";
+import { Text, View } from "react-native";
+import { NetworkIcon } from "@buoy-gg/shared-ui";
+import { getNetworkCondition, subscribeNetworkConditions, NETWORK_CONDITIONS } from "./store";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function NetworkConditionsIcon({
+  size
+}) {
+  const profile = useSyncExternalStore(subscribeNetworkConditions, getNetworkCondition, getNetworkCondition);
+  return /*#__PURE__*/_jsxs(View, {
+    accessibilityLabel: profile === "normal" ? "Network" : `Network: ${NETWORK_CONDITIONS[profile].label}`,
+    children: [/*#__PURE__*/_jsx(NetworkIcon, {
+      size: size
+    }), profile !== "normal" && /*#__PURE__*/_jsx(Text, {
+      testID: "buoy-network-condition-indicator",
+      style: {
+        position: "absolute",
+        top: -6,
+        right: -8,
+        color: "#FFCC66",
+        fontSize: 10,
+        fontWeight: "700"
+      },
+      children: profile === "offline" ? "OFF" : `+${NETWORK_CONDITIONS[profile].delayMs}`
+    })]
+  });
+}