@buoy-gg/network 7.0.4 → 7.0.6

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

@@ -0,0 +1,241 @@
+"use strict";
+
+/**
+ * The SAVED screen — the network tool's favorites list.
+ *
+ * Everything here is read from the persisted saved store, never from the live
+ * event store. That is the whole point of the screen: these requests survive a
+ * Clear, the 500-event cap, and an app restart, so a failure you kept is still
+ * here tomorrow.
+ *
+ * Rows are the same two row components the live list uses, so a saved request
+ * looks exactly like the request it was. Long-press here UNSAVES rather than
+ * pins — in this list "get rid of it" is the action the row affords, and
+ * pinning is still available from the detail header.
+ *
+ * Stable-tree contract (rule4): hooks run unconditionally, then the component
+ * returns null when not visible.
+ */
+
+import { useState } from "react";
+import { FlatList, StyleSheet, Text, TextInput, View, TouchableOpacity } from "react-native";
+import { Bookmark, CopyButton, Search, macOSColors } from "@buoy-gg/shared-ui";
+import { NetworkEventItemCompact } from "./NetworkEventItemCompact";
+import { NetworkUpgradeBanner } from "./NetworkUpgradeBanner";
+import { generateNetworkCopyText } from "../utils/generateNetworkCopyText";
+import { filterNetworkEvents } from "../utils/filterNetworkEvents";
+import { useNetworkSaved } from "../hooks/useNetworkSaved";
+import { FREE_TIER_SAVED_LIMIT, MAX_SAVED } from "../utils/networkSavedStore";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const keyExtractor = item => item.id;
+function EmptyState() {
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.emptyState,
+    children: [/*#__PURE__*/_jsx(Bookmark, {
+      size: 32,
+      color: macOSColors.text.muted
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.emptyTitle,
+      children: "No saved requests"
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.emptyText,
+      children: "Open a request and tap the bookmark to keep it here \u2014 saved requests survive Clear and app restarts."
+    })]
+  });
+}
+export function NetworkSavedScreen({
+  visible,
+  isPro,
+  copySettings,
+  onEventPress,
+  onUpgradePress
+}) {
+  const {
+    savedRecords,
+    pinnedLiveIds,
+    toggleSave,
+    clearSaved
+  } = useNetworkSaved();
+  const [search, setSearch] = useState("");
+  if (!visible) return null;
+
+  /**
+   * A downgrade (or a limit change) can leave a free user holding more saves
+   * than the free tier allows. Rather than deleting their data, the overflow
+   * is LOCKED — oldest first, so the newest saves stay reachable — and the
+   * banner offers the upgrade that unlocks it.
+   */
+  const limit = isPro ? MAX_SAVED : FREE_TIER_SAVED_LIMIT;
+  const unlocked = savedRecords.slice(0, limit);
+  const lockedCount = savedRecords.length - unlocked.length;
+  const events = unlocked.map(record => record.event);
+  const filtered = search ? filterNetworkEvents(events, {
+    searchText: search
+  }) : events;
+  const handleLongPress = event => {
+    toggleSave(event);
+  };
+  const renderItem = ({
+    item
+  }) => /*#__PURE__*/_jsx(NetworkEventItemCompact, {
+    event: item,
+    onPress: onEventPress,
+    onLongPress: handleLongPress,
+    saved: true,
+    pinned: pinnedLiveIds.has(item.id)
+  });
+  const renderListFooter = () => {
+    if (lockedCount === 0) return null;
+    return /*#__PURE__*/_jsx(NetworkUpgradeBanner, {
+      title: `${lockedCount} saved ${lockedCount === 1 ? "request" : "requests"} locked`,
+      subtitle: `Free keeps ${FREE_TIER_SAVED_LIMIT}. Upgrade to Pro to unlock the rest.`,
+      onPress: onUpgradePress
+    });
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.root,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.toolbar,
+      children: [/*#__PURE__*/_jsx(Bookmark, {
+        size: 11,
+        color: macOSColors.semantic.debug
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: styles.toolbarTitle,
+        children: ["SAVED \xB7 ", savedRecords.length, isPro ? "" : `/${FREE_TIER_SAVED_LIMIT}`]
+      }), isPro ? /*#__PURE__*/_jsx(CopyButton
+      // Lazy value, resolved at press time — no string is built per
+      // render, and it always reflects the current list.
+      , {
+        value: () => generateNetworkCopyText(filtered, copySettings),
+        size: 13,
+        buttonStyle: styles.toolbarButton,
+        colors: {
+          idle: macOSColors.text.secondary,
+          success: macOSColors.semantic.success,
+          error: macOSColors.semantic.error
+        },
+        disabled: filtered.length === 0
+      }) : null, /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: clearSaved,
+        "sentry-label": "ignore clear saved",
+        style: styles.toolbarClear,
+        disabled: savedRecords.length === 0,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.toolbarClearText, savedRecords.length === 0 && styles.toolbarClearTextDisabled],
+          children: "Clear all"
+        })
+      })]
+    }), savedRecords.length > 0 ? /*#__PURE__*/_jsxs(View, {
+      style: styles.searchRow,
+      children: [/*#__PURE__*/_jsx(Search, {
+        size: 13,
+        color: macOSColors.text.secondary
+      }), /*#__PURE__*/_jsx(TextInput, {
+        style: styles.searchInput,
+        placeholder: "Search saved requests\u2026",
+        placeholderTextColor: macOSColors.text.muted,
+        value: search,
+        onChangeText: setSearch,
+        "sentry-label": "ignore saved search",
+        accessibilityLabel: "Search saved requests",
+        autoCapitalize: "none",
+        autoCorrect: false,
+        returnKeyType: "search"
+      })]
+    }) : null, savedRecords.length === 0 ? /*#__PURE__*/_jsx(EmptyState, {}) : /*#__PURE__*/_jsx(FlatList, {
+      data: filtered,
+      renderItem: renderItem,
+      keyExtractor: keyExtractor,
+      contentContainerStyle: styles.listContent,
+      showsVerticalScrollIndicator: true,
+      removeClippedSubviews: true,
+      scrollEnabled: true,
+      initialNumToRender: 12,
+      maxToRenderPerBatch: 8,
+      windowSize: 5,
+      extraData: pinnedLiveIds,
+      "sentry-label": "ignore saved requests list",
+      ListFooterComponent: renderListFooter
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    minHeight: 0
+  },
+  toolbar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 20,
+    paddingTop: 10,
+    paddingBottom: 6
+  },
+  toolbarTitle: {
+    flex: 1,
+    color: macOSColors.semantic.debug,
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.6,
+    fontFamily: "monospace"
+  },
+  toolbarButton: {
+    width: 26,
+    height: 26,
+    borderRadius: 6,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  toolbarClear: {
+    paddingHorizontal: 6,
+    paddingVertical: 2
+  },
+  toolbarClearText: {
+    color: macOSColors.text.muted,
+    fontSize: 10
+  },
+  toolbarClearTextDisabled: {
+    color: macOSColors.text.disabled
+  },
+  searchRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    marginHorizontal: 12,
+    marginBottom: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    backgroundColor: macOSColors.background.input,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default
+  },
+  searchInput: {
+    flex: 1,
+    color: macOSColors.text.primary,
+    fontSize: 13,
+    paddingVertical: 2
+  },
+  listContent: {
+    paddingTop: 4
+  },
+  emptyState: {
+    alignItems: "center",
+    paddingVertical: 40,
+    paddingHorizontal: 24
+  },
+  emptyTitle: {
+    color: macOSColors.text.primary,
+    fontSize: 14,
+    fontWeight: "600",
+    marginTop: 12,
+    marginBottom: 6
+  },
+  emptyText: {
+    color: macOSColors.text.muted,
+    fontSize: 12,
+    textAlign: "center",
+    lineHeight: 17
+  }
+});

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

@@ -0,0 +1,72 @@
+"use strict";
+
+/**
+ * The "N things are locked, upgrade to see them" banner.
+ *
+ * Extracted because there are now two of them — locked request history on the
+ * live list, and locked saves on the Saved screen — and they are the same
+ * offer. Two copies would drift the moment one of them gets a copy tweak.
+ */
+
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { ProBadge, Zap, buoyColors } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function NetworkUpgradeBanner({
+  title,
+  subtitle,
+  onPress
+}) {
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    style: styles.banner,
+    onPress: onPress,
+    activeOpacity: 0.8,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.content,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.left,
+        children: [/*#__PURE__*/_jsx(Zap, {
+          size: 16,
+          color: buoyColors.primary
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.title,
+          children: title
+        })]
+      }), /*#__PURE__*/_jsx(ProBadge, {})]
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.subtitle,
+      children: subtitle
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  banner: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: buoyColors.primary + "40",
+    padding: 12,
+    marginHorizontal: 12,
+    marginTop: 12,
+    marginBottom: 34
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 4
+  },
+  left: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  title: {
+    color: buoyColors.text,
+    fontSize: 13,
+    fontWeight: "600"
+  },
+  subtitle: {
+    color: buoyColors.textMuted,
+    fontSize: 11
+  }
+});

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

@@ -0,0 +1,58 @@
+"use strict";
+
+/**
+ * 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.
+ */
+
+import { useEffect, useState } from "react";
+import { networkEventStore } from "../utils/networkEventStore";
+import { networkSavedStore } from "../utils/networkSavedStore";
+/**
+ * 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.getEvents().find(e => e.id === eventId) ?? networkSavedStore.getEventById(eventId);
+}
+export function useLiveNetworkEvent(eventId, options = {}) {
+  const {
+    paused = false
+  } = options;
+  const [entry, setEntry] = useState(null);
+  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.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/module/network/hooks/useNetworkSaved.js

@@ -0,0 +1,34 @@
+"use strict";
+
+/**
+ * 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.
+ */
+
+import { useEffect, useState } from "react";
+import { networkSavedStore } from "../utils/networkSavedStore";
+const togglePin = event => networkSavedStore.togglePin(event);
+const toggleSave = event => networkSavedStore.toggleSave(event);
+const remove = key => networkSavedStore.remove(key);
+const clearSaved = () => networkSavedStore.clearSaved();
+const clearPinned = () => networkSavedStore.clearPinned();
+export function useNetworkSaved() {
+  const [state, setState] = useState(() => networkSavedStore.getState());
+  useEffect(() => networkSavedStore.subscribe(() => {
+    setState(networkSavedStore.getState());
+  }), []);
+  return {
+    ...state,
+    togglePin,
+    toggleSave,
+    remove,
+    clearSaved,
+    clearPinned
+  };
+}

package/lib/module/network/index.js

@@ -5,17 +5,23 @@
  */
 
 // Components
-export { NetworkModal } from "./components/NetworkModal";
+export { NetworkModal, NetworkToolView } from "./components/NetworkModal";
 export { NetworkEventDetailView } from "./components/NetworkEventDetailView";
 export { NetworkEventItemCompact } from "./components/NetworkEventItemCompact";
+export { NetworkSavedScreen } from "./components/NetworkSavedScreen";
+export { NetworkSavedButton, NetworkDetailPinActions } from "./components/NetworkHeaderLive";
 
 // Hooks
 export { useNetworkEvents } from "./hooks/useNetworkEvents";
+export { useLiveNetworkEvent } from "./hooks/useLiveNetworkEvent";
+export { useNetworkSaved } from "./hooks/useNetworkSaved";
 export { TickProvider, useTickEveryMinute } from "./hooks/useTickEveryMinute";
 
 // Utils
 export { networkListener, startNetworkListener, stopNetworkListener, addNetworkListener, removeAllNetworkListeners, isNetworkListening, getNetworkListenerCount } from "./utils/networkListener";
 export { networkEventStore } from "./utils/networkEventStore";
+export { networkSavedStore, flagsForEventId, FREE_TIER_SAVED_LIMIT, MAX_PINNED, MAX_SAVED, SESSION_ID as NETWORK_SESSION_ID } from "./utils/networkSavedStore";
+export { splitPinned } from "./utils/withPinnedFirst";
 export { formatBytes, formatDuration, formatHttpStatus } from "./utils/formatting";
 
 // Types

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

@@ -1,6 +1,7 @@
 "use strict";
 
 import { networkEventStore } from "../utils/networkEventStore";
+import { flagsForEventId, networkSavedStore } from "../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
@@ -26,6 +27,9 @@ const stripLargeBodies = event => {
   if (stripResponse) stripped.responseData = undefined;
   return stripped;
 };
+const resolveEvent = id => networkEventStore.getEventById(id) ?? 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
@@ -37,29 +41,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.
  */
 export const networkSyncAdapter = {
-  version: 2,
-  getSnapshot: () => networkEventStore.getEvents().map(stripLargeBodies),
-  subscribe: onChange => networkEventStore.subscribeToEvents(onChange),
+  version: 3,
+  getSnapshot: () => ({
+    events: 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.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.subscribeToEvents(onChange);
+    const unsubscribeSaved = networkSavedStore.subscribe(onChange);
+    return () => {
+      unsubscribeEvents();
+      unsubscribeSaved();
+    };
+  },
   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.
+     * 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.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 = flagsForEventId(networkSavedStore.getState(), id).pinned;
+      if (current === wanted) return {
+        ok: true
+      };
+      return 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 = flagsForEventId(networkSavedStore.getState(), id).saved;
+      if (current === wanted) return {
+        ok: true
+      };
+      return 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.remove(key);
+      return {
+        ok: true
+      };
+    },
+    clearSavedRequests: () => {
+      networkSavedStore.clearSaved();
+      return {
+        ok: true
+      };
+    },
+    clearPinnedRequests: () => {
+      networkSavedStore.clearPinned();
+      return {
+        ok: true
+      };
     }
   }
 };

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

@@ -0,0 +1,67 @@
+"use strict";
+
+/**
+ * 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;
+  }
+}
+export 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/module/network/utils/networkEventStore.js

@@ -24,6 +24,7 @@
 import { BaseEventStore } from "@buoy-gg/shared-ui";
 import { extractOperationName } from "./extractOperationName";
 import { networkListener, addNetworkListener } from "./networkListener";
+import { networkSavedStore } from "./networkSavedStore";
 
 /**
  * Callback type for individual event notifications
@@ -155,7 +156,11 @@ class NetworkEventStore extends 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;
@@ -171,6 +176,10 @@ class NetworkEventStore extends 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.syncFromLive(updatedEvent);
         this.notify(updatedEvent);
         this.notifyArrayListeners();
       }