@buoy-gg/network 7.0.4 → 7.0.5

package/lib/commonjs/network/hooks/useLiveNetworkEvent.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLiveNetworkEvent = useLiveNetworkEvent;
+var _react = require("react");
+var _networkEventStore = require("../utils/networkEventStore");
+var _networkSavedStore = require("../utils/networkSavedStore");
+/**
+ * Resolves a selected event ID to the LIVE event object in the store.
+ *
+ * The detail view used to be handed the `NetworkEvent` captured at press
+ * time. The store updates immutably — a response/error replaces the pending
+ * event with a NEW object — so a request opened while pending stayed
+ * "Pending" for as long as the detail view was open, and only showed its
+ * real status after going back and re-opening the row (which re-read the
+ * store). This hook closes that gap: callers keep the ID as UI state and the
+ * leaf that renders the detail subscribes for its current value.
+ *
+ * Subscribing here (not at the modal root) keeps the event stream out of the
+ * shell's render path — same rule the list/header leaves follow.
+ */
+
+/**
+ * Live store first, then the pinned/saved snapshots. The fallback is what
+ * makes a pinned request openable after a Clear, after it aged past the
+ * 500-event cap, or in a later app launch — cases where the live store has
+ * nothing and the persisted snapshot is the only copy left.
+ */
+function readEvent(eventId) {
+  return _networkEventStore.networkEventStore.getEvents().find(e => e.id === eventId) ?? _networkSavedStore.networkSavedStore.getEventById(eventId);
+}
+function useLiveNetworkEvent(eventId, options = {}) {
+  const {
+    paused = false
+  } = options;
+  const [entry, setEntry] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    // `paused` is the power toggle's freeze-stream semantic: a frozen tool
+    // keeps showing the version it froze on.
+    if (!eventId || paused) return undefined;
+    // subscribeToEvents replays the current array immediately, so the open
+    // detail catches up on subscribe as well as on every later update.
+    return _networkEventStore.networkEventStore.subscribeToEvents(events => {
+      const next = events.find(e => e.id === eventId);
+      // Gone from the store (cleared, or aged past maxEvents) — keep the last
+      // known version rather than blanking an open detail view.
+      if (!next) return;
+      setEntry(prev => prev && prev.id === eventId && prev.event === next ? prev : {
+        id: eventId,
+        event: next
+      });
+    });
+  }, [eventId, paused]);
+  if (!eventId) return null;
+  // A store read during render covers the frame where `eventId` just changed:
+  // the effect's first emission lands a commit later, and until then `entry`
+  // still describes the previously selected request.
+  if (entry && entry.id === eventId) return entry.event;
+  return readEvent(eventId);
+}

package/lib/commonjs/network/hooks/useNetworkSaved.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNetworkSaved = useNetworkSaved;
+var _react = require("react");
+var _networkSavedStore = require("../utils/networkSavedStore");
+/**
+ * Narrow subscription to the pinned/saved store.
+ *
+ * The store rebuilds its derived view once per mutation, so the object this
+ * returns keeps a stable identity between pins — memoized rows don't re-render
+ * because a network event arrived, only because the user pinned something.
+ *
+ * Mutations happen through module-scope callbacks (stable identities), so
+ * passing them into memoized rows costs nothing.
+ */
+
+const togglePin = event => _networkSavedStore.networkSavedStore.togglePin(event);
+const toggleSave = event => _networkSavedStore.networkSavedStore.toggleSave(event);
+const remove = key => _networkSavedStore.networkSavedStore.remove(key);
+const clearSaved = () => _networkSavedStore.networkSavedStore.clearSaved();
+const clearPinned = () => _networkSavedStore.networkSavedStore.clearPinned();
+function useNetworkSaved() {
+  const [state, setState] = (0, _react.useState)(() => _networkSavedStore.networkSavedStore.getState());
+  (0, _react.useEffect)(() => _networkSavedStore.networkSavedStore.subscribe(() => {
+    setState(_networkSavedStore.networkSavedStore.getState());
+  }), []);
+  return {
+    ...state,
+    togglePin,
+    toggleSave,
+    remove,
+    clearSaved,
+    clearPinned
+  };
+}

package/lib/commonjs/network/index.js

@@ -3,6 +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, "NETWORK_SESSION_ID", {
+  enumerable: true,
+  get: function () {
+    return _networkSavedStore.SESSION_ID;
+  }
+});
+Object.defineProperty(exports, "NetworkDetailPinActions", {
+  enumerable: true,
+  get: function () {
+    return _NetworkHeaderLive.NetworkDetailPinActions;
+  }
+});
 Object.defineProperty(exports, "NetworkEventDetailView", {
   enumerable: true,
   get: function () {
@@ -21,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 () {
@@ -33,6 +81,12 @@ Object.defineProperty(exports, "addNetworkListener", {
     return _networkListener.addNetworkListener;
   }
 });
+Object.defineProperty(exports, "flagsForEventId", {
+  enumerable: true,
+  get: function () {
+    return _networkSavedStore.flagsForEventId;
+  }
+});
 Object.defineProperty(exports, "formatBytes", {
   enumerable: true,
   get: function () {
@@ -75,12 +129,24 @@ Object.defineProperty(exports, "networkListener", {
     return _networkListener.networkListener;
   }
 });
+Object.defineProperty(exports, "networkSavedStore", {
+  enumerable: true,
+  get: function () {
+    return _networkSavedStore.networkSavedStore;
+  }
+});
 Object.defineProperty(exports, "removeAllNetworkListeners", {
   enumerable: true,
   get: function () {
     return _networkListener.removeAllNetworkListeners;
   }
 });
+Object.defineProperty(exports, "splitPinned", {
+  enumerable: true,
+  get: function () {
+    return _withPinnedFirst.splitPinned;
+  }
+});
 Object.defineProperty(exports, "startNetworkListener", {
   enumerable: true,
   get: function () {
@@ -93,12 +159,24 @@ Object.defineProperty(exports, "stopNetworkListener", {
     return _networkListener.stopNetworkListener;
   }
 });
+Object.defineProperty(exports, "useLiveNetworkEvent", {
+  enumerable: true,
+  get: function () {
+    return _useLiveNetworkEvent.useLiveNetworkEvent;
+  }
+});
 Object.defineProperty(exports, "useNetworkEvents", {
   enumerable: true,
   get: function () {
     return _useNetworkEvents.useNetworkEvents;
   }
 });
+Object.defineProperty(exports, "useNetworkSaved", {
+  enumerable: true,
+  get: function () {
+    return _useNetworkSaved.useNetworkSaved;
+  }
+});
 Object.defineProperty(exports, "useTickEveryMinute", {
   enumerable: true,
   get: function () {
@@ -108,8 +186,14 @@ Object.defineProperty(exports, "useTickEveryMinute", {
 var _NetworkModal = require("./components/NetworkModal");
 var _NetworkEventDetailView = require("./components/NetworkEventDetailView");
 var _NetworkEventItemCompact = require("./components/NetworkEventItemCompact");
+var _NetworkSavedScreen = require("./components/NetworkSavedScreen");
+var _NetworkHeaderLive = require("./components/NetworkHeaderLive");
 var _useNetworkEvents = require("./hooks/useNetworkEvents");
+var _useLiveNetworkEvent = require("./hooks/useLiveNetworkEvent");
+var _useNetworkSaved = require("./hooks/useNetworkSaved");
 var _useTickEveryMinute = require("./hooks/useTickEveryMinute");
 var _networkListener = require("./utils/networkListener");
 var _networkEventStore = require("./utils/networkEventStore");
+var _networkSavedStore = require("./utils/networkSavedStore");
+var _withPinnedFirst = require("./utils/withPinnedFirst");
 var _formatting = require("./utils/formatting");

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.networkSyncAdapter = exports.SNAPSHOT_BODY_INLINE_LIMIT = void 0;
 var _networkEventStore = require("../utils/networkEventStore");
+var _networkSavedStore = require("../utils/networkSavedStore");
 /**
  * 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
@@ -30,6 +31,9 @@ const stripLargeBodies = event => {
   if (stripResponse) stripped.responseData = undefined;
   return stripped;
 };
+const resolveEvent = id => _networkEventStore.networkEventStore.getEventById(id) ?? _networkSavedStore.networkSavedStore.getEventById(id);
+const readId = params => params && typeof params === "object" ? params.id : undefined;
+const readBool = (params, key) => !!(params && typeof params === "object" && params[key]);
 
 /**
  * Sync adapter for the network tool, consumed by @buoy-gg/external-sync's
@@ -41,29 +45,103 @@ const stripLargeBodies = event => {
  *
  * v2: large bodies are stripped from the snapshot and fetched lazily via
  * `getEventBody` (see SNAPSHOT_BODY_INLINE_LIMIT).
+ *
+ * v3: the payload became an OBJECT — `{ events, saved }` — so pinned/saved
+ * requests reach the dashboard. They can't ride as flags on the events: a pin
+ * outlives the event that produced it (that is its whole purpose), so it has
+ * to be its own list. Dashboards that predate v3 read `payload` as an array;
+ * `NetworkPanel`/`NetworkInline` accept either shape.
  */
 const networkSyncAdapter = exports.networkSyncAdapter = {
-  version: 2,
-  getSnapshot: () => _networkEventStore.networkEventStore.getEvents().map(stripLargeBodies),
-  subscribe: onChange => _networkEventStore.networkEventStore.subscribeToEvents(onChange),
+  version: 3,
+  getSnapshot: () => ({
+    events: _networkEventStore.networkEventStore.getEvents().map(stripLargeBodies),
+    // Saved snapshots go through the same body strip. They are few (capped in
+    // the store) but they ride on EVERY snapshot, so a fat one would land in
+    // the same 200ms loop that the body-stripping exists to protect.
+    saved: _networkSavedStore.networkSavedStore.getRecords().map(record => ({
+      ...record,
+      event: stripLargeBodies(record.event)
+    }))
+  }),
+  subscribe: onChange => {
+    // Pinning with no traffic in flight still has to reach the dashboard, so
+    // both stores drive the snapshot.
+    const unsubscribeEvents = _networkEventStore.networkEventStore.subscribeToEvents(onChange);
+    const unsubscribeSaved = _networkSavedStore.networkSavedStore.subscribe(onChange);
+    return () => {
+      unsubscribeEvents();
+      unsubscribeSaved();
+    };
+  },
   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.
+     * fetched on demand by the dashboard when its detail view opens. Falls
+     * back to the saved store, which may hold the only remaining copy of a
+     * request that has since been cleared. Returns null if neither has it.
      */
     getEventBody: params => {
-      const id = params && typeof params === "object" ? params.id : undefined;
+      const id = readId(params);
       if (!id) return null;
-      const event = _networkEventStore.networkEventStore.getEventById(id);
+      const event = resolveEvent(id);
       if (!event) return null;
       return {
         requestData: event.requestData ?? null,
         responseData: event.responseData ?? null
       };
+    },
+    /** Pin/unpin a request from the dashboard. */
+    setPinned: params => {
+      const id = readId(params);
+      if (!id) return null;
+      const event = resolveEvent(id);
+      if (!event) return null;
+      const wanted = readBool(params, "pinned");
+      // `flagsForEventId`, not `isPinned` — the id may be a `saved:<key>`
+      // snapshot, which the live-id Sets deliberately don't carry.
+      const current = (0, _networkSavedStore.flagsForEventId)(_networkSavedStore.networkSavedStore.getState(), id).pinned;
+      if (current === wanted) return {
+        ok: true
+      };
+      return _networkSavedStore.networkSavedStore.togglePin(event);
+    },
+    /** Save/unsave a request from the dashboard. */
+    setSaved: params => {
+      const id = readId(params);
+      if (!id) return null;
+      const event = resolveEvent(id);
+      if (!event) return null;
+      const wanted = readBool(params, "saved");
+      const current = (0, _networkSavedStore.flagsForEventId)(_networkSavedStore.networkSavedStore.getState(), id).saved;
+      if (current === wanted) return {
+        ok: true
+      };
+      return _networkSavedStore.networkSavedStore.toggleSave(event);
+    },
+    /** Drop one pinned/saved record by its stable key. */
+    removeSavedRecord: params => {
+      const key = params && typeof params === "object" ? params.key : undefined;
+      if (!key) return null;
+      _networkSavedStore.networkSavedStore.remove(key);
+      return {
+        ok: true
+      };
+    },
+    clearSavedRequests: () => {
+      _networkSavedStore.networkSavedStore.clearSaved();
+      return {
+        ok: true
+      };
+    },
+    clearPinnedRequests: () => {
+      _networkSavedStore.networkSavedStore.clearPinned();
+      return {
+        ok: true
+      };
     }
   }
 };

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

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateCurl = generateCurl;
+/**
+ * Render a captured request as a runnable `curl` command.
+ *
+ * The point is to get a request OUT of the app and into a terminal, Postman or
+ * a bug report without retyping it — so the output has to actually run, which
+ * makes quoting the whole job.
+ */
+
+/** Headers that describe the captured hop rather than the request, and would
+ * either break the replay or lie about it. curl sets these itself. */
+const SKIPPED_HEADERS = new Set(["content-length",
+// curl recomputes it; a stale value truncates the body
+"host",
+// implied by the URL
+"connection", "accept-encoding" // curl would then have to decode what it asked for
+]);
+
+/**
+ * Single-quote for POSIX shells.
+ *
+ * Inside single quotes every byte is literal, so the ONLY character needing
+ * care is the single quote itself — closed, escaped, reopened. Newlines and
+ * `$`/backtick survive untouched, which is what makes this safe for JSON
+ * bodies and tokens.
+ */
+function shellQuote(value) {
+  return `'${value.replace(/'/g, `'\\''`)}'`;
+}
+function serializeBody(data) {
+  if (data === undefined || data === null) return null;
+  if (typeof data === "string") return data;
+  try {
+    return JSON.stringify(data);
+  } catch {
+    // Circular or otherwise unserializable — better to emit no body than a
+    // command that silently posts "[object Object]".
+    return null;
+  }
+}
+function generateCurl(event) {
+  const method = (event.method || "GET").toUpperCase();
+  const body = serializeBody(event.requestData);
+
+  // Flags are collected as whole `-X PATCH` strings rather than as a flat token
+  // list, so the line-wrap below can't mis-pair them — an earlier version
+  // destructured `[cmd, url, ...rest]` and put the URL in the wrong slot the
+  // moment an -X was present.
+  const flags = [];
+
+  // curl defaults to GET, and to POST once -d is present, so -X only carries
+  // information when it disagrees with that.
+  if (method !== "GET" && !(method === "POST" && body !== null)) {
+    flags.push(`-X ${method}`);
+  }
+  for (const [key, value] of Object.entries(event.requestHeaders || {})) {
+    if (SKIPPED_HEADERS.has(key.toLowerCase())) continue;
+    flags.push(`-H ${shellQuote(`${key}: ${value}`)}`);
+  }
+  if (body !== null) flags.push(`--data-raw ${shellQuote(body)}`);
+  const head = `curl ${shellQuote(event.url)}`;
+  if (flags.length === 0) return head;
+  // One flag per line — these get long, and a wrapped blob is unreadable in a
+  // terminal or pasted into a ticket.
+  return `${head} \\\n  ${flags.join(" \\\n  ")}`;
+}

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

@@ -7,6 +7,7 @@ exports.networkEventStore = void 0;
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _extractOperationName = require("./extractOperationName");
 var _networkListener = require("./networkListener");
+var _networkSavedStore = require("./networkSavedStore");
 /**
  * Network Event Store
  *
@@ -158,7 +159,11 @@ class NetworkEventStore extends _sharedUi.BaseEventStore {
       if (index !== -1) {
         const updatedEvent = {
           ...this.events[index],
-          duration: event.duration
+          duration: event.duration,
+          // Left undefined when the interceptor couldn't measure it (e.g. a
+          // request that failed before headers). Consumers hide the breakdown
+          // in that case rather than rendering zeroes.
+          timings: event.timings
         };
         if (event.response) {
           updatedEvent.status = event.response.status;
@@ -174,6 +179,10 @@ class NetworkEventStore extends _sharedUi.BaseEventStore {
         }
         this.events = this.events.map((e, i) => i === index ? updatedEvent : e);
         this.pendingRequests.delete(request.id);
+        // Refresh any pinned/saved snapshot of this request — a request pinned
+        // while in flight would otherwise stay frozen as "Pending" forever.
+        // No-ops on a single Set check when nothing is pinned.
+        _networkSavedStore.networkSavedStore.syncFromLive(updatedEvent);
         this.notify(updatedEvent);
         this.notifyArrayListeners();
       }

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

@@ -205,6 +205,16 @@ class NetworkListener {
    */
   handleXHRResponse(xhr, requestId, cleanUrl, method, requestHeaders, requestData, params, startTime, isError = false, clientType = "xhr") {
     const duration = startTime ? Date.now() - startTime : 0;
+
+    // XHR's duration was ALREADY total (measured at readyState 4 / load), so
+    // only the split is new. `_ttfb` is stamped at HEADERS_RECEIVED; it is
+    // absent for a request that failed before any headers arrived, and the
+    // breakdown is then correctly omitted rather than faked as 0.
+    const ttfb = xhr._ttfb;
+    const timings = ttfb === undefined ? undefined : {
+      ttfb,
+      download: Math.max(0, duration - ttfb)
+    };
     if (isError || xhr.status === 0) {
       // Network error or aborted request
       this.emit({
@@ -345,6 +355,7 @@ class NetworkListener {
         type: "response",
         timestamp: new Date(),
         duration,
+        timings,
         request: {
           id: requestId || "unknown",
           url: cleanUrl,
@@ -472,7 +483,11 @@ class NetworkListener {
       });
       try {
         const response = await self.originalFetch(input, init);
-        const duration = Date.now() - startTime;
+        // A fetch promise resolves when the HEADERS arrive, not the body — so
+        // this is time-to-first-byte, and it is where `duration` used to stop.
+        // That silently excluded download time, making an identical request
+        // look faster through fetch than through XHR.
+        const ttfb = Date.now() - startTime;
 
         // Clone response to read body with size limits
         const responseClone = response.clone();
@@ -482,6 +497,33 @@ class NetworkListener {
           truncated
         } = await self.processResponseBody(responseClone);
 
+        // Now the body is in — this is the comparable, total number.
+        const duration = Date.now() - startTime;
+
+        /**
+         * The split is only real on platforms whose fetch resolves at HEADERS.
+         *
+         * React Native's does NOT: `fetch` there is the whatwg-fetch polyfill
+         * over XMLHttpRequest, and it resolves inside `xhr.onload` — readyState
+         * 4, i.e. after the entire body. On device this `ttfb` is therefore the
+         * total and the download phase collapses to ~0, so claiming a "0ms
+         * download" would be asserting a measurement we never made.
+         *
+         * Omitting is the right answer rather than a problem: RN's fetch runs
+         * through XMLHttpRequest, so the XHR interceptor below sees readyState 2
+         * and supplies a genuine TTFB for those requests anyway. Where fetch is
+         * native (web, Node), the gap is real and we keep it.
+         *
+         * Verified both ways against a server that flushes headers then holds
+         * the body 250ms: native fetch → 16ms / 251ms; resolve-at-end → the
+         * download phase vanishes, which is what this guard catches.
+         */
+        const download = Math.max(0, duration - ttfb);
+        const timings = download > 0 ? {
+          ttfb,
+          download
+        } : undefined;
+
         // Parse response headers
         const responseHeaders = {};
         response.headers.forEach((value, key) => {
@@ -493,6 +535,7 @@ class NetworkListener {
           type: "response",
           timestamp: new Date(),
           duration,
+          timings,
           request: {
             id: requestId || "unknown",
             url: cleanUrl,
@@ -645,6 +688,16 @@ class NetworkListener {
         processResponse(true);
       };
       const readyStateListener = () => {
+        // HEADERS_RECEIVED — the XHR equivalent of a fetch promise resolving.
+        // This listener is already attached for the readyState-4 fallback, and
+        // readystatechange fires whether or not we look at it, so capturing
+        // TTFB here costs one comparison and one clock read.
+        if (this.readyState === 2) {
+          const xhr = this;
+          if (xhr._ttfb === undefined && xhr._startTime) {
+            xhr._ttfb = Date.now() - xhr._startTime;
+          }
+        }
         if (this.readyState === 4 && !processed) {
           processResponse(false);
         }