@buoy-gg/network 3.0.1 → 3.0.2

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 () {
@@ -69,6 +75,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 () {
@@ -100,5 +112,7 @@ 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 _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/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,12 @@ export { formatBytes, formatDuration, formatHttpStatus } from "./network/utils/f
 // TYPES (For TypeScript users)
 // =============================================================================
 
+// =============================================================================
+// 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/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

@@ -15,6 +15,8 @@ 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 { 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,GACf,MAAM,iBAAiB,CAAC;AAKzB,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/network",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "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": "3.0.2"
   },
   "peerDependencies": {
     "react": "*",