@buoy-gg/network 7.0.32 → 7.0.34

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

@@ -1,11 +1,11 @@
 "use strict";
 
-import { DynamicFilterView, macOSColors, FileText, FileCode, Link, Zap, Settings, Hash, Eye, ChevronDown, ChevronUp, AlertTriangle, ToolbarCopyButton, formatRelativeTime, useFeatureGate, ProFeatureBanner } from "@buoy-gg/shared-ui";
+import { DynamicFilterView, macOSColors, FileText, FileCode, Link, Zap, Settings, Hash, Eye, ToolbarCopyButton, formatRelativeTime, useFeatureGate, ProFeatureBanner, ExportPreview } from "@buoy-gg/shared-ui";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
 import { useCallback, useMemo, useState } from "react";
-import { Text, StyleSheet, ScrollView, View, TouchableOpacity } from "react-native";
+import { Text, StyleSheet, ScrollView, View } from "react-native";
 import { useTickEveryMinute } from "../hooks/useTickEveryMinute";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export const DEFAULT_COPY_SETTINGS = {
   includeMethod: true,
   includeStatus: true,
@@ -541,62 +541,16 @@ export function NetworkCopySettingsView({
   const generatePreviewContent = useCallback(() => {
     const dataSource = hasLiveData ? events : [mockRequestData];
     const requestCount = dataSource.length;
-
-    // Collapsed state - show summary with expand button
-    if (!isPreviewExpanded) {
-      const warningColor = sizeWarningLevel === 'danger' ? macOSColors.semantic.error : sizeWarningLevel === 'warning' ? macOSColors.semantic.warning : macOSColors.text.secondary;
-      return /*#__PURE__*/_jsxs(View, {
-        style: styles.collapsedPreview,
-        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.expandButton,
-          onPress: () => setIsPreviewExpanded(true),
-          children: /*#__PURE__*/_jsxs(View, {
-            style: styles.expandButtonContent,
-            children: [/*#__PURE__*/_jsx(Eye, {
-              size: 16,
-              color: macOSColors.semantic.info
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.expandButtonTextContainer,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.expandButtonTitle,
-                children: "Show Preview"
-              }), /*#__PURE__*/_jsxs(Text, {
-                style: styles.expandButtonSubtitle,
-                children: [requestCount, " request", requestCount !== 1 ? 's' : '', " \u2022 ~", formatBytes(estimatedSize)]
-              })]
-            }), /*#__PURE__*/_jsx(ChevronDown, {
-              size: 16,
-              color: macOSColors.text.muted
-            })]
-          })
-        }), sizeWarningLevel !== 'none' && /*#__PURE__*/_jsxs(View, {
-          style: [styles.sizeWarning, sizeWarningLevel === 'danger' && styles.sizeWarningDanger],
-          children: [/*#__PURE__*/_jsx(AlertTriangle, {
-            size: 12,
-            color: warningColor
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.sizeWarningText, {
-              color: warningColor
-            }],
-            children: sizeWarningLevel === 'danger' ? 'Very large payload - may cause performance issues' : 'Large payload - preview may be slow'
-          })]
-        })]
-      });
-    }
-
-    // Expanded state - show collapse button + actual content
-    return /*#__PURE__*/_jsxs(View, {
-      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: styles.collapseButton,
-        onPress: () => setIsPreviewExpanded(false),
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.collapseButtonText,
-          children: "Hide Preview"
-        }), /*#__PURE__*/_jsx(ChevronUp, {
-          size: 14,
-          color: macOSColors.text.secondary
-        })]
-      }), generateExpandedPreviewContent()]
+    return /*#__PURE__*/_jsx(ExportPreview, {
+      expanded: isPreviewExpanded,
+      onExpandedChange: setIsPreviewExpanded,
+      summary: `${requestCount} request${requestCount !== 1 ? "s" : ""} • ~${formatBytes(estimatedSize)}`,
+      warningLevel: sizeWarningLevel,
+      warningText: {
+        warning: "Large payload - preview may be slow",
+        danger: "Very large payload - may cause performance issues"
+      },
+      renderBody: generateExpandedPreviewContent
     });
   }, [settings, hasLiveData, events, mockRequestData, isPreviewExpanded, estimatedSize, sizeWarningLevel, generateExpandedPreviewContent]);
 
@@ -785,71 +739,6 @@ const styles = StyleSheet.create({
     marginRight: 8
   },
   // Collapsible preview styles
-  collapsedPreview: {
-    gap: 8
-  },
-  expandButton: {
-    backgroundColor: macOSColors.background.input,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: macOSColors.border.default,
-    padding: 12
-  },
-  expandButtonContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 10
-  },
-  expandButtonTextContainer: {
-    flex: 1
-  },
-  expandButtonTitle: {
-    fontSize: 13,
-    fontWeight: '600',
-    color: macOSColors.text.primary
-  },
-  expandButtonSubtitle: {
-    fontSize: 11,
-    color: macOSColors.text.secondary,
-    marginTop: 2
-  },
-  collapseButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 6,
-    paddingVertical: 8,
-    marginBottom: 8,
-    backgroundColor: macOSColors.background.hover,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: macOSColors.border.default
-  },
-  collapseButtonText: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: macOSColors.text.secondary
-  },
-  sizeWarning: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    backgroundColor: macOSColors.semantic.warningBackground,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: macOSColors.semantic.warning + '30'
-  },
-  sizeWarningDanger: {
-    backgroundColor: macOSColors.semantic.errorBackground,
-    borderColor: macOSColors.semantic.error + '30'
-  },
-  sizeWarningText: {
-    fontSize: 11,
-    fontWeight: '500',
-    flex: 1
-  },
   // Gated container styles for free users
   gatedContainer: {
     flex: 1,

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

@@ -40,6 +40,21 @@ export function NetworkHeaderBadges({
     ignoredPatterns,
     paused
   });
+  return /*#__PURE__*/_jsx(NetworkHeaderBadgesView, {
+    counts: counts,
+    activeStatus: activeStatus,
+    onToggleStatus: onToggleStatus
+  });
+}
+/**
+ * The chips themselves, fed by props — what the parity sheet renders with
+ * fixture counts (`NetworkHeaderBadges` reads the live store).
+ */
+export function NetworkHeaderBadgesView({
+  counts,
+  activeStatus,
+  onToggleStatus
+}) {
   return /*#__PURE__*/_jsxs(View, {
     style: styles.headerChipRow,
     children: [/*#__PURE__*/_jsxs(TouchableOpacity, {

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

@@ -14,7 +14,7 @@
 
 import { useCallback } from "react";
 import { FlatList, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { FlaskConical, Globe, Pin, Power, macOSColors } from "@buoy-gg/shared-ui";
+import { FlaskConical, Pin, Power, macOSColors, ToolEmptyState, resolveListEmptyState, EVENT_LIST_PRESET } from "@buoy-gg/shared-ui";
 import { NetworkEventItemCompact } from "./NetworkEventItemCompact";
 import { NetworkUpgradeBanner } from "./NetworkUpgradeBanner";
 import { useNetworkEventList } from "../hooks/useNetworkEventList";
@@ -23,23 +23,6 @@ import { useOverrideRules } from "../hooks/useOverrideRules";
 import { ruleMatches } from "../overrides/matchRule";
 import { splitPinned } from "../utils/withPinnedFirst";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function EmptyState({
-  isEnabled
-}) {
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.emptyState,
-    children: [/*#__PURE__*/_jsx(Globe, {
-      size: 32,
-      color: macOSColors.text.muted
-    }), /*#__PURE__*/_jsx(Text, {
-      style: styles.emptyTitle,
-      children: "No network events"
-    }), /*#__PURE__*/_jsx(Text, {
-      style: styles.emptyText,
-      children: isEnabled ? "Network requests will appear here" : "Enable interception to start capturing"
-    })]
-  });
-}
 const keyExtractor = item => item.id;
 
 /**
@@ -160,7 +143,8 @@ export function NetworkListScreen({
   const {
     visibleEvents,
     hasLockedEvents,
-    lockedEventCount
+    lockedEventCount,
+    totalEvents
   } = useNetworkEventList({
     filter,
     ignoredPatterns,
@@ -222,6 +206,34 @@ export function NetworkListScreen({
     onLongPress: handleLongPress,
     saved: savedLiveIds.has(item.id)
   });
+
+  // Which flavour of "nothing here" this is. Pins and overrides render
+  // outside the list, so a screen showing only those is not empty at all.
+  const renderEmpty = () => {
+    // Pins and overrides render outside the list, so a screen showing only
+    // those is not empty at all.
+    if (pinnedRows.length > 0 || overridden.length > 0) return null;
+    return /*#__PURE__*/_jsx(ToolEmptyState, {
+      testID: "buoy-network-empty",
+      ...resolveListEmptyState({
+        subject: "requests",
+        search: searchText,
+        total: totalEvents,
+        capturing: isEnabled,
+        waiting: {
+          // fishing = capture is on and nothing has arrived.
+          otto: "fishing",
+          title: "No network events",
+          message: "Network requests will appear here"
+        },
+        paused: {
+          // paused = capture off. Both are literally what the copy says.
+          title: "No network events",
+          message: "Enable interception to start capturing"
+        }
+      })
+    });
+  };
   const renderListFooter = () => {
     if (!hasLockedEvents) return null;
     const isSearching = searchText.length > 0;
@@ -266,10 +278,8 @@ export function NetworkListScreen({
       showsVerticalScrollIndicator: true
       // Clipped cells falsely fail Detox's hittability check (known
       // RN+Detox issue), so e2e bundles (Metro started with
-      // EXPO_PUBLIC_E2E=1) turn clipping off. Inlined at bundle time;
-      // guarded so a non-inlining bundler keeps the prod behavior.
+      // EXPO_PUBLIC_E2E=1) turn clipping off — see EVENT_LIST_PRESET.
       ,
-      removeClippedSubviews: !(typeof process !== "undefined" && process.env?.EXPO_PUBLIC_E2E),
       onEndReachedThreshold: 0.8
       // The list OWNS scrolling (NetworkModal passes
       // disableScrollWrapper while this screen is visible) so FlatList
@@ -278,24 +288,18 @@ export function NetworkListScreen({
       // rows: at the store's 500-event cap that measured 17 JS FPS /
       // 133% CPU / 1.4GB vs ~53 JS FPS / 52% / 360MB virtualized
       // (buoy-optimize batch 2026-07-06, batch-1783396983529-6l7w).
-      // Window/batch values are the batch's "tuned" winner.
+      // Window/batch values are the batch's "tuned" winner (EVENT_LIST_PRESET).
       ,
       scrollEnabled: true,
-      initialNumToRender: 12,
-      maxToRenderPerBatch: 8,
-      windowSize: 5,
-      updateCellsBatchingPeriod: 50
+      ...EVENT_LIST_PRESET,
       // Saving a request from the detail view changes a row's glyph
       // without changing `data`. VirtualizedList is a PureComponent, so
       // the Set has to be declared as a re-render marker rather than
       // relying on `renderItem` getting a fresh identity.
-      ,
       extraData: savedLiveIds,
       "sentry-label": "ignore network events list",
       ListFooterComponent: renderListFooter
-    }) : pinnedRows.length > 0 || overridden.length > 0 ? null : /*#__PURE__*/_jsx(EmptyState, {
-      isEnabled: isEnabled
-    })]
+    }) : renderEmpty()]
   });
 }
 const styles = StyleSheet.create({
@@ -392,21 +396,5 @@ const styles = StyleSheet.create({
   },
   listContent: {
     paddingTop: 8
-  },
-  emptyState: {
-    alignItems: "center",
-    paddingVertical: 40
-  },
-  emptyTitle: {
-    color: macOSColors.text.primary,
-    fontSize: 14,
-    fontWeight: "600",
-    marginTop: 12,
-    marginBottom: 6
-  },
-  emptyText: {
-    color: macOSColors.text.muted,
-    fontSize: 12,
-    textAlign: "center"
   }
 });

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

@@ -1,8 +1,8 @@
 "use strict";
 
 import { useState, useRef, useEffect, useCallback } from "react";
-import { View, StyleSheet, TouchableOpacity, TextInput } from "react-native";
-import { Search, Filter, Bookmark, X, JsModal, ModalHeader, devToolsStorageKeys, macOSColors, night, persistentStorage, NightSegmented, useFeatureGate, UpgradeModal, PowerToggleButton, useIgnoredPatterns, windowDragProps } from "@buoy-gg/shared-ui";
+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 { NetworkFilterViewV3 } from "./NetworkFilterViewV3";
 import { TickProvider } from "../hooks/useTickEveryMinute";
 import { NetworkEventDetailView } from "./NetworkEventDetailView";
@@ -230,6 +230,12 @@ function NetworkModalInner({
   const [activeTab, setActiveTab] = useState("filters");
   const [searchText, setSearchText] = useState("");
   const [isSearchActive, setIsSearchActive] = useState(false);
+  // True while the header's clear ✕ is being pressed. With a mouse, pressing
+  // the ✕ blurs the input FIRST, and the blur handler below closes search —
+  // which unmounts the ✕ before its own press can fire, so the query was
+  // never cleared (desktop). Press-in lands before the blur, so the blur
+  // handler can tell this dismissal apart from a click elsewhere.
+  const clearPressRef = useRef(false);
   // The Saved screen's search box lives HERE, not in that screen, because the
   // detail footer steps through the same list the user was just looking at —
   // and the Saved screen is unmounted while a detail is open.
@@ -441,38 +447,24 @@ function NetworkModalInner({
         onBack: onBack
       }), /*#__PURE__*/_jsx(ModalHeader.Content, {
         title: "",
-        children: isSearchActive ? /*#__PURE__*/_jsxs(View, {
-          style: styles.headerSearchContainer,
-          children: [/*#__PURE__*/_jsx(Search, {
-            size: 14,
-            color: night.color.textSecondary
-          }), /*#__PURE__*/_jsx(TextInput, {
-            ref: searchInputRef,
-            style: styles.headerSearchInput,
-            placeholder: "Search URL, method, operation, error...",
-            placeholderTextColor: night.color.placeholder,
-            value: searchText,
-            onChangeText: handleSearch,
-            onSubmitEditing: () => setIsSearchActive(false),
-            onBlur: () => setIsSearchActive(false),
-            "sentry-label": "ignore network search header",
-            accessibilityLabel: "Search network requests",
-            testID: "buoy-network-search-input",
-            autoCapitalize: "none",
-            autoCorrect: false,
-            returnKeyType: "search"
-          }), searchText.length > 0 ? /*#__PURE__*/_jsx(TouchableOpacity, {
-            onPress: () => {
-              handleSearch("");
-              setIsSearchActive(false);
-            },
-            "sentry-label": "ignore clear search header",
-            style: styles.headerSearchClear,
-            children: /*#__PURE__*/_jsx(X, {
-              size: 14,
-              color: night.color.textSecondary
-            })
-          }) : null]
+        children: isSearchActive ? /*#__PURE__*/_jsx(ModalHeader.Search, {
+          value: searchText,
+          onChangeText: handleSearch,
+          onCancel: () => {
+            handleSearch("");
+            setIsSearchActive(false);
+          },
+          onDismiss: () => setIsSearchActive(false),
+          dismissOnBlur: true,
+          clearOnlyWhenText: true,
+          placeholder: "Search URL, method, operation, error...",
+          accessibilityLabel: "Search network requests",
+          iconSize: 14,
+          testID: "buoy-network-search-input",
+          clearTestID: "buoy-network-search-clear",
+          inputProps: {
+            "sentry-label": "ignore network search header"
+          }
         }) : /*#__PURE__*/_jsx(NetworkHeaderBadges, {
           activeStatus: filter.status,
           onToggleStatus: toggleStatusFilter,
@@ -717,27 +709,6 @@ const styles = StyleSheet.create({
   },
   // Night chrome — the header is glass over the star field, so the search
   // field and action chips sit on the Everlights dark-glass fill.
-  headerSearchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: night.radius.row,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    paddingHorizontal: 12,
-    paddingVertical: 5
-  },
-  headerSearchInput: {
-    flex: 1,
-    color: night.color.text,
-    fontSize: 13,
-    marginLeft: 6,
-    paddingVertical: 2
-  },
-  headerSearchClear: {
-    marginLeft: 6,
-    padding: 4
-  },
   menuCopyRow: {
     paddingHorizontal: 6
   },

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

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useState } from "react";
 import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { AlertCircle, AlertTriangle, DevToolsCard, EmptyState, FlaskConical, MethodBadge, Plus, Trash2, macOSColors, useLimit } from "@buoy-gg/shared-ui";
+import { AlertCircle, AlertTriangle, DevToolsCard, EmptyState, MethodBadge, Plus, Trash2, macOSColors, useLimit } from "@buoy-gg/shared-ui";
 import { useOverrideRules } from "../hooks/useOverrideRules";
 import { NetworkOverrideEditor } from "./NetworkOverrideEditor";
 import { overrideRulesStore } from "../overrides/overrideRulesStore";
@@ -361,8 +361,17 @@ function OverridesBody({
       })]
     }), !hasRules ? /*#__PURE__*/_jsx(View, {
       style: styles.emptyWrap,
-      children: /*#__PURE__*/_jsx(EmptyState, {
-        icon: FlaskConical,
+      children: /*#__PURE__*/_jsx(EmptyState
+      // Otto instead of the flask: nothing is faked yet, so he peers
+      // into an empty box. Truthful by construction — this branch only
+      // renders when the rule list is genuinely empty, and the master
+      // switch bar above is hidden in exactly that case.
+      , {
+        otto: "empty"
+        // 32 → pixelSize 2, the size the saved/list screens use, so the
+        // three network empties read as one family.
+        ,
+        iconSize: 32,
         title: "Nothing overridden"
         // Names the control that actually exists. This said "tap Force 500"
         // — a button from the deleted preset list, which sent anyone

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

@@ -19,7 +19,7 @@
 
 import { useState } from "react";
 import { FlatList, StyleSheet, Text, TextInput, View, TouchableOpacity } from "react-native";
-import { Bookmark, CopyButton, Search, macOSColors, useLimit } from "@buoy-gg/shared-ui";
+import { Bookmark, CopyButton, Search, macOSColors, useLimit, ToolEmptyState, resolveListEmptyState, EVENT_LIST_PRESET } from "@buoy-gg/shared-ui";
 import { NetworkEventItemCompact } from "./NetworkEventItemCompact";
 import { NetworkUpgradeBanner } from "./NetworkUpgradeBanner";
 import { generateNetworkCopyText } from "../utils/generateNetworkCopyText";
@@ -28,21 +28,6 @@ import { useNetworkSaved } from "../hooks/useNetworkSaved";
 import { MAX_SAVED } from "../utils/networkSavedStore";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const keyExtractor = item => item.id;
-function EmptyState() {
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.emptyState,
-    children: [/*#__PURE__*/_jsx(Bookmark, {
-      size: 32,
-      color: macOSColors.text.muted
-    }), /*#__PURE__*/_jsx(Text, {
-      style: styles.emptyTitle,
-      children: "No saved requests"
-    }), /*#__PURE__*/_jsx(Text, {
-      style: styles.emptyText,
-      children: "Open a request and tap the bookmark to keep it here \u2014 saved requests survive Clear and app restarts."
-    })]
-  });
-}
 export function NetworkSavedScreen({
   visible,
   isPro,
@@ -142,17 +127,31 @@ export function NetworkSavedScreen({
         autoCorrect: false,
         returnKeyType: "search"
       })]
-    }) : null, savedRecords.length === 0 ? /*#__PURE__*/_jsx(EmptyState, {}) : /*#__PURE__*/_jsx(FlatList, {
+    }) : null, savedRecords.length === 0 ||
+    // lockedCount > 0 falls through to the list so the upgrade banner (its
+    // ListFooterComponent) still renders — "0 shown, N locked" is an
+    // answer, not an empty screen.
+    search.trim().length > 0 && filtered.length === 0 && lockedCount === 0 ? /*#__PURE__*/_jsx(ToolEmptyState, {
+      testID: "buoy-network-saved-empty",
+      ...resolveListEmptyState({
+        subject: "saved requests",
+        verb: "kept",
+        search: savedRecords.length === 0 ? "" : search,
+        total: savedRecords.length,
+        waiting: {
+          otto: "empty",
+          title: "No saved requests",
+          message: "Open a request and tap the bookmark to keep it here — saved requests survive Clear and app restarts."
+        }
+      })
+    }) : /*#__PURE__*/_jsx(FlatList, {
       data: filtered,
       renderItem: renderItem,
       keyExtractor: keyExtractor,
       contentContainerStyle: styles.listContent,
       showsVerticalScrollIndicator: true,
-      removeClippedSubviews: true,
       scrollEnabled: true,
-      initialNumToRender: 12,
-      maxToRenderPerBatch: 8,
-      windowSize: 5,
+      ...EVENT_LIST_PRESET,
       extraData: pinnedLiveIds,
       "sentry-label": "ignore saved requests list",
       ListFooterComponent: renderListFooter
@@ -219,23 +218,5 @@ const styles = StyleSheet.create({
   },
   listContent: {
     paddingTop: 4
-  },
-  emptyState: {
-    alignItems: "center",
-    paddingVertical: 40,
-    paddingHorizontal: 24
-  },
-  emptyTitle: {
-    color: macOSColors.text.primary,
-    fontSize: 14,
-    fontWeight: "600",
-    marginTop: 12,
-    marginBottom: 6
-  },
-  emptyText: {
-    color: macOSColors.text.muted,
-    fontSize: 12,
-    textAlign: "center",
-    lineHeight: 17
   }
 });

package/lib/module/network/hooks/useNetworkEventList.js

@@ -74,9 +74,11 @@ export function useNetworkEventList(options) {
 
   // Derivations are plain useMemo over the subscribed array — linear
   // passes over ≤maxEvents items, recomputed only when inputs change.
-  const filteredEvents = useMemo(() => {
-    return filterNetworkEvents(applyIgnoredPatterns(events, ignoredPatterns), filter);
-  }, [events, ignoredPatterns, filter]);
+  // Split in two so the pre-filter count is observable: `totalEvents` below
+  // is the denominator the empty state needs, and recomputing it separately
+  // would mean a second pass over the same array.
+  const candidateEvents = useMemo(() => applyIgnoredPatterns(events, ignoredPatterns), [events, ignoredPatterns]);
+  const filteredEvents = useMemo(() => filterNetworkEvents(candidateEvents, filter), [candidateEvents, filter]);
 
   // Free tier: events beyond the limit in the ORIGINAL order are locked,
   // so locked events stay locked even when searching (ported verbatim).
@@ -96,6 +98,7 @@ export function useNetworkEventList(options) {
     events: filteredEvents,
     visibleEvents,
     hasLockedEvents: lockedEventCount > 0,
-    lockedEventCount
+    lockedEventCount,
+    totalEvents: candidateEvents.length
   };
 }

package/lib/module/network/sync/networkSyncAdapter.js

@@ -428,6 +428,14 @@ export const networkSyncAdapter = {
       const event = resolveEvent(id);
       if (!event) return null;
       return {
+        // Identity + the override mark ride along so a caller (Ask Buoy's
+        // receipt, an MCP session) can say WHOSE body this is and whether an
+        // override rule produced it — a mocked response rendered as "live"
+        // is the fabrication problem wearing a chrome suit.
+        url: event.url ?? null,
+        method: event.method ?? null,
+        status: event.status ?? null,
+        override: event.override ?? null,
         requestData: event.requestData ?? null,
         responseData: event.responseData ?? null,
         requestHeaders: event.requestHeaders ?? null,

package/lib/module/preset.js

@@ -17,7 +17,7 @@
  * ```
  */
 
-import { NetworkIcon } from "@buoy-gg/shared-ui";
+import { NetworkIcon, createToolFactory, defineToolPreset } from "@buoy-gg/shared-ui";
 import { NetworkModal } from "./network/components/NetworkModal";
 import { overrideRulesStore } from "./network/overrides/overrideRulesStore";
 import { networkEventStore } from "./network/utils/networkEventStore";
@@ -63,7 +63,7 @@ if (isReactNativeRuntime && typeof __DEV__ !== "undefined" && __DEV__) {
  * - Filter by status, method, URL
  * - Timing information
  */
-export const networkToolPreset = {
+export const networkToolPreset = defineToolPreset({
   id: "network",
   name: "NET",
   description: "Network request logger",
@@ -77,7 +77,7 @@ export const networkToolPreset = {
   props: {
     enableSharedModalDimensions: false
   }
-};
+});
 
 /**
  * Create a custom network monitoring tool configuration.
@@ -94,20 +94,6 @@ export const networkToolPreset = {
  * });
  * ```
  */
-export function createNetworkTool(options) {
-  return {
-    id: options?.id || "network",
-    name: options?.name || "NET",
-    description: options?.description || "Network request logger",
-    slot: "both",
-    icon: ({
-      size
-    }) => /*#__PURE__*/_jsx(NetworkIcon, {
-      size: size
-    }),
-    component: NetworkModal,
-    props: {
-      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
-    }
-  };
-}
+export const createNetworkTool = createToolFactory(networkToolPreset, options => ({
+  enableSharedModalDimensions: options.enableSharedModalDimensions ?? false
+}));

package/lib/typescript/index.d.ts

@@ -13,7 +13,7 @@ export type { NetworkToolViewProps } from "./network/components/NetworkModal";
 export { NetworkEventDetailView } from "./network/components/NetworkEventDetailView";
 export { NetworkEventItemCompact } from "./network/components/NetworkEventItemCompact";
 export { NetworkSavedScreen } from "./network/components/NetworkSavedScreen";
-export { NetworkSavedButton, NetworkDetailPinActions, } from "./network/components/NetworkHeaderLive";
+export { NetworkSavedButton, NetworkDetailPinActions, NetworkHeaderBadgesView, } from "./network/components/NetworkHeaderLive";
 export { useNetworkEvents } from "./network/hooks/useNetworkEvents";
 export { useNetworkEventList } from "./network/hooks/useNetworkEventList";
 export { useLiveNetworkEvent } from "./network/hooks/useLiveNetworkEvent";

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAKH,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAOhE,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAClF,YAAY,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AACvF,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,EACL,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,wCAAwC,CAAC;AAKhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAIpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAI9E,OAAO,EACL,eAAe,EACf,KAAK,qBAAqB,GAC3B,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAIhF,OAAO,EACL,qBAAqB,EACrB,iBAAiB,EACjB,KAAK,qBAAqB,GAC3B,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAKtF,OAAO,EACL,WAAW,EACX,cAAc,EACd,gBAAgB,GACjB,MAAM,4BAA4B,CAAC;AAKpC,YAAY,EACV,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,uBAAuB,GACxB,MAAM,iBAAiB,CAAC;AAQzB,OAAO,EACL,kBAAkB,EAClB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB;AACtB;;;GAGG;AACH,KAAK,mBAAmB,GACzB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EACL,SAAS,IAAI,kBAAkB,EAC/B,oBAAoB,IAAI,wBAAwB,EAChD,UAAU,IAAI,mBAAmB,EACjC,UAAU,IAAI,mBAAmB,EACjC,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,GACzB,MAAM,2BAA2B,CAAC;AAQnC,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,wBAAwB,EACxB,YAAY,GACb,MAAM,oBAAoB,CAAC;AAK5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,EACL,2BAA2B,EAC3B,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,GACzB,MAAM,oCAAoC,CAAC;AAO5C,gBAAgB;AAChB,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE;;;GAGG;AACH,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,UAAU,EACV,SAAS,EACT,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,GACvB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,gBAAgB;AAChB,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,yBAAyB,GAC1B,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAKH,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAOhE,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAClF,YAAY,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AACvF,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,GACxB,MAAM,wCAAwC,CAAC;AAKhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAIpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAI9E,OAAO,EACL,eAAe,EACf,KAAK,qBAAqB,GAC3B,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAIhF,OAAO,EACL,qBAAqB,EACrB,iBAAiB,EACjB,KAAK,qBAAqB,GAC3B,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAKtF,OAAO,EACL,WAAW,EACX,cAAc,EACd,gBAAgB,GACjB,MAAM,4BAA4B,CAAC;AAKpC,YAAY,EACV,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,uBAAuB,GACxB,MAAM,iBAAiB,CAAC;AAQzB,OAAO,EACL,kBAAkB,EAClB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB;AACtB;;;GAGG;AACH,KAAK,mBAAmB,GACzB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EACL,SAAS,IAAI,kBAAkB,EAC/B,oBAAoB,IAAI,wBAAwB,EAChD,UAAU,IAAI,mBAAmB,EACjC,UAAU,IAAI,mBAAmB,EACjC,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,GACzB,MAAM,2BAA2B,CAAC;AAQnC,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,wBAAwB,EACxB,YAAY,GACb,MAAM,oBAAoB,CAAC;AAK5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,EACL,2BAA2B,EAC3B,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,GACzB,MAAM,oCAAoC,CAAC;AAO5C,gBAAgB;AAChB,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE;;;GAGG;AACH,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,UAAU,EACV,SAAS,EACT,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,GACvB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,gBAAgB;AAChB,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,yBAAyB,GAC1B,MAAM,iCAAiC,CAAC"}