@buoy-gg/network 7.0.13 → 7.0.15

package/lib/commonjs/network/utils/networkListener.js

@@ -4,11 +4,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.stopNetworkListener = exports.startNetworkListener = exports.removeAllNetworkListeners = exports.networkListener = exports.isNetworkListening = exports.getNetworkListenerCount = exports.addNetworkListener = void 0;
+var _engine = require("../overrides/engine");
+var _applyToXhr = require("../overrides/applyToXhr");
+var _applyToFetch = require("../overrides/applyToFetch");
+var _types = require("../overrides/types");
 /**
  * Network listener using Reactotron-style event pattern
  * Simple and reliable network interception for React Native
  */
 
+/**
+ * True only while `originalFetch` is being CALLED (not awaited).
+ *
+ * Overrides hook both `fetch` and `XMLHttpRequest`, because Expo's native
+ * `expo/fetch` bypasses XHR while bare RN's whatwg-fetch polyfill runs straight
+ * through it. On bare RN that means one `fetch()` would otherwise be overridden
+ * twice — a doubled delay and a doubled hit count.
+ *
+ * whatwg-fetch creates and sends its XHR synchronously inside the Promise
+ * executor, so a flag raised across the call expression alone is enough to
+ * cover the inner `send()` without leaking across the await.
+ */
+let insideOverriddenFetch = false;
+
 // Extended XMLHttpRequest interface for monkey-patching
 
 // Event types for network operations
@@ -203,7 +221,7 @@ class NetworkListener {
    * Handle XMLHttpRequest response processing
    * This method processes the response and emits appropriate events
    */
-  handleXHRResponse(xhr, requestId, cleanUrl, method, requestHeaders, requestData, params, startTime, isError = false, clientType = "xhr") {
+  handleXHRResponse(xhr, requestId, cleanUrl, method, requestHeaders, requestData, params, startTime, isError = false, clientType = "xhr", override) {
     const duration = startTime ? Date.now() - startTime : 0;
 
     // XHR's duration was ALREADY total (measured at readyState 4 / load), so
@@ -232,7 +250,8 @@ class NetworkListener {
         },
         error: {
           message: isError ? "Request failed" : "Network error or request aborted"
-        }
+        },
+        override
       });
       return;
     }
@@ -371,7 +390,8 @@ class NetworkListener {
           headers: responseHeaders,
           body,
           size: responseSize
-        }
+        },
+        override
       });
     } else {
       this.emit({
@@ -396,7 +416,8 @@ class NetworkListener {
         },
         error: {
           message: `HTTP ${xhr.status}: ${xhr.statusText}`
-        }
+        },
+        override
       });
     }
   }
@@ -467,6 +488,18 @@ class NetworkListener {
       // Determine client type from X-Request-Client header or default to fetch
       const clientType = requestHeaders["X-Request-Client"] || requestHeaders["x-request-client"] || "fetch";
 
+      /**
+       * Response overrides, fetch side.
+       *
+       * Needed even though `send` below also resolves them: Expo installs a
+       * NATIVE `expo/fetch` as `globalThis.fetch`, which never constructs an
+       * XMLHttpRequest, so the XHR hook alone would never see these requests.
+       * Skipped when `canSynthesizeResponse()` is false so a runtime without a
+       * `Response` global degrades to a real request rather than a broken one.
+       */
+      const outcome = (0, _applyToFetch.canSynthesizeResponse)() ? (0, _engine.overrideForRequest)(url, method) : null;
+      const override = outcome ? (0, _types.markForOutcome)(outcome) : undefined;
+
       // Emit request event
       self.emit({
         type: "request",
@@ -479,10 +512,28 @@ class NetworkListener {
           data: requestData,
           params: params || undefined,
           client: clientType
-        }
+        },
+        override
       });
       try {
-        const response = await self.originalFetch(input, init);
+        if (outcome) await (0, _applyToFetch.sleep)(outcome.delayMs);
+        if (outcome?.kind === "fail") throw (0, _applyToFetch.synthesizeFetchError)(outcome);
+        let response;
+        if (outcome?.kind === "respond") {
+          response = (0, _applyToFetch.synthesizeResponse)(url, outcome);
+        } else {
+          // The flag spans the CALL only — see `insideOverriddenFetch`. It has
+          // to be cleared before the await, or it would still be raised for
+          // every unrelated request that starts while this one is in flight.
+          insideOverriddenFetch = outcome != null;
+          let pending;
+          try {
+            pending = self.originalFetch(input, init);
+          } finally {
+            insideOverriddenFetch = false;
+          }
+          response = await pending;
+        }
         // A fetch promise resolves when the HEADERS arrive, not the body — so
         // this is time-to-first-byte, and it is where `duration` used to stop.
         // That silently excluded download time, making an identical request
@@ -551,7 +602,8 @@ class NetworkListener {
             headers: responseHeaders,
             body,
             size: responseSize
-          }
+          },
+          override
         });
         return response;
       } catch (error) {
@@ -574,7 +626,8 @@ class NetworkListener {
           error: {
             message: error instanceof Error ? error.message : "Network error",
             stack: error instanceof Error ? error.stack : undefined
-          }
+          },
+          override
         });
         throw error;
       }
@@ -641,6 +694,22 @@ class NetworkListener {
       const looksLikeAxios = acceptHeader.includes("application/json") && acceptHeader.includes("text/plain") && acceptHeader.includes("*/*");
       const clientType = explicitClient || (looksLikeAxios ? "axios" : "xhr");
 
+      /**
+       * Response overrides.
+       *
+       * This is the layer that covers `axios` and raw XMLHttpRequest. It also
+       * covers `fetch` on BARE React Native, where the whatwg-fetch polyfill
+       * runs through XHR — which is why the fetch wrapper raises
+       * `insideOverriddenFetch` around its pass-through, so one request can't
+       * be overridden twice.
+       *
+       * Matching uses the raw `url` (query string included), which is what the
+       * developer sees in the list and writes into a rule. No-ops in production
+       * builds; see `overrideForRequest`.
+       */
+      const outcome = insideOverriddenFetch ? null : (0, _engine.overrideForRequest)(url, method);
+      const override = outcome ? (0, _types.markForOutcome)(outcome) : undefined;
+
       // Emit request event
       self.emit({
         type: "request",
@@ -653,7 +722,8 @@ class NetworkListener {
           data: requestData,
           params: params || undefined,
           client: clientType
-        }
+        },
+        override
       });
 
       // Track if we've already processed this request to avoid duplicate events
@@ -661,7 +731,7 @@ class NetworkListener {
       const processResponse = (isError = false) => {
         if (processed) return;
         processed = true;
-        self.handleXHRResponse(this, requestId || "unknown", cleanUrl, method, requestHeaders, requestData, params, startTime || 0, isError, clientType);
+        self.handleXHRResponse(this, requestId || "unknown", cleanUrl, method, requestHeaders, requestData, params, startTime || 0, isError, clientType, override);
         // Clean up event listeners after processing to prevent memory leaks
         cleanup();
       };
@@ -708,6 +778,16 @@ class NetworkListener {
       this.addEventListener("error", errorListener);
       this.addEventListener("abort", abortListener);
       this.addEventListener("readystatechange", readyStateListener);
+      if (outcome) {
+        // Listeners are attached above FIRST: `runOverride` drives the same
+        // readyState transitions a real response would, and the interceptor has
+        // to see them (readyState 2 is where TTFB is stamped).
+        const handled = (0, _applyToXhr.runOverride)(this, url, outcome, () => self.originalXHRSend.call(this, data));
+        // `handled` is false only where this isn't React Native's own
+        // XMLHttpRequest and can't be driven by hand. Fall through and send for
+        // real rather than dropping the request on the floor.
+        if (handled) return;
+      }
       return self.originalXHRSend.call(this, data);
     };
     this.isListening = true;

package/lib/commonjs/preset.js

@@ -7,6 +7,7 @@ exports.createNetworkTool = createNetworkTool;
 exports.networkToolPreset = void 0;
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _NetworkModal = require("./network/components/NetworkModal");
+var _overrideRulesStore = require("./network/overrides/overrideRulesStore");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Pre-configured network monitoring tool for FloatingDevTools
@@ -25,6 +26,16 @@ var _jsxRuntime = require("react/jsx-runtime");
  * ```
  */
 
+/**
+ * Load persisted response-override rules as soon as the tool is registered.
+ *
+ * Deliberately at import time rather than when the Network modal mounts: an
+ * override has to fire from app boot, with the tool closed and nothing
+ * capturing — that is the whole point of persisting rules ("force this endpoint
+ * to 500, then restart and watch the boot path"). Hydrating also re-installs
+ * the interceptor if any rule is still active. One storage read, dev-only.
+ */void _overrideRulesStore.overrideRulesStore.ensureLoaded();
+
 /**
  * Pre-configured network monitoring tool for FloatingDevTools.
  * Includes:

package/lib/module/index.js

@@ -56,6 +56,21 @@ export { formatBytes, formatDuration, formatHttpStatus } from "./network/utils/f
 // TYPES (For TypeScript users)
 // =============================================================================
 
+// =============================================================================
+// RESPONSE OVERRIDES
+// Force a status, body, failure or delay on matching requests — Buoy's answer
+// to Chrome DevTools' Local Overrides, plus the status/latency/failure control
+// Chrome doesn't have.
+// =============================================================================
+export { overrideRulesStore
+
+/**
+ * @internal — the desktop dashboard puts the rule store in remote-mirror mode
+ * so edits made there are forwarded to the device instead of stored locally.
+ */ } from "./network/overrides/overrideRulesStore";
+export { draftFromEvent } from "./network/overrides/presets";
+export { MAX_RULES as MAX_OVERRIDE_RULES, FREE_TIER_RULE_LIMIT as FREE_TIER_OVERRIDE_LIMIT, STATUS_MIN as OVERRIDE_STATUS_MIN, STATUS_MAX as OVERRIDE_STATUS_MAX } from "./network/overrides/types";
+
 // =============================================================================
 // SHARED IGNORED-PATTERN FILTERING
 // Re-exported from @buoy-gg/shared-ui so consumers wiring the Network detail

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

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useMemo, memo } from "react";
 import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
-import { Clock, Upload, Download, AlertCircle, ChevronDown, ChevronUp, Lock, Unlock, FileJson, Filter, Globe, Link, Copy, InlineCopyButton, macOSColors, useFeatureGate, UpgradeModal } from "@buoy-gg/shared-ui";
+import { Clock, Upload, Download, AlertCircle, ChevronDown, ChevronUp, Lock, Unlock, FileJson, Filter, Globe, Link, Copy, FlaskConical, InlineCopyButton, macOSColors, useFeatureGate, UpgradeModal } from "@buoy-gg/shared-ui";
 import { formatBytes, formatDuration, formatHttpStatus } from "../utils/formatting";
 import { formatRelativeTime } from "@buoy-gg/shared-ui";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
@@ -73,8 +73,11 @@ const TimingPhases = ({
         children: /*#__PURE__*/_jsx(View, {
           style: [styles.phaseBar, {
             backgroundColor: phase.color,
-            // A floor so a 1ms phase is still a visible tick.
-            width: `${Math.max(1, phase.value / span * 100)}%`
+            // A floor so a 1ms phase is still a visible tick, and a
+            // ceiling because `total` and the phases are measured at
+            // different points — ttfb can exceed event.duration, which
+            // would push the bar past its track and over the label.
+            width: `${Math.min(100, Math.max(1, phase.value / span * 100))}%`
           }]
         })
       }), /*#__PURE__*/_jsx(Text, {
@@ -442,6 +445,15 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
               style: styles.httpDurationText,
               children: formatDuration(event.duration)
             })]
+          }) : null, event.override ? /*#__PURE__*/_jsxs(View, {
+            style: styles.overrideBadge,
+            children: [/*#__PURE__*/_jsx(FlaskConical, {
+              size: 10,
+              color: macOSColors.semantic.warning
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.overrideBadgeText,
+              children: event.override.ruleName || "Overridden"
+            })]
           }) : null, isPro ? /*#__PURE__*/_jsx(InlineCopyButton
           // LAZY, not `getFullRequestDetails()`. CopyButton resolves a
           // function value at press time; calling it here instead
@@ -795,6 +807,20 @@ const styles = StyleSheet.create({
     color: macOSColors.text.secondary,
     fontSize: 11
   },
+  overrideBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 6,
+    paddingVertical: 3,
+    borderRadius: 4,
+    backgroundColor: macOSColors.semantic.warningBackground
+  },
+  overrideBadgeText: {
+    color: macOSColors.semantic.warning,
+    fontSize: 10,
+    fontWeight: "700"
+  },
   copyFullButton: {
     marginLeft: "auto",
     flexShrink: 0,
@@ -947,7 +973,8 @@ const styles = StyleSheet.create({
     height: 7,
     borderRadius: 4,
     backgroundColor: macOSColors.background.hover,
-    justifyContent: "center"
+    justifyContent: "center",
+    overflow: "hidden"
   },
   phaseBar: {
     height: 7,

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

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

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

@@ -214,7 +214,8 @@ export function NetworkHeaderCopyButton({
   ignoredPatterns,
   copySettings,
   paused,
-  onUpgradePress
+  onUpgradePress,
+  label
 }) {
   const hasEvents = useNetworkHasMatches({
     filter,
@@ -222,15 +223,18 @@ export function NetworkHeaderCopyButton({
     paused
   });
   if (!isPro) {
-    return /*#__PURE__*/_jsx(TouchableOpacity, {
+    return /*#__PURE__*/_jsxs(TouchableOpacity, {
       "sentry-label": "ignore copy pro",
       onPress: onUpgradePress,
-      style: [styles.headerActionButton, !hasEvents && styles.headerActionButtonDisabled],
+      style: [label ? styles.copyMenuRow : styles.headerActionButton, !hasEvents && styles.headerActionButtonDisabled],
       disabled: !hasEvents,
-      children: /*#__PURE__*/_jsx(Copy, {
+      children: [/*#__PURE__*/_jsx(Copy, {
         size: 14,
         color: hasEvents ? macOSColors.text.secondary : macOSColors.text.disabled
-      })
+      }), label ? /*#__PURE__*/_jsx(Text, {
+        style: styles.copyMenuLabel,
+        children: label
+      }) : null]
     });
   }
   return /*#__PURE__*/_jsx(CopyButton
@@ -239,7 +243,9 @@ export function NetworkHeaderCopyButton({
   , {
     value: () => generateNetworkCopyText(filterNetworkEvents(applyIgnoredPatterns(networkEventStore.getEvents(), ignoredPatterns), filter), copySettings),
     size: 14,
-    buttonStyle: styles.headerActionButton,
+    label: label,
+    buttonStyle: label ? styles.copyMenuRow : styles.headerActionButton,
+    labelStyle: styles.copyMenuLabel,
     colors: {
       idle: hasEvents ? macOSColors.text.secondary : macOSColors.text.disabled,
       success: macOSColors.semantic.success,
@@ -249,6 +255,20 @@ export function NetworkHeaderCopyButton({
   });
 }
 const styles = StyleSheet.create({
+  /** The overflow-menu variant: a full-width row, matching the other items. */
+  copyMenuRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingHorizontal: 6,
+    paddingVertical: 11,
+    justifyContent: "flex-start"
+  },
+  copyMenuLabel: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: macOSColors.text.primary
+  },
   headerChipRow: {
     flexDirection: "row",
     alignItems: "center",

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

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