@buoy-gg/network 7.0.13 → 7.0.14

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

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

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

@@ -0,0 +1,178 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NetworkNumberPrompt = NetworkNumberPrompt;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Entering one number, without the keyboard eating the screen.
+ *
+ * The custom status / delay / times fields used to be inline inputs sitting
+ * mid-form. Focusing one raises the keyboard, which on a phone covers roughly
+ * the bottom half of the tool — including, depending on where you'd scrolled,
+ * the field you were typing into and the Save button you needed next.
+ *
+ * Pinning the panel to the TOP is the fix, and it's the same one
+ * `StorageValueEditModal` reached for: a centred panel gets shoved up or
+ * covered the moment the field focuses, and a bottom sheet is simply
+ * underneath it. At the top it stays put and stays readable.
+ *
+ * Deliberately not a reuse of that component — this asks for a number and
+ * nothing else. It has no type inference, no raw-JSON escape hatch and no
+ * shape-preservation rules, so borrowing 400 lines to avoid writing 100 would
+ * be the wrong trade.
+ */
+
+function NetworkNumberPrompt({
+  title,
+  hint,
+  value,
+  placeholder = "Number",
+  min,
+  max,
+  onSubmit,
+  onCancel
+}) {
+  const [text, setText] = (0, _react.useState)(value != null ? String(value) : "");
+  const submit = () => {
+    const trimmed = text.trim();
+    if (!trimmed) {
+      onSubmit(null);
+      return;
+    }
+    const parsed = Number(trimmed);
+    if (!Number.isFinite(parsed)) {
+      onSubmit(null);
+      return;
+    }
+    // Clamped here rather than accepted-then-silently-changed: a field that
+    // takes 999 and stores 599 is a field that lies.
+    let next = parsed;
+    if (min != null) next = Math.max(min, next);
+    if (max != null) next = Math.min(max, next);
+    onSubmit(next);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.overlay,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      style: styles.backdrop,
+      activeOpacity: 1,
+      onPress: onCancel,
+      "sentry-label": "ignore dismiss number prompt"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.panel,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.title,
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+        style: styles.input,
+        value: text,
+        onChangeText: setText,
+        placeholder: placeholder,
+        placeholderTextColor: _sharedUi.macOSColors.text.muted,
+        keyboardType: "number-pad",
+        autoFocus: true,
+        selectTextOnFocus: true,
+        onSubmitEditing: submit,
+        returnKeyType: "done",
+        "sentry-label": "ignore number prompt input",
+        accessibilityLabel: title
+      }), hint ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.hint,
+        children: hint
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.actions,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: onCancel,
+          "sentry-label": "ignore cancel number prompt",
+          style: [styles.button, styles.cancelButton],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.cancelText,
+            children: "Cancel"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: submit,
+          "sentry-label": "ignore save number prompt",
+          style: [styles.button, styles.saveButton],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.saveText,
+            children: "Set"
+          })
+        })]
+      })]
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  overlay: {
+    ..._sharedUi.absoluteFill,
+    zIndex: 40
+  },
+  backdrop: {
+    ..._sharedUi.absoluteFill,
+    backgroundColor: "rgba(0,0,0,0.6)"
+  },
+  panel: {
+    marginHorizontal: 12,
+    marginTop: 12,
+    padding: 14,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.hover,
+    backgroundColor: _sharedUi.macOSColors.background.card,
+    gap: 10
+  },
+  title: {
+    fontSize: 13,
+    fontWeight: "700",
+    color: _sharedUi.macOSColors.text.primary
+  },
+  input: {
+    backgroundColor: _sharedUi.macOSColors.background.input,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.input,
+    borderRadius: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 16,
+    fontWeight: "700",
+    color: _sharedUi.macOSColors.text.primary
+  },
+  hint: {
+    fontSize: 10,
+    color: _sharedUi.macOSColors.text.muted
+  },
+  actions: {
+    flexDirection: "row",
+    gap: 8
+  },
+  button: {
+    flex: 1,
+    paddingVertical: 10,
+    borderRadius: 6,
+    alignItems: "center",
+    borderWidth: 1
+  },
+  cancelButton: {
+    borderColor: _sharedUi.macOSColors.border.default,
+    backgroundColor: _sharedUi.macOSColors.background.base
+  },
+  cancelText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: _sharedUi.macOSColors.text.secondary
+  },
+  saveButton: {
+    borderColor: _sharedUi.macOSColors.semantic.info,
+    backgroundColor: `${_sharedUi.macOSColors.semantic.info}22`
+  },
+  saveText: {
+    fontSize: 12,
+    fontWeight: "700",
+    color: _sharedUi.macOSColors.semantic.info
+  }
+});