@buoy-gg/network 7.0.3 → 7.0.5

package/README.md

@@ -39,8 +39,9 @@ Want a different label or color? Build the tool with `createNetworkTool({ name,
 - **GraphQL gets special treatment** — operation names are extracted from queries, mutations, and subscriptions and shown with variables in arrow notation: `GetUser › 123`. No more guessing which `/graphql` request is which.
 - **Full request detail** — request/response headers, payloads, HTTP status, and duration for every call, with status-colored rows.
 - **Filter and search** — narrow by status code, HTTP method, or URL pattern; search captured events; pause/resume capture; clear history.
+- **Pin the one that failed** — pin a request to hold it at the top of the list (ignoring your filters), or save it to a separate favorites list. Both keep a full snapshot, so it survives Clear, the 500-request cap, and an app restart. Long-press a row, or use the buttons in the request detail header.
 - **Ignore the noise** — a shared ignored-domains/URL filter (`useIgnoredPatterns`) hides endpoints you never want to see, shared with the Events tool.
-- **Hooks for custom UIs** — `useNetworkEvents`, `useNetworkEventList`, and `useNetworkBadgeCounts` expose the capture stream with narrow per-consumer subscriptions.
+- **Hooks for custom UIs** — `useNetworkEvents`, `useNetworkEventList`, `useNetworkBadgeCounts`, and `useNetworkSaved` expose the capture stream with narrow per-consumer subscriptions.
 
 ## Desktop & AI
 
@@ -50,7 +51,7 @@ The same live session streams to [Buoy Desktop](https://github.com/Buoy-gg/Buoy-
 
 Every tool is free. [Pro](https://buoy.gg/pricing) unlocks production builds, the MCP server, and unlimited capture. Every weekend, Pro features unlock free for everyone.
 
-> 🎯 **Flutter (beta):** Buoy is now available for Flutter — `flutter pub add buoy`. The network inspector ships first, streaming to the same desktop dashboard and MCP server. [Details →](https://buoy.gg/flutter)
+> 🎯 **Flutter (beta):** Buoy is now a full suite for Flutter — `flutter pub add buoy`. Network, storage, console, env, routes, images, Riverpod, events, and a live perf HUD, all streaming to the same desktop dashboard and MCP server. [Details →](https://buoy.gg/flutter)
 
 ---
 

package/lib/commonjs/index.js

@@ -3,12 +3,36 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "FREE_TIER_SAVED_LIMIT", {
+  enumerable: true,
+  get: function () {
+    return _networkSavedStore.FREE_TIER_SAVED_LIMIT;
+  }
+});
+Object.defineProperty(exports, "MAX_PINNED", {
+  enumerable: true,
+  get: function () {
+    return _networkSavedStore.MAX_PINNED;
+  }
+});
+Object.defineProperty(exports, "MAX_SAVED", {
+  enumerable: true,
+  get: function () {
+    return _networkSavedStore.MAX_SAVED;
+  }
+});
 Object.defineProperty(exports, "NetworkBodyResolverProvider", {
   enumerable: true,
   get: function () {
     return _networkBodyResolver.NetworkBodyResolverProvider;
   }
 });
+Object.defineProperty(exports, "NetworkDetailPinActions", {
+  enumerable: true,
+  get: function () {
+    return _NetworkHeaderLive.NetworkDetailPinActions;
+  }
+});
 Object.defineProperty(exports, "NetworkEventDetailView", {
   enumerable: true,
   get: function () {
@@ -27,6 +51,24 @@ Object.defineProperty(exports, "NetworkModal", {
     return _NetworkModal.NetworkModal;
   }
 });
+Object.defineProperty(exports, "NetworkSavedButton", {
+  enumerable: true,
+  get: function () {
+    return _NetworkHeaderLive.NetworkSavedButton;
+  }
+});
+Object.defineProperty(exports, "NetworkSavedScreen", {
+  enumerable: true,
+  get: function () {
+    return _NetworkSavedScreen.NetworkSavedScreen;
+  }
+});
+Object.defineProperty(exports, "NetworkToolView", {
+  enumerable: true,
+  get: function () {
+    return _NetworkModal.NetworkToolView;
+  }
+});
 Object.defineProperty(exports, "TickProvider", {
   enumerable: true,
   get: function () {
@@ -45,6 +87,12 @@ Object.defineProperty(exports, "createNetworkTool", {
     return _preset.createNetworkTool;
   }
 });
+Object.defineProperty(exports, "flagsForEventId", {
+  enumerable: true,
+  get: function () {
+    return _networkSavedStore.flagsForEventId;
+  }
+});
 Object.defineProperty(exports, "formatBytes", {
   enumerable: true,
   get: function () {
@@ -63,6 +111,12 @@ Object.defineProperty(exports, "formatHttpStatus", {
     return _formatting.formatHttpStatus;
   }
 });
+Object.defineProperty(exports, "generateCurl", {
+  enumerable: true,
+  get: function () {
+    return _generateCurl.generateCurl;
+  }
+});
 Object.defineProperty(exports, "ignoredPatternsStore", {
   enumerable: true,
   get: function () {
@@ -87,6 +141,12 @@ Object.defineProperty(exports, "networkListener", {
     return _networkListener.networkListener;
   }
 });
+Object.defineProperty(exports, "networkSavedStore", {
+  enumerable: true,
+  get: function () {
+    return _networkSavedStore.networkSavedStore;
+  }
+});
 Object.defineProperty(exports, "networkSyncAdapter", {
   enumerable: true,
   get: function () {
@@ -105,6 +165,12 @@ Object.defineProperty(exports, "removeAllNetworkListeners", {
     return _networkListener.removeAllNetworkListeners;
   }
 });
+Object.defineProperty(exports, "splitPinned", {
+  enumerable: true,
+  get: function () {
+    return _withPinnedFirst.splitPinned;
+  }
+});
 Object.defineProperty(exports, "urlMatchesIgnoredPattern", {
   enumerable: true,
   get: function () {
@@ -117,6 +183,12 @@ Object.defineProperty(exports, "useIgnoredPatterns", {
     return _sharedUi.useIgnoredPatterns;
   }
 });
+Object.defineProperty(exports, "useLiveNetworkEvent", {
+  enumerable: true,
+  get: function () {
+    return _useLiveNetworkEvent.useLiveNetworkEvent;
+  }
+});
 Object.defineProperty(exports, "useNetworkBadgeCounts", {
   enumerable: true,
   get: function () {
@@ -135,6 +207,12 @@ Object.defineProperty(exports, "useNetworkEvents", {
     return _useNetworkEvents.useNetworkEvents;
   }
 });
+Object.defineProperty(exports, "useNetworkSaved", {
+  enumerable: true,
+  get: function () {
+    return _useNetworkSaved.useNetworkSaved;
+  }
+});
 Object.defineProperty(exports, "useTickEveryMinute", {
   enumerable: true,
   get: function () {
@@ -145,13 +223,20 @@ var _preset = require("./preset");
 var _NetworkModal = require("./network/components/NetworkModal");
 var _NetworkEventDetailView = require("./network/components/NetworkEventDetailView");
 var _NetworkEventItemCompact = require("./network/components/NetworkEventItemCompact");
+var _NetworkSavedScreen = require("./network/components/NetworkSavedScreen");
+var _NetworkHeaderLive = require("./network/components/NetworkHeaderLive");
 var _useNetworkEvents = require("./network/hooks/useNetworkEvents");
 var _useNetworkEventList = require("./network/hooks/useNetworkEventList");
+var _useLiveNetworkEvent = require("./network/hooks/useLiveNetworkEvent");
 var _useNetworkBadgeCounts = require("./network/hooks/useNetworkBadgeCounts");
+var _useNetworkSaved = require("./network/hooks/useNetworkSaved");
+var _withPinnedFirst = require("./network/utils/withPinnedFirst");
 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 _networkSavedStore = require("./network/utils/networkSavedStore");
+var _generateCurl = require("./network/utils/generateCurl");
 var _networkListener = require("./network/utils/networkListener");

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

@@ -12,12 +12,83 @@ var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
 var _formatGraphQLVariables = require("../utils/formatGraphQLVariables");
 var _networkBodyResolver = require("../sync/networkBodyResolver");
 var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Colour for the icons that merely LABEL a section (Sent/Received, the JSON
+ * body glyphs). The Lock/Unlock pair keeps its colour because
+ * secure-vs-insecure is a genuine signal, as does the status pill.
+ */const NEUTRAL_ICON = _sharedUi.macOSColors.semantic.success;
+/**
+ * The measurable slice of a request's lifetime, as proportional bars.
+ *
+ * Renders NOTHING when the interceptor couldn't measure it — an older device
+ * talking to a newer dashboard, or a request that died before headers. A phase
+ * row reading `0ms` would claim we measured zero, which is a different and
+ * false statement from "we didn't measure this".
+ *
+ * Only two phases, on purpose. Queueing / DNS / TLS / request-send all happen
+ * below the JS layer with nothing to read them from — see NetworkTimings. The
+ * design this came from shows five, but derives the other three by multiplying
+ * the total by fixed fractions, i.e. they are invented. Two real ones are worth
+ * more than five where three are decoration.
+ */
+const TimingPhases = ({
+  timings,
+  total
+}) => {
+  // Guard the divisor: a sub-millisecond request would otherwise divide by 0.
+  const span = Math.max(1, total);
+  const phases = [{
+    // Deliberately NOT called "server time". Measured from JS, this includes
+    // queueing, DNS, TLS and sending the request — everything before the
+    // headers land. The subtitle says so rather than implying Chrome-grade
+    // precision we don't have.
+    label: "Waiting (TTFB)",
+    hint: "incl. queue, DNS, TLS",
+    value: timings.ttfb,
+    color: _sharedUi.macOSColors.semantic.warning
+  }, {
+    label: "Content download",
+    hint: undefined,
+    value: timings.download,
+    color: _sharedUi.macOSColors.semantic.success
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.phaseList,
+    children: phases.map(phase => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.phaseRow,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.phaseLabelGroup,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.phaseLabel,
+          children: phase.label
+        }), phase.hint ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.phaseHint,
+          children: phase.hint
+        }) : null]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.phaseTrack,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.phaseBar, {
+            backgroundColor: phase.color,
+            // A floor so a 1ms phase is still a visible tick.
+            width: `${Math.max(1, phase.value / span * 100)}%`
+          }]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.phaseValue,
+        children: (0, _formatting.formatDuration)(phase.value)
+      })]
+    }, phase.label))
+  });
+};
+
 // Component for collapsible sections matching Sentry style
 const CollapsibleSection = ({
   title,
   icon,
   children,
-  defaultOpen = false
+  defaultOpen = false,
+  count
 }) => {
   const [isOpen, setIsOpen] = (0, _react.useState)(defaultOpen);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -30,7 +101,10 @@ const CollapsibleSection = ({
         children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.collapsibleTitleText,
           children: title
-        })]
+        }), count !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.collapsibleCount,
+          children: count
+        }) : null]
       }), isOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronUp, {
         size: 16,
         color: _sharedUi.macOSColors.text.secondary
@@ -98,7 +172,23 @@ const UrlBreakdown = ({
       };
     }
   };
-  const urlParts = parseUrl(url);
+
+  /**
+   * MUST be memoized. `parseUrl` builds a fresh `params` object every call, and
+   * that object is handed to `DataViewer` as its `data` prop — whose flattening
+   * effect keys on `data` by IDENTITY. Computed inline, every render of this
+   * component produced a new object, so the effect re-fired and re-entered
+   * "Processing data…" forever. The detail view re-renders constantly on the
+   * dashboard (it tracks the live event as the device pushes snapshots ~4×/sec),
+   * so this pinned the query-parameter viewer in a permanent processing loop.
+   *
+   * `url` is a string, so this is stable by value.
+   */
+  const urlParts = (0, _react.useMemo)(() => parseUrl(url),
+  // parseUrl closes over the graphql/operation props, which are what change
+  // the derived pathname.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [url, requestClient, operationName, graphqlVariables]);
   const [showParams, setShowParams] = (0, _react.useState)(false);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.urlBreakdown,
@@ -147,6 +237,9 @@ const UrlBreakdown = ({
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.queryParamsToggleText,
           children: "Query Parameters"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.collapsibleCount,
+          children: Object.keys(urlParts.params).length
         }), showParams ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronUp, {
           size: 14,
           color: _sharedUi.macOSColors.text.secondary
@@ -362,34 +455,41 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
             style: styles.timingExact,
             children: ["(", new Date(event.timestamp).toLocaleTimeString(), ")"]
-          })]
-        }), event.requestSize || event.responseSize ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.sizeRow,
-          children: [event.requestSize !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.sizeItem,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Upload, {
-              size: 10,
-              color: _sharedUi.macOSColors.semantic.info
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.sizeLabel,
-              children: "Sent:"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.sizeValue,
-              children: (0, _formatting.formatBytes)(event.requestSize)
-            })]
-          }) : null, event.responseSize !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.sizeItem,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Download, {
-              size: 10,
-              color: _sharedUi.macOSColors.semantic.success
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.sizeLabel,
-              children: "Received:"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.sizeValue,
-              children: (0, _formatting.formatBytes)(event.responseSize)
-            })]
+          }), event.requestSize || event.responseSize ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.sizeRow,
+            children: [event.requestSize !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.sizeItem,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Upload, {
+                size: 10,
+                color: _sharedUi.macOSColors.semantic.info
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.sizeLabel,
+                children: "Sent:"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.sizeValue,
+                children: (0, _formatting.formatBytes)(event.requestSize)
+              })]
+            }) : null, event.responseSize !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.sizeItem,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Download, {
+                size: 10,
+                color: NEUTRAL_ICON
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.sizeLabel,
+                children: "Received:"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.sizeValue,
+                children: (0, _formatting.formatBytes)(event.responseSize)
+              })]
+            }) : null]
           }) : null]
+        }), event.timings ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.phaseDivider
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TimingPhases, {
+            timings: event.timings,
+            total: event.duration ?? event.timings.ttfb + event.timings.download
+          })]
         }) : null]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleSection, {
         title: "Request Headers",
@@ -398,6 +498,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
           color: _sharedUi.macOSColors.semantic.info
         }),
         defaultOpen: false,
+        count: Object.keys(event.requestHeaders).length,
         children: Object.keys(event.requestHeaders).length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.dataViewerContainer,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
@@ -416,9 +517,10 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
         title: "Response Headers",
         icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Download, {
           size: 14,
-          color: _sharedUi.macOSColors.semantic.success
+          color: NEUTRAL_ICON
         }),
         defaultOpen: false,
+        count: Object.keys(event.responseHeaders).length,
         children: Object.keys(event.responseHeaders).length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.dataViewerContainer,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
@@ -466,9 +568,12 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
         title: "Response Body",
         icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FileJson, {
           size: 14,
-          color: _sharedUi.macOSColors.semantic.success
-        }),
-        defaultOpen: false,
+          color: NEUTRAL_ICON
+        })
+        // The body is what you opened the row FOR — the design has it
+        // expanded on arrival, everything else closed.
+        ,
+        defaultOpen: true,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.dataViewerContainer,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
@@ -484,7 +589,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
         title: "Response Body",
         icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FileJson, {
           size: 14,
-          color: _sharedUi.macOSColors.semantic.success
+          color: NEUTRAL_ICON
         }),
         defaultOpen: true,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -710,6 +815,7 @@ const styles = _reactNative.StyleSheet.create({
     marginBottom: 8
   },
   queryParamsToggleText: {
+    flexGrow: 0,
     color: _sharedUi.macOSColors.text.primary,
     fontSize: 12,
     fontWeight: "600",
@@ -728,7 +834,10 @@ const styles = _reactNative.StyleSheet.create({
   timingRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 6
+    gap: 6,
+    // Wraps rather than squashing when the card is narrow (a phone, or a
+    // half-width panel) — the sizes drop to their own line there.
+    flexWrap: "wrap"
   },
   timingLabel: {
     color: _sharedUi.macOSColors.text.secondary,
@@ -746,11 +855,11 @@ const styles = _reactNative.StyleSheet.create({
   },
   sizeRow: {
     flexDirection: "row",
+    alignItems: "center",
     gap: 16,
-    marginTop: 8,
-    paddingTop: 8,
-    borderTopWidth: 1,
-    borderTopColor: _sharedUi.macOSColors.border.default
+    // Pushed to the far end of the Started row. No top border/padding — it is
+    // no longer a separate strip.
+    marginLeft: "auto"
   },
   sizeItem: {
     flexDirection: "row",
@@ -767,6 +876,50 @@ const styles = _reactNative.StyleSheet.create({
     fontFamily: "monospace",
     fontWeight: "600"
   },
+  /* ---- Timing phases ---- */
+  phaseDivider: {
+    height: 1,
+    backgroundColor: _sharedUi.macOSColors.border.default,
+    marginTop: 12,
+    marginBottom: 12
+  },
+  phaseList: {
+    gap: 8
+  },
+  phaseRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 14
+  },
+  phaseLabelGroup: {
+    width: 150
+  },
+  phaseLabel: {
+    fontSize: 12,
+    color: _sharedUi.macOSColors.text.secondary
+  },
+  phaseHint: {
+    fontSize: 10,
+    color: _sharedUi.macOSColors.text.muted
+  },
+  phaseTrack: {
+    flex: 1,
+    height: 7,
+    borderRadius: 4,
+    backgroundColor: _sharedUi.macOSColors.background.hover,
+    justifyContent: "center"
+  },
+  phaseBar: {
+    height: 7,
+    borderRadius: 4
+  },
+  phaseValue: {
+    width: 72,
+    textAlign: "right",
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: _sharedUi.macOSColors.text.primary
+  },
   // Collapsible section styles
   collapsibleSection: {
     marginHorizontal: 12,
@@ -782,6 +935,8 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center",
     justifyContent: "space-between",
     padding: 12,
+    // `background.hover` is the SELECTION grey — heavy enough here that every
+    // section header read as a toolbar. The design uses a near-white strip.
     backgroundColor: _sharedUi.macOSColors.background.hover
   },
   collapsibleTitle: {
@@ -794,6 +949,12 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 13,
     fontWeight: "600"
   },
+  /** The "how much is in here" number beside a section title. */
+  collapsibleCount: {
+    color: _sharedUi.macOSColors.text.muted,
+    fontSize: 11.5,
+    fontFamily: "monospace"
+  },
   collapsibleContent: {
     padding: 12
   },

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

@@ -35,6 +35,39 @@ function getContentTypeBadge(headers) {
   return null;
 }
 
+/**
+ * The transport chip (`fetch` / `GQL` / `gRPC` / `XHR`), one brand colour each.
+ */
+function getClientChipColors(requestClient) {
+  switch (requestClient) {
+    case "fetch":
+      return {
+        backgroundColor: "rgba(74, 144, 226, 0.15)",
+        color: "#4A90E2"
+      };
+    case "graphql":
+      return {
+        backgroundColor: "rgba(229, 53, 171, 0.15)",
+        color: "#E535AB"
+      };
+    case "grpc-web":
+      return {
+        backgroundColor: "rgba(16, 185, 129, 0.15)",
+        color: "#10B981"
+      };
+    case "xhr":
+      return {
+        backgroundColor: "rgba(245, 158, 11, 0.15)",
+        color: "#F59E0B"
+      };
+    default:
+      return {
+        backgroundColor: "rgba(147, 51, 234, 0.15)",
+        color: "#9333EA"
+      };
+  }
+}
+
 // Decomposed components following rule3 - Component Composition
 
 // Status indicator component - single responsibility
@@ -137,7 +170,10 @@ const NetworkEventItemCompact = exports.NetworkEventItemCompact = /*#__PURE__*/(
 // renders to this component instead of a compiled anonymous name.
 function NetworkEventItemCompact({
   event,
-  onPress
+  onPress,
+  pinned = false,
+  saved = false,
+  onLongPress
 }) {
   const statusColor = getStatusColor(event.status, event.error);
   const isPending = !event.status && !event.error;
@@ -162,23 +198,30 @@ function NetworkEventItemCompact({
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.DevToolsCard, {
     onPress: () => onPress(event),
+    onLongPress: onLongPress ? () => onLongPress(event) : undefined,
     style: styles.cardWrapper,
     contentStyle: [styles.container, {
       borderLeftColor: statusColor
     }],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.topRightContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIndicator, {
+      children: [pinned ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Pin, {
+        size: 10,
+        color: _sharedUi.macOSColors.semantic.info
+      }) : null, saved ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Bookmark, {
+        size: 10,
+        color: _sharedUi.macOSColors.semantic.debug
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIndicator, {
         event: event,
         isPending: isPending,
         statusColor: statusColor
       }), 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)"
+          backgroundColor: getClientChipColors(event.requestClient).backgroundColor
         }],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.clientText, {
-            color: event.requestClient === "fetch" ? "#4A90E2" : event.requestClient === "graphql" ? "#E535AB" : event.requestClient === "grpc-web" ? "#10B981" : event.requestClient === "xhr" ? "#F59E0B" : "#9333EA"
+            color: getClientChipColors(event.requestClient).color
           }],
           children: event.requestClient === "graphql" ? "GQL" : event.requestClient === "grpc-web" ? "gRPC" : event.requestClient === "xhr" ? "XHR" : event.requestClient
         })
@@ -223,13 +266,17 @@ function NetworkEventItemCompact({
 NetworkEventItemCompact.displayName = "NetworkEventItemCompact";
 const styles = _reactNative.StyleSheet.create({
   cardWrapper: {
+    // Overrides DevToolsCard's own wrapper margin, so it has to opt into the
+    // edge-to-edge chat layout too or the rows keep their gutter.
     marginHorizontal: 8
   },
   container: {
     flexDirection: "row",
     alignItems: "center",
     borderLeftWidth: 3,
-    borderLeftColor: "transparent"
+    borderLeftColor: "transparent",
+    // One hairline per row — the same value DevToolsCard's border uses.
+    borderBottomWidth: 1
   },
   leftSection: {
     marginRight: 8,