@buoy-gg/network 3.0.1 → 4.0.1

package/lib/commonjs/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "NetworkBodyResolverProvider", {
+  enumerable: true,
+  get: function () {
+    return _networkBodyResolver.NetworkBodyResolverProvider;
+  }
+});
 Object.defineProperty(exports, "NetworkEventDetailView", {
   enumerable: true,
   get: function () {
@@ -57,6 +63,18 @@ Object.defineProperty(exports, "formatHttpStatus", {
     return _formatting.formatHttpStatus;
   }
 });
+Object.defineProperty(exports, "ignoredPatternsStore", {
+  enumerable: true,
+  get: function () {
+    return _sharedUi.ignoredPatternsStore;
+  }
+});
+Object.defineProperty(exports, "isUrlIgnored", {
+  enumerable: true,
+  get: function () {
+    return _sharedUi.isUrlIgnored;
+  }
+});
 Object.defineProperty(exports, "networkEventStore", {
   enumerable: true,
   get: function () {
@@ -69,6 +87,12 @@ Object.defineProperty(exports, "networkListener", {
     return _networkListener.networkListener;
   }
 });
+Object.defineProperty(exports, "networkSyncAdapter", {
+  enumerable: true,
+  get: function () {
+    return _networkSyncAdapter.networkSyncAdapter;
+  }
+});
 Object.defineProperty(exports, "networkToolPreset", {
   enumerable: true,
   get: function () {
@@ -81,6 +105,18 @@ Object.defineProperty(exports, "removeAllNetworkListeners", {
     return _networkListener.removeAllNetworkListeners;
   }
 });
+Object.defineProperty(exports, "urlMatchesIgnoredPattern", {
+  enumerable: true,
+  get: function () {
+    return _sharedUi.urlMatchesIgnoredPattern;
+  }
+});
+Object.defineProperty(exports, "useIgnoredPatterns", {
+  enumerable: true,
+  get: function () {
+    return _sharedUi.useIgnoredPatterns;
+  }
+});
 Object.defineProperty(exports, "useNetworkEvents", {
   enumerable: true,
   get: function () {
@@ -100,5 +136,8 @@ var _NetworkEventItemCompact = require("./network/components/NetworkEventItemCom
 var _useNetworkEvents = require("./network/hooks/useNetworkEvents");
 var _useTickEveryMinute = require("./network/hooks/useTickEveryMinute");
 var _formatting = require("./network/utils/formatting");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _networkSyncAdapter = require("./network/sync/networkSyncAdapter");
+var _networkBodyResolver = require("./network/sync/networkBodyResolver");
 var _networkEventStore = require("./network/utils/networkEventStore");
 var _networkListener = require("./network/utils/networkListener");

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

@@ -10,6 +10,7 @@ var _sharedUi = require("@buoy-gg/shared-ui");
 var _formatting = require("../utils/formatting");
 var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
 var _formatGraphQLVariables = require("../utils/formatGraphQLVariables");
+var _networkBodyResolver = require("../sync/networkBodyResolver");
 var _jsxRuntime = require("react/jsx-runtime");
 // Component for collapsible sections matching Sentry style
 const CollapsibleSection = ({
@@ -189,6 +190,37 @@ function NetworkEventDetailView({
     }
   }, [showUpgradeModal, isPro]);
 
+  // Large bodies are omitted from synced snapshots (see networkSyncAdapter) and
+  // fetched on demand through the resolver. On the device there is no resolver
+  // and bodies are always inline, so this is a no-op there.
+  const resolveBody = (0, _networkBodyResolver.useNetworkBodyResolver)();
+  const requestBodyOmitted = event.requestData === undefined && (event.requestSize ?? 0) > 0;
+  const responseBodyOmitted = event.responseData === undefined && (event.responseSize ?? 0) > 0;
+  const [resolvedBody, setResolvedBody] = (0, _react.useState)(null);
+  const [isLoadingBody, setIsLoadingBody] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    setResolvedBody(null);
+    if (!resolveBody || !requestBodyOmitted && !responseBodyOmitted) {
+      setIsLoadingBody(false);
+      return;
+    }
+    let cancelled = false;
+    setIsLoadingBody(true);
+    resolveBody(event.id).then(body => {
+      if (!cancelled) setResolvedBody(body);
+    }).catch(() => {}).finally(() => {
+      if (!cancelled) setIsLoadingBody(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [event.id, resolveBody, requestBodyOmitted, responseBodyOmitted]);
+
+  // Effective bodies: inline data when present, otherwise the lazily resolved
+  // body. `null`/`undefined` both collapse to undefined ("no body").
+  const requestData = event.requestData ?? resolvedBody?.requestData ?? undefined;
+  const responseData = event.responseData ?? resolvedBody?.responseData ?? undefined;
+
   // Generate full request details for copying
   const getFullRequestDetails = () => {
     const requestDetails = {
@@ -199,9 +231,9 @@ function NetworkEventDetailView({
       timestamp: new Date(event.timestamp).toISOString(),
       duration: event.duration ? `${event.duration}ms` : "N/A",
       requestHeaders: event.requestHeaders,
-      requestData: event.requestData,
+      requestData,
       responseHeaders: event.responseHeaders,
-      responseData: event.responseData,
+      responseData,
       requestSize: event.requestSize ? (0, _formatting.formatBytes)(event.requestSize) : "N/A",
       responseSize: event.responseSize ? (0, _formatting.formatBytes)(event.responseSize) : "N/A",
       error: event.error,
@@ -298,7 +330,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(UrlBreakdown, {
           url: event.url,
-          requestData: event.requestData,
+          requestData: requestData,
           operationName: event.operationName,
           graphqlVariables: event.graphqlVariables,
           requestClient: event.requestClient,
@@ -401,7 +433,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
           style: styles.emptyText,
           children: "No response headers yet"
         })
-      }), event.requestData ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleSection, {
+      }), requestData !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleSection, {
         title: "Request Body",
         icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FileJson, {
           size: 14,
@@ -412,14 +444,25 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
           style: styles.dataViewerContainer,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
             title: "",
-            data: event.requestData,
+            data: requestData,
             showTypeFilter: true,
             rawMode: true,
             initialExpanded: true,
             disableCopy: !isPro
           })
         })
-      }) : null, event.responseData ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleSection, {
+      }) : requestBodyOmitted ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleSection, {
+        title: "Request Body",
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FileJson, {
+          size: 14,
+          color: _sharedUi.macOSColors.semantic.info
+        }),
+        defaultOpen: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.emptyText,
+          children: isLoadingBody ? `Loading request body (${(0, _formatting.formatBytes)(event.requestSize ?? 0)})…` : "Request body unavailable"
+        })
+      }) : null, responseData !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleSection, {
         title: "Response Body",
         icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FileJson, {
           size: 14,
@@ -430,13 +473,24 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
           style: styles.dataViewerContainer,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
             title: "",
-            data: event.responseData,
+            data: responseData,
             showTypeFilter: true,
             rawMode: true,
             initialExpanded: true,
             disableCopy: !isPro
           })
         })
+      }) : responseBodyOmitted ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleSection, {
+        title: "Response Body",
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FileJson, {
+          size: 14,
+          color: _sharedUi.macOSColors.semantic.success
+        }),
+        defaultOpen: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.emptyText,
+          children: isLoadingBody ? `Loading response body (${(0, _formatting.formatBytes)(event.responseSize ?? 0)})…` : "Response body unavailable"
+        })
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleSection, {
         title: "Filter Options",
         icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {

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

@@ -159,7 +159,7 @@ const NetworkEventItemCompact = exports.NetworkEventItemCompact = /*#__PURE__*/(
         event: event,
         isPending: isPending,
         statusColor: statusColor
-      }), event.requestClient && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      }), event.requestClient ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [styles.topRightBadge, {
           backgroundColor: event.requestClient === "fetch" ? "rgba(74, 144, 226, 0.15)" : event.requestClient === "graphql" ? "rgba(229, 53, 171, 0.15)" : event.requestClient === "grpc-web" ? "rgba(16, 185, 129, 0.15)" : event.requestClient === "xhr" ? "rgba(245, 158, 11, 0.15)" : "rgba(147, 51, 234, 0.15)"
         }],
@@ -169,7 +169,7 @@ const NetworkEventItemCompact = exports.NetworkEventItemCompact = /*#__PURE__*/(
           }],
           children: event.requestClient === "graphql" ? "GQL" : event.requestClient === "grpc-web" ? "gRPC" : event.requestClient === "xhr" ? "XHR" : event.requestClient
         })
-      })]
+      }) : null]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.leftSection,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.MethodBadge, {

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

@@ -15,33 +15,6 @@ var _NetworkCopySettingsView = require("./NetworkCopySettingsView");
 var _useNetworkEvents = require("../hooks/useNetworkEvents");
 var _formatting = require("../utils/formatting");
 var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Returns true when `url` matches the ignored `pattern` according to its mode.
- *
- * `contains` → case-insensitive substring on the full URL (legacy behavior).
- * `exact`    → smart equality: pattern starting with `/` compares URL.pathname,
- *              full URLs compare origin+pathname (ignoring query/hash), bare
- *              values compare URL.host. Falls back to literal equality if URL
- *              parsing fails (e.g. relative URLs).
- */function urlMatchesIgnoredPattern(url, pattern) {
-  const lowerUrl = url.toLowerCase();
-  const lowerValue = pattern.value.toLowerCase();
-  if (pattern.mode === "contains") {
-    return lowerUrl.includes(lowerValue);
-  }
-  try {
-    const parsed = new URL(url);
-    if (lowerValue.startsWith("/")) {
-      return parsed.pathname.toLowerCase() === lowerValue;
-    }
-    if (lowerValue.startsWith("http://") || lowerValue.startsWith("https://")) {
-      return `${parsed.origin}${parsed.pathname}`.toLowerCase() === lowerValue;
-    }
-    return parsed.host.toLowerCase() === lowerValue;
-  } catch {
-    return lowerUrl === lowerValue;
-  }
-}
 // Decompose by Responsibility: Extract empty state component
 function EmptyState({
   isEnabled
@@ -104,15 +77,20 @@ function NetworkModalInner({
   const [searchText, setSearchText] = (0, _react.useState)("");
   const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
   const searchInputRef = (0, _react.useRef)(null);
-  const [ignoredPatterns, setIgnoredPatterns] = (0, _react.useState)([
-  // Auto-hide Buoy license API requests by default
-  {
-    value: "api.keygen.sh",
-    mode: "contains"
-  }]);
+  // Ignored domains/URL patterns now live in a shared, persisted singleton store
+  // (@buoy-gg/shared-ui) so the Network tool and the Events tool stay in sync and
+  // share the exact same filter logic. The four handlers below are thin wrappers
+  // exposed by the hook; `values` is the derived Set used for presence checks.
+  const {
+    patterns: ignoredPatterns,
+    values: ignoredPatternValues,
+    add: addIgnoredPattern,
+    remove: removeIgnoredPattern,
+    toggle: toggleIgnoredPattern,
+    toggleMode: toggleIgnoredPatternMode
+  } = (0, _sharedUi.useIgnoredPatterns)();
   const [copySettings, setCopySettings] = (0, _react.useState)(_NetworkCopySettingsView.DEFAULT_COPY_SETTINGS);
   const flatListRef = (0, _react.useRef)(null);
-  const hasLoadedFilters = (0, _react.useRef)(false);
   const hasLoadedCopySettings = (0, _react.useRef)(false);
   const [showUpgradeModal, setShowUpgradeModal] = (0, _react.useState)(false);
 
@@ -123,62 +101,6 @@ function NetworkModalInner({
     }
   }, [showUpgradeModal, isPro]);
 
-  // Load persisted filters on mount
-  (0, _react.useEffect)(() => {
-    if (!visible || hasLoadedFilters.current) return;
-    const loadFilters = async () => {
-      try {
-        const storedPatterns = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.network.ignoredDomains());
-        if (storedPatterns) {
-          // Tolerate legacy string[] format — entries without a mode default to "contains".
-          const raw = JSON.parse(storedPatterns);
-          const migrated = [];
-          for (const entry of raw) {
-            if (typeof entry === "string" && entry.trim()) {
-              migrated.push({
-                value: entry,
-                mode: "contains"
-              });
-            } else if (entry && typeof entry === "object" && typeof entry.value === "string") {
-              const e = entry;
-              migrated.push({
-                value: e.value,
-                mode: e.mode === "exact" ? "exact" : "contains"
-              });
-            }
-          }
-          // Always ensure Buoy license API is hidden
-          if (!migrated.some(p => p.value === "api.keygen.sh")) {
-            migrated.push({
-              value: "api.keygen.sh",
-              mode: "contains"
-            });
-          }
-          setIgnoredPatterns(migrated);
-        }
-      } catch (_error) {
-        // Silently fail - filters will use defaults
-      } finally {
-        hasLoadedFilters.current = true;
-      }
-    };
-    loadFilters();
-  }, [visible]);
-
-  // Save filters when they change
-  (0, _react.useEffect)(() => {
-    if (!hasLoadedFilters.current) return; // Don't save on initial load
-
-    const saveFilters = async () => {
-      try {
-        await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.network.ignoredDomains(), JSON.stringify(ignoredPatterns));
-      } catch (_error) {
-        // Silently fail - filters will remain in memory
-      }
-    };
-    saveFilters();
-  }, [ignoredPatterns]);
-
   // Load persisted copy settings on mount
   (0, _react.useEffect)(() => {
     if (!visible || hasLoadedCopySettings.current) return;
@@ -234,49 +156,15 @@ function NetworkModalInner({
     }
   }, [isSearchActive]);
 
-  // Derived set of pattern values (for components that only care about presence).
-  const ignoredPatternValues = (0, _react.useMemo)(() => new Set(ignoredPatterns.map(p => p.value)), [ignoredPatterns]);
-
   // Filter events based on ignored patterns (mode-aware)
   const filteredEvents = (0, _react.useMemo)(() => {
     if (ignoredPatterns.length === 0) return events;
     return events.filter(event => {
-      const isFiltered = ignoredPatterns.some(pattern => urlMatchesIgnoredPattern(event.url, pattern));
+      const isFiltered = ignoredPatterns.some(pattern => (0, _sharedUi.urlMatchesIgnoredPattern)(event.url, pattern));
       return !isFiltered;
     });
   }, [events, ignoredPatterns]);
 
-  // Add or no-op (used by add-pattern UI and suggested-items taps)
-  const addIgnoredPattern = (0, _react.useCallback)(pattern => {
-    const value = pattern.value.trim();
-    if (!value) return;
-    setIgnoredPatterns(prev => prev.some(p => p.value === value) ? prev : [...prev, {
-      value,
-      mode: pattern.mode
-    }]);
-  }, []);
-
-  // Remove by value (used by the filter list X button and the detail view chips)
-  const removeIgnoredPattern = (0, _react.useCallback)(value => {
-    setIgnoredPatterns(prev => prev.filter(p => p.value !== value));
-  }, []);
-
-  // Toggle presence (used by the detail-view domain/url chips — adds as contains)
-  const toggleIgnoredPattern = (0, _react.useCallback)(value => {
-    setIgnoredPatterns(prev => prev.some(p => p.value === value) ? prev.filter(p => p.value !== value) : [...prev, {
-      value,
-      mode: "contains"
-    }]);
-  }, []);
-
-  // Flip an existing pattern's mode between contains <-> exact
-  const toggleIgnoredPatternMode = (0, _react.useCallback)(value => {
-    setIgnoredPatterns(prev => prev.map(p => p.value === value ? {
-      ...p,
-      mode: p.mode === "contains" ? "exact" : "contains"
-    } : p));
-  }, []);
-
   // Helper to check if payload should be included based on size
   const shouldIncludePayload = (0, _react.useCallback)(data => {
     if (copySettings.bodySizeThreshold === -1) return true;
@@ -417,7 +305,7 @@ function NetworkModalInner({
     let successful = 0;
     let failed = 0;
     let pending = 0;
-    const eventsForStats = ignoredPatterns.length === 0 ? allEvents : allEvents.filter(event => !ignoredPatterns.some(pattern => urlMatchesIgnoredPattern(event.url, pattern)));
+    const eventsForStats = ignoredPatterns.length === 0 ? allEvents : allEvents.filter(event => !ignoredPatterns.some(pattern => (0, _sharedUi.urlMatchesIgnoredPattern)(event.url, pattern)));
     for (const event of eventsForStats) {
       if (event.status && event.status >= 200 && event.status < 300) {
         successful++;

package/lib/commonjs/network/sync/networkBodyResolver.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NetworkBodyResolverProvider = NetworkBodyResolverProvider;
+exports.useNetworkBodyResolver = useNetworkBodyResolver;
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * The full request/response bodies for a single network event, fetched on
+ * demand. Either field may be `null` when the event genuinely has no body.
+ */
+
+/**
+ * Resolves request/response bodies that were omitted from a synced snapshot.
+ *
+ * Large bodies (see `networkSyncAdapter`) are stripped from the list snapshot
+ * so they aren't re-streamed every ~200ms; the detail view fetches them lazily
+ * through this resolver when a request is opened.
+ *
+ * On the device this is never provided — bodies are always inline — so the
+ * detail view simply falls back to the inline data. The desktop dashboard
+ * provides a resolver that fetches the body over the devtool protocol.
+ */
+
+const NetworkBodyResolverContext = /*#__PURE__*/(0, _react.createContext)(null);
+function NetworkBodyResolverProvider({
+  resolver,
+  children
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(NetworkBodyResolverContext.Provider, {
+    value: resolver,
+    children: children
+  });
+}
+function useNetworkBodyResolver() {
+  return (0, _react.useContext)(NetworkBodyResolverContext);
+}

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

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.networkSyncAdapter = exports.SNAPSHOT_BODY_INLINE_LIMIT = void 0;
+var _networkEventStore = require("../utils/networkEventStore");
+/**
+ * Request/response bodies larger than this (using the cached size proxy already
+ * on the event — no per-snapshot stringify) are NOT streamed in the list
+ * snapshot. These are the multi-MB payloads (images, large JSON list responses)
+ * that, re-sent every ~200ms for up to 500 events, freeze the desktop
+ * dashboard's main thread while it deserializes and re-renders them. Smaller
+ * bodies stay inline so the common case needs no round-trip (instant detail
+ * view, and they remain available to copy/export). Stripped bodies are fetched
+ * on demand via the `getEventBody` action when a request's detail view opens.
+ */
+const SNAPSHOT_BODY_INLINE_LIMIT = exports.SNAPSHOT_BODY_INLINE_LIMIT = 16 * 1024;
+const stripLargeBodies = event => {
+  const stripRequest = event.requestData !== undefined && (event.requestSize ?? 0) > SNAPSHOT_BODY_INLINE_LIMIT;
+  const stripResponse = event.responseData !== undefined && (event.responseSize ?? 0) > SNAPSHOT_BODY_INLINE_LIMIT;
+  if (!stripRequest && !stripResponse) return event;
+  // Keep sizes/headers/metadata; only drop the heavy data. `undefined` keys are
+  // omitted by JSON serialization, so this shrinks the wire payload, and the
+  // dashboard treats "data missing but size > 0" as "fetch on demand".
+  const stripped = {
+    ...event
+  };
+  if (stripRequest) stripped.requestData = undefined;
+  if (stripResponse) stripped.responseData = undefined;
+  return stripped;
+};
+
+/**
+ * Sync adapter for the network tool, consumed by @buoy-gg/external-sync's
+ * `useExternalSync` (structurally matches its ToolSyncAdapter interface so
+ * this package doesn't need a dependency on it).
+ *
+ * Subscribing starts the network interceptor, so requests are only captured
+ * while a dashboard is watching the network panel.
+ *
+ * v2: large bodies are stripped from the snapshot and fetched lazily via
+ * `getEventBody` (see SNAPSHOT_BODY_INLINE_LIMIT).
+ */
+const networkSyncAdapter = exports.networkSyncAdapter = {
+  version: 2,
+  getSnapshot: () => _networkEventStore.networkEventStore.getEvents().map(stripLargeBodies),
+  subscribe: onChange => _networkEventStore.networkEventStore.subscribeToEvents(onChange),
+  actions: {
+    clearEvents: () => {
+      _networkEventStore.networkEventStore.clearEvents();
+    },
+    /**
+     * Return the full (un-stripped) request/response bodies for one event,
+     * fetched on demand by the dashboard when its detail view opens. Returns
+     * null if the event is no longer in the store.
+     */
+    getEventBody: params => {
+      const id = params && typeof params === "object" ? params.id : undefined;
+      if (!id) return null;
+      const event = _networkEventStore.networkEventStore.getEventById(id);
+      if (!event) return null;
+      return {
+        requestData: event.requestData ?? null,
+        responseData: event.responseData ?? null
+      };
+    }
+  }
+};

package/lib/module/index.js

@@ -37,6 +37,20 @@ export { formatBytes, formatDuration, formatHttpStatus } from "./network/utils/f
 // TYPES (For TypeScript users)
 // =============================================================================
 
+// =============================================================================
+// SHARED IGNORED-PATTERN FILTERING
+// Re-exported from @buoy-gg/shared-ui so consumers wiring the Network detail
+// page into other tools (e.g. the Events tool) can share the exact same
+// ignored-domains/URL filter store + matching logic.
+// =============================================================================
+export { useIgnoredPatterns, ignoredPatternsStore, urlMatchesIgnoredPattern, isUrlIgnored } from "@buoy-gg/shared-ui";
+
+// =============================================================================
+// EXTERNAL SYNC (Adapter for @buoy-gg/external-sync's useExternalSync)
+// =============================================================================
+export { networkSyncAdapter } from "./network/sync/networkSyncAdapter";
+export { NetworkBodyResolverProvider } from "./network/sync/networkBodyResolver";
+
 // =============================================================================
 // INTERNAL EXPORTS (For @buoy-gg/* packages only - not part of public API)
 // These are re-exported for cross-package communication within the monorepo.

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

@@ -7,6 +7,7 @@ import { formatBytes, formatDuration, formatHttpStatus } from "../utils/formatti
 import { formatRelativeTime } from "@buoy-gg/shared-ui";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
 import { formatGraphQLDisplay } from "../utils/formatGraphQLVariables";
+import { useNetworkBodyResolver } from "../sync/networkBodyResolver";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Component for collapsible sections matching Sentry style
 const CollapsibleSection = ({
@@ -186,6 +187,37 @@ export function NetworkEventDetailView({
     }
   }, [showUpgradeModal, isPro]);
 
+  // Large bodies are omitted from synced snapshots (see networkSyncAdapter) and
+  // fetched on demand through the resolver. On the device there is no resolver
+  // and bodies are always inline, so this is a no-op there.
+  const resolveBody = useNetworkBodyResolver();
+  const requestBodyOmitted = event.requestData === undefined && (event.requestSize ?? 0) > 0;
+  const responseBodyOmitted = event.responseData === undefined && (event.responseSize ?? 0) > 0;
+  const [resolvedBody, setResolvedBody] = useState(null);
+  const [isLoadingBody, setIsLoadingBody] = useState(false);
+  useEffect(() => {
+    setResolvedBody(null);
+    if (!resolveBody || !requestBodyOmitted && !responseBodyOmitted) {
+      setIsLoadingBody(false);
+      return;
+    }
+    let cancelled = false;
+    setIsLoadingBody(true);
+    resolveBody(event.id).then(body => {
+      if (!cancelled) setResolvedBody(body);
+    }).catch(() => {}).finally(() => {
+      if (!cancelled) setIsLoadingBody(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [event.id, resolveBody, requestBodyOmitted, responseBodyOmitted]);
+
+  // Effective bodies: inline data when present, otherwise the lazily resolved
+  // body. `null`/`undefined` both collapse to undefined ("no body").
+  const requestData = event.requestData ?? resolvedBody?.requestData ?? undefined;
+  const responseData = event.responseData ?? resolvedBody?.responseData ?? undefined;
+
   // Generate full request details for copying
   const getFullRequestDetails = () => {
     const requestDetails = {
@@ -196,9 +228,9 @@ export function NetworkEventDetailView({
       timestamp: new Date(event.timestamp).toISOString(),
       duration: event.duration ? `${event.duration}ms` : "N/A",
       requestHeaders: event.requestHeaders,
-      requestData: event.requestData,
+      requestData,
       responseHeaders: event.responseHeaders,
-      responseData: event.responseData,
+      responseData,
       requestSize: event.requestSize ? formatBytes(event.requestSize) : "N/A",
       responseSize: event.responseSize ? formatBytes(event.responseSize) : "N/A",
       error: event.error,
@@ -295,7 +327,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
           })]
         }), /*#__PURE__*/_jsx(UrlBreakdown, {
           url: event.url,
-          requestData: event.requestData,
+          requestData: requestData,
           operationName: event.operationName,
           graphqlVariables: event.graphqlVariables,
           requestClient: event.requestClient,
@@ -398,7 +430,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
           style: styles.emptyText,
           children: "No response headers yet"
         })
-      }), event.requestData ? /*#__PURE__*/_jsx(CollapsibleSection, {
+      }), requestData !== undefined ? /*#__PURE__*/_jsx(CollapsibleSection, {
         title: "Request Body",
         icon: /*#__PURE__*/_jsx(FileJson, {
           size: 14,
@@ -409,14 +441,25 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
           style: styles.dataViewerContainer,
           children: /*#__PURE__*/_jsx(DataViewer, {
             title: "",
-            data: event.requestData,
+            data: requestData,
             showTypeFilter: true,
             rawMode: true,
             initialExpanded: true,
             disableCopy: !isPro
           })
         })
-      }) : null, event.responseData ? /*#__PURE__*/_jsx(CollapsibleSection, {
+      }) : requestBodyOmitted ? /*#__PURE__*/_jsx(CollapsibleSection, {
+        title: "Request Body",
+        icon: /*#__PURE__*/_jsx(FileJson, {
+          size: 14,
+          color: macOSColors.semantic.info
+        }),
+        defaultOpen: true,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.emptyText,
+          children: isLoadingBody ? `Loading request body (${formatBytes(event.requestSize ?? 0)})…` : "Request body unavailable"
+        })
+      }) : null, responseData !== undefined ? /*#__PURE__*/_jsx(CollapsibleSection, {
         title: "Response Body",
         icon: /*#__PURE__*/_jsx(FileJson, {
           size: 14,
@@ -427,13 +470,24 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
           style: styles.dataViewerContainer,
           children: /*#__PURE__*/_jsx(DataViewer, {
             title: "",
-            data: event.responseData,
+            data: responseData,
             showTypeFilter: true,
             rawMode: true,
             initialExpanded: true,
             disableCopy: !isPro
           })
         })
+      }) : responseBodyOmitted ? /*#__PURE__*/_jsx(CollapsibleSection, {
+        title: "Response Body",
+        icon: /*#__PURE__*/_jsx(FileJson, {
+          size: 14,
+          color: macOSColors.semantic.success
+        }),
+        defaultOpen: true,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.emptyText,
+          children: isLoadingBody ? `Loading response body (${formatBytes(event.responseSize ?? 0)})…` : "Response body unavailable"
+        })
       }) : null, /*#__PURE__*/_jsx(CollapsibleSection, {
         title: "Filter Options",
         icon: /*#__PURE__*/_jsx(Filter, {

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

@@ -156,7 +156,7 @@ export const NetworkEventItemCompact = /*#__PURE__*/memo(({
         event: event,
         isPending: isPending,
         statusColor: statusColor
-      }), event.requestClient && /*#__PURE__*/_jsx(View, {
+      }), event.requestClient ? /*#__PURE__*/_jsx(View, {
         style: [styles.topRightBadge, {
           backgroundColor: event.requestClient === "fetch" ? "rgba(74, 144, 226, 0.15)" : event.requestClient === "graphql" ? "rgba(229, 53, 171, 0.15)" : event.requestClient === "grpc-web" ? "rgba(16, 185, 129, 0.15)" : event.requestClient === "xhr" ? "rgba(245, 158, 11, 0.15)" : "rgba(147, 51, 234, 0.15)"
         }],
@@ -166,7 +166,7 @@ export const NetworkEventItemCompact = /*#__PURE__*/memo(({
           }],
           children: event.requestClient === "graphql" ? "GQL" : event.requestClient === "grpc-web" ? "gRPC" : event.requestClient === "xhr" ? "XHR" : event.requestClient
         })
-      })]
+      }) : null]
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.leftSection,
       children: [/*#__PURE__*/_jsx(MethodBadge, {

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

@@ -2,7 +2,7 @@
 
 import { useState, useRef, useMemo, useCallback, useEffect } from "react";
 import { View, Text, StyleSheet, TouchableOpacity, TextInput, FlatList } from "react-native";
-import { Globe, Trash2, Power, Search, Filter, CheckCircle, XCircle, Clock, X, Copy, JsModal, ModalHeader, devToolsStorageKeys, macOSColors, persistentStorage, CopyButton, TabSelector, useFeatureGate, UpgradeModal, ProBadge, Zap, PowerToggleButton } from "@buoy-gg/shared-ui";
+import { Globe, Trash2, Power, Search, Filter, CheckCircle, XCircle, Clock, X, Copy, JsModal, ModalHeader, devToolsStorageKeys, macOSColors, persistentStorage, CopyButton, TabSelector, useFeatureGate, UpgradeModal, ProBadge, Zap, PowerToggleButton, useIgnoredPatterns, urlMatchesIgnoredPattern } from "@buoy-gg/shared-ui";
 import { NetworkEventItemCompact } from "./NetworkEventItemCompact";
 import { NetworkFilterViewV3 } from "./NetworkFilterViewV3";
 import { TickProvider } from "../hooks/useTickEveryMinute";
@@ -10,36 +10,7 @@ import { NetworkEventDetailView } from "./NetworkEventDetailView";
 import { NetworkCopySettingsView, DEFAULT_COPY_SETTINGS } from "./NetworkCopySettingsView";
 import { useNetworkEvents } from "../hooks/useNetworkEvents";
 import { formatBytes } from "../utils/formatting";
-
-/**
- * Returns true when `url` matches the ignored `pattern` according to its mode.
- *
- * `contains` → case-insensitive substring on the full URL (legacy behavior).
- * `exact`    → smart equality: pattern starting with `/` compares URL.pathname,
- *              full URLs compare origin+pathname (ignoring query/hash), bare
- *              values compare URL.host. Falls back to literal equality if URL
- *              parsing fails (e.g. relative URLs).
- */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function urlMatchesIgnoredPattern(url, pattern) {
-  const lowerUrl = url.toLowerCase();
-  const lowerValue = pattern.value.toLowerCase();
-  if (pattern.mode === "contains") {
-    return lowerUrl.includes(lowerValue);
-  }
-  try {
-    const parsed = new URL(url);
-    if (lowerValue.startsWith("/")) {
-      return parsed.pathname.toLowerCase() === lowerValue;
-    }
-    if (lowerValue.startsWith("http://") || lowerValue.startsWith("https://")) {
-      return `${parsed.origin}${parsed.pathname}`.toLowerCase() === lowerValue;
-    }
-    return parsed.host.toLowerCase() === lowerValue;
-  } catch {
-    return lowerUrl === lowerValue;
-  }
-}
 // Decompose by Responsibility: Extract empty state component
 function EmptyState({
   isEnabled
@@ -102,15 +73,20 @@ function NetworkModalInner({
   const [searchText, setSearchText] = useState("");
   const [isSearchActive, setIsSearchActive] = useState(false);
   const searchInputRef = useRef(null);
-  const [ignoredPatterns, setIgnoredPatterns] = useState([
-  // Auto-hide Buoy license API requests by default
-  {
-    value: "api.keygen.sh",
-    mode: "contains"
-  }]);
+  // Ignored domains/URL patterns now live in a shared, persisted singleton store
+  // (@buoy-gg/shared-ui) so the Network tool and the Events tool stay in sync and
+  // share the exact same filter logic. The four handlers below are thin wrappers
+  // exposed by the hook; `values` is the derived Set used for presence checks.
+  const {
+    patterns: ignoredPatterns,
+    values: ignoredPatternValues,
+    add: addIgnoredPattern,
+    remove: removeIgnoredPattern,
+    toggle: toggleIgnoredPattern,
+    toggleMode: toggleIgnoredPatternMode
+  } = useIgnoredPatterns();
   const [copySettings, setCopySettings] = useState(DEFAULT_COPY_SETTINGS);
   const flatListRef = useRef(null);
-  const hasLoadedFilters = useRef(false);
   const hasLoadedCopySettings = useRef(false);
   const [showUpgradeModal, setShowUpgradeModal] = useState(false);
 
@@ -121,62 +97,6 @@ function NetworkModalInner({
     }
   }, [showUpgradeModal, isPro]);
 
-  // Load persisted filters on mount
-  useEffect(() => {
-    if (!visible || hasLoadedFilters.current) return;
-    const loadFilters = async () => {
-      try {
-        const storedPatterns = await persistentStorage.getItem(devToolsStorageKeys.network.ignoredDomains());
-        if (storedPatterns) {
-          // Tolerate legacy string[] format — entries without a mode default to "contains".
-          const raw = JSON.parse(storedPatterns);
-          const migrated = [];
-          for (const entry of raw) {
-            if (typeof entry === "string" && entry.trim()) {
-              migrated.push({
-                value: entry,
-                mode: "contains"
-              });
-            } else if (entry && typeof entry === "object" && typeof entry.value === "string") {
-              const e = entry;
-              migrated.push({
-                value: e.value,
-                mode: e.mode === "exact" ? "exact" : "contains"
-              });
-            }
-          }
-          // Always ensure Buoy license API is hidden
-          if (!migrated.some(p => p.value === "api.keygen.sh")) {
-            migrated.push({
-              value: "api.keygen.sh",
-              mode: "contains"
-            });
-          }
-          setIgnoredPatterns(migrated);
-        }
-      } catch (_error) {
-        // Silently fail - filters will use defaults
-      } finally {
-        hasLoadedFilters.current = true;
-      }
-    };
-    loadFilters();
-  }, [visible]);
-
-  // Save filters when they change
-  useEffect(() => {
-    if (!hasLoadedFilters.current) return; // Don't save on initial load
-
-    const saveFilters = async () => {
-      try {
-        await persistentStorage.setItem(devToolsStorageKeys.network.ignoredDomains(), JSON.stringify(ignoredPatterns));
-      } catch (_error) {
-        // Silently fail - filters will remain in memory
-      }
-    };
-    saveFilters();
-  }, [ignoredPatterns]);
-
   // Load persisted copy settings on mount
   useEffect(() => {
     if (!visible || hasLoadedCopySettings.current) return;
@@ -232,9 +152,6 @@ function NetworkModalInner({
     }
   }, [isSearchActive]);
 
-  // Derived set of pattern values (for components that only care about presence).
-  const ignoredPatternValues = useMemo(() => new Set(ignoredPatterns.map(p => p.value)), [ignoredPatterns]);
-
   // Filter events based on ignored patterns (mode-aware)
   const filteredEvents = useMemo(() => {
     if (ignoredPatterns.length === 0) return events;
@@ -244,37 +161,6 @@ function NetworkModalInner({
     });
   }, [events, ignoredPatterns]);
 
-  // Add or no-op (used by add-pattern UI and suggested-items taps)
-  const addIgnoredPattern = useCallback(pattern => {
-    const value = pattern.value.trim();
-    if (!value) return;
-    setIgnoredPatterns(prev => prev.some(p => p.value === value) ? prev : [...prev, {
-      value,
-      mode: pattern.mode
-    }]);
-  }, []);
-
-  // Remove by value (used by the filter list X button and the detail view chips)
-  const removeIgnoredPattern = useCallback(value => {
-    setIgnoredPatterns(prev => prev.filter(p => p.value !== value));
-  }, []);
-
-  // Toggle presence (used by the detail-view domain/url chips — adds as contains)
-  const toggleIgnoredPattern = useCallback(value => {
-    setIgnoredPatterns(prev => prev.some(p => p.value === value) ? prev.filter(p => p.value !== value) : [...prev, {
-      value,
-      mode: "contains"
-    }]);
-  }, []);
-
-  // Flip an existing pattern's mode between contains <-> exact
-  const toggleIgnoredPatternMode = useCallback(value => {
-    setIgnoredPatterns(prev => prev.map(p => p.value === value ? {
-      ...p,
-      mode: p.mode === "contains" ? "exact" : "contains"
-    } : p));
-  }, []);
-
   // Helper to check if payload should be included based on size
   const shouldIncludePayload = useCallback(data => {
     if (copySettings.bodySizeThreshold === -1) return true;

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

@@ -0,0 +1,34 @@
+"use strict";
+
+import { createContext, useContext } from "react";
+
+/**
+ * The full request/response bodies for a single network event, fetched on
+ * demand. Either field may be `null` when the event genuinely has no body.
+ */
+
+/**
+ * Resolves request/response bodies that were omitted from a synced snapshot.
+ *
+ * Large bodies (see `networkSyncAdapter`) are stripped from the list snapshot
+ * so they aren't re-streamed every ~200ms; the detail view fetches them lazily
+ * through this resolver when a request is opened.
+ *
+ * On the device this is never provided — bodies are always inline — so the
+ * detail view simply falls back to the inline data. The desktop dashboard
+ * provides a resolver that fetches the body over the devtool protocol.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const NetworkBodyResolverContext = /*#__PURE__*/createContext(null);
+export function NetworkBodyResolverProvider({
+  resolver,
+  children
+}) {
+  return /*#__PURE__*/_jsx(NetworkBodyResolverContext.Provider, {
+    value: resolver,
+    children: children
+  });
+}
+export function useNetworkBodyResolver() {
+  return useContext(NetworkBodyResolverContext);
+}

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

@@ -0,0 +1,65 @@
+"use strict";
+
+import { networkEventStore } from "../utils/networkEventStore";
+/**
+ * Request/response bodies larger than this (using the cached size proxy already
+ * on the event — no per-snapshot stringify) are NOT streamed in the list
+ * snapshot. These are the multi-MB payloads (images, large JSON list responses)
+ * that, re-sent every ~200ms for up to 500 events, freeze the desktop
+ * dashboard's main thread while it deserializes and re-renders them. Smaller
+ * bodies stay inline so the common case needs no round-trip (instant detail
+ * view, and they remain available to copy/export). Stripped bodies are fetched
+ * on demand via the `getEventBody` action when a request's detail view opens.
+ */
+export const SNAPSHOT_BODY_INLINE_LIMIT = 16 * 1024;
+const stripLargeBodies = event => {
+  const stripRequest = event.requestData !== undefined && (event.requestSize ?? 0) > SNAPSHOT_BODY_INLINE_LIMIT;
+  const stripResponse = event.responseData !== undefined && (event.responseSize ?? 0) > SNAPSHOT_BODY_INLINE_LIMIT;
+  if (!stripRequest && !stripResponse) return event;
+  // Keep sizes/headers/metadata; only drop the heavy data. `undefined` keys are
+  // omitted by JSON serialization, so this shrinks the wire payload, and the
+  // dashboard treats "data missing but size > 0" as "fetch on demand".
+  const stripped = {
+    ...event
+  };
+  if (stripRequest) stripped.requestData = undefined;
+  if (stripResponse) stripped.responseData = undefined;
+  return stripped;
+};
+
+/**
+ * Sync adapter for the network tool, consumed by @buoy-gg/external-sync's
+ * `useExternalSync` (structurally matches its ToolSyncAdapter interface so
+ * this package doesn't need a dependency on it).
+ *
+ * Subscribing starts the network interceptor, so requests are only captured
+ * while a dashboard is watching the network panel.
+ *
+ * v2: large bodies are stripped from the snapshot and fetched lazily via
+ * `getEventBody` (see SNAPSHOT_BODY_INLINE_LIMIT).
+ */
+export const networkSyncAdapter = {
+  version: 2,
+  getSnapshot: () => networkEventStore.getEvents().map(stripLargeBodies),
+  subscribe: onChange => networkEventStore.subscribeToEvents(onChange),
+  actions: {
+    clearEvents: () => {
+      networkEventStore.clearEvents();
+    },
+    /**
+     * Return the full (un-stripped) request/response bodies for one event,
+     * fetched on demand by the dashboard when its detail view opens. Returns
+     * null if the event is no longer in the store.
+     */
+    getEventBody: params => {
+      const id = params && typeof params === "object" ? params.id : undefined;
+      if (!id) return null;
+      const event = networkEventStore.getEventById(id);
+      if (!event) return null;
+      return {
+        requestData: event.requestData ?? null,
+        responseData: event.responseData ?? null
+      };
+    }
+  }
+};

package/lib/typescript/index.d.ts

@@ -14,7 +14,10 @@ export { NetworkEventItemCompact } from "./network/components/NetworkEventItemCo
 export { useNetworkEvents } from "./network/hooks/useNetworkEvents";
 export { TickProvider, useTickEveryMinute } from "./network/hooks/useTickEveryMinute";
 export { formatBytes, formatDuration, formatHttpStatus, } from "./network/utils/formatting";
-export type { NetworkEvent, NetworkStats, NetworkFilter, NetworkEventStatus, NetworkInsight, } from "./network/types";
+export type { NetworkEvent, NetworkStats, NetworkFilter, NetworkEventStatus, NetworkInsight, IgnoredPattern, IgnoredPatternMatchMode, } from "./network/types";
+export { useIgnoredPatterns, ignoredPatternsStore, urlMatchesIgnoredPattern, isUrlIgnored, } from "@buoy-gg/shared-ui";
+export { networkSyncAdapter } from "./network/sync/networkSyncAdapter";
+export { NetworkBodyResolverProvider, type NetworkBodyResolver, type ResolvedNetworkBody, } from "./network/sync/networkBodyResolver";
 /** @internal */
 export { networkEventStore } from "./network/utils/networkEventStore";
 /** @internal */

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;AAKhE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AAKvF,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,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,GACf,MAAM,iBAAiB,CAAC;AAOzB,gBAAgB;AAChB,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,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;AAKhE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AAKvF,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,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,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,gBAAgB;AAChB,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,yBAAyB,GAC1B,MAAM,iCAAiC,CAAC"}

package/lib/typescript/network/components/NetworkEventDetailView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkEventDetailView.d.ts","sourceRoot":"","sources":["../../../../src/network/components/NetworkEventDetailView.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAU7C,UAAU,2BAA2B;IACnC,KAAK,EAAE,YAAY,CAAC;IACpB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC9B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAqKD;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,eAA2B,EAC3B,eAA0B,GAC3B,EAAE,2BAA2B,+BAkZ7B"}
+{"version":3,"file":"NetworkEventDetailView.d.ts","sourceRoot":"","sources":["../../../../src/network/components/NetworkEventDetailView.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAc7C,UAAU,2BAA2B;IACnC,KAAK,EAAE,YAAY,CAAC;IACpB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC9B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAqKD;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,eAA2B,EAC3B,eAA0B,GAC3B,EAAE,2BAA2B,+BAmd7B"}

package/lib/typescript/network/components/NetworkModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkModal.d.ts","sourceRoot":"","sources":["../../../../src/network/components/NetworkModal.tsx"],"names":[],"mappings":"AA2EA,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAslCD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAMpD"}
+{"version":3,"file":"NetworkModal.d.ts","sourceRoot":"","sources":["../../../../src/network/components/NetworkModal.tsx"],"names":[],"mappings":"AA8CA,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAu/BD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAMpD"}

package/lib/typescript/network/sync/networkBodyResolver.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+/**
+ * The full request/response bodies for a single network event, fetched on
+ * demand. Either field may be `null` when the event genuinely has no body.
+ */
+export interface ResolvedNetworkBody {
+    requestData?: unknown;
+    responseData?: unknown;
+}
+/**
+ * Resolves request/response bodies that were omitted from a synced snapshot.
+ *
+ * Large bodies (see `networkSyncAdapter`) are stripped from the list snapshot
+ * so they aren't re-streamed every ~200ms; the detail view fetches them lazily
+ * through this resolver when a request is opened.
+ *
+ * On the device this is never provided — bodies are always inline — so the
+ * detail view simply falls back to the inline data. The desktop dashboard
+ * provides a resolver that fetches the body over the devtool protocol.
+ */
+export type NetworkBodyResolver = (id: string) => Promise<ResolvedNetworkBody | null>;
+export declare function NetworkBodyResolverProvider({ resolver, children, }: {
+    resolver: NetworkBodyResolver | null;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useNetworkBodyResolver(): NetworkBodyResolver | null;
+//# sourceMappingURL=networkBodyResolver.d.ts.map

package/lib/typescript/network/sync/networkBodyResolver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"networkBodyResolver.d.ts","sourceRoot":"","sources":["../../../../src/network/sync/networkBodyResolver.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;;;;;;GAUG;AACH,MAAM,MAAM,mBAAmB,GAAG,CAChC,EAAE,EAAE,MAAM,KACP,OAAO,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;AAMzC,wBAAgB,2BAA2B,CAAC,EAC1C,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACrC,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAMA;AAED,wBAAgB,sBAAsB,IAAI,mBAAmB,GAAG,IAAI,CAEnE"}

package/lib/typescript/network/sync/networkSyncAdapter.d.ts

@@ -0,0 +1,41 @@
+import type { NetworkEvent } from "../types";
+/**
+ * Request/response bodies larger than this (using the cached size proxy already
+ * on the event — no per-snapshot stringify) are NOT streamed in the list
+ * snapshot. These are the multi-MB payloads (images, large JSON list responses)
+ * that, re-sent every ~200ms for up to 500 events, freeze the desktop
+ * dashboard's main thread while it deserializes and re-renders them. Smaller
+ * bodies stay inline so the common case needs no round-trip (instant detail
+ * view, and they remain available to copy/export). Stripped bodies are fetched
+ * on demand via the `getEventBody` action when a request's detail view opens.
+ */
+export declare const SNAPSHOT_BODY_INLINE_LIMIT: number;
+/**
+ * Sync adapter for the network tool, consumed by @buoy-gg/external-sync's
+ * `useExternalSync` (structurally matches its ToolSyncAdapter interface so
+ * this package doesn't need a dependency on it).
+ *
+ * Subscribing starts the network interceptor, so requests are only captured
+ * while a dashboard is watching the network panel.
+ *
+ * v2: large bodies are stripped from the snapshot and fetched lazily via
+ * `getEventBody` (see SNAPSHOT_BODY_INLINE_LIMIT).
+ */
+export declare const networkSyncAdapter: {
+    version: number;
+    getSnapshot: () => NetworkEvent[];
+    subscribe: (onChange: () => void) => () => void;
+    actions: {
+        clearEvents: () => void;
+        /**
+         * Return the full (un-stripped) request/response bodies for one event,
+         * fetched on demand by the dashboard when its detail view opens. Returns
+         * null if the event is no longer in the store.
+         */
+        getEventBody: (params: unknown) => {
+            requestData: {} | null;
+            responseData: {} | null;
+        } | null;
+    };
+};
+//# sourceMappingURL=networkSyncAdapter.d.ts.map

package/lib/typescript/network/sync/networkSyncAdapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"networkSyncAdapter.d.ts","sourceRoot":"","sources":["../../../../src/network/sync/networkSyncAdapter.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C;;;;;;;;;GASG;AACH,eAAO,MAAM,0BAA0B,QAAY,CAAC;AAmBpD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,kBAAkB;;;0BAGP,MAAM,IAAI;;;QAM9B;;;;WAIG;+BACoB,OAAO;;;;;CAcjC,CAAC"}

package/lib/typescript/network/types/index.d.ts

@@ -76,19 +76,11 @@ export interface NetworkFilter {
 /** Human readable status classifications derived from request/response metadata. */
 export type NetworkEventStatus = "pending" | "success" | "error" | "timeout";
 /**
- * How an ignored-pattern entry should be compared against captured URLs.
- *
- * - `contains`: case-insensitive substring match on the full URL (legacy behavior).
- * - `exact`: smart equality — if pattern starts with `/`, matches URL.pathname;
- *   if it starts with `http://`/`https://`, matches origin+pathname; otherwise
- *   matches URL.host.
+ * Ignored-pattern types now live in @buoy-gg/shared-ui so the Network and Events
+ * tools share one canonical definition + filter store. Re-exported here for
+ * backwards compatibility with existing `../types` imports.
  */
-export type IgnoredPatternMatchMode = "contains" | "exact";
-/** A single network-events exclude pattern with its match mode. */
-export interface IgnoredPattern {
-    value: string;
-    mode: IgnoredPatternMatchMode;
-}
+export type { IgnoredPattern, IgnoredPatternMatchMode, } from "@buoy-gg/shared-ui";
 /**
  * Insight surfaces highlight notable traffic patterns or issues for the current session.
  */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/network/types/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EACF,KAAK,GACL,MAAM,GACN,KAAK,GACL,QAAQ,GACR,OAAO,GACP,MAAM,GACN,SAAS,GACT,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IACnE;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;;;;;OAWG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC5C;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,KAAK,CAAC;IACjD,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,oFAAoF;AACpF,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE7E;;;;;;;GAOG;AACH,MAAM,MAAM,uBAAuB,GAAG,UAAU,GAAG,OAAO,CAAC;AAE3D,mEAAmE;AACnE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,uBAAuB,CAAC;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,aAAa,GAAG,OAAO,GAAG,UAAU,GAAG,cAAc,CAAC;IAC5D,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/network/types/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EACF,KAAK,GACL,MAAM,GACN,KAAK,GACL,QAAQ,GACR,OAAO,GACP,MAAM,GACN,SAAS,GACT,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IACnE;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;;;;;OAWG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC5C;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,KAAK,CAAC;IACjD,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,oFAAoF;AACpF,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE7E;;;;GAIG;AACH,YAAY,EACV,cAAc,EACd,uBAAuB,GACxB,MAAM,oBAAoB,CAAC;AAE5B;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,aAAa,GAAG,OAAO,GAAG,UAAU,GAAG,cAAc,CAAC;IAC5D,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/network",
-  "version": "3.0.1",
+  "version": "4.0.1",
   "description": "network package",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -26,7 +26,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/shared-ui": "3.0.1"
+    "@buoy-gg/shared-ui": "4.0.1"
   },
   "peerDependencies": {
     "react": "*",