@buoy-gg/network 7.0.14 → 7.0.16

package/lib/commonjs/network/components/NetworkHeaderLive.web.js

@@ -0,0 +1,604 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NetworkClearButton = NetworkClearButton;
+exports.NetworkDetailPinActions = NetworkDetailPinActions;
+exports.NetworkHeaderBadges = NetworkHeaderBadges;
+exports.NetworkHeaderCopyButton = NetworkHeaderCopyButton;
+exports.NetworkSavedButton = NetworkSavedButton;
+var _react = require("react");
+var _networkEventStore = require("../utils/networkEventStore");
+var _networkSavedStore = require("../utils/networkSavedStore");
+var _useNetworkSaved = require("../hooks/useNetworkSaved");
+var _useNetworkSelection = require("../hooks/useNetworkSelection");
+var _useNetworkBadgeCounts = require("../hooks/useNetworkBadgeCounts");
+var _useNetworkHasMatches = require("../hooks/useNetworkHasMatches");
+var _generateNetworkCopyText = require("../utils/generateNetworkCopyText");
+var _filterNetworkEvents = require("../utils/filterNetworkEvents");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * NetworkHeaderLive.web — DOM twin of NetworkHeaderLive.tsx.
+ *
+ * The header pieces that consume LIVE event data, each its own narrow store
+ * subscriber (same decomposition + hooks as native — `useNetworkBadgeCounts`,
+ * `useNetworkHasEvents`, `useNetworkSaved` are platform-free and reused, not
+ * forked):
+ *
+ *  - `NetworkHeaderBadges` — success/error/pending count chips (tap toggles
+ *    the status filter)
+ *  - `NetworkClearButton`  — trash button, enabled while the store has events
+ *  - `NetworkSavedButton`  — Saved-screen entry point with its live count
+ *  - `NetworkDetailPinActions` — pin + save toggles for the request-DETAIL
+ *    header (ported with the F3 detail-view feature; same flagsForEventId /
+ *    cap logic and press-time event resolution as native)
+ *  - `NetworkHeaderCopyButton` — copy-all button / labelled ⋯-menu row
+ *    (ported with the F5 saved+copy feature; the copy text is the SAME
+ *    platform-free `generateNetworkCopyText`, resolved lazily at press time
+ *    from a live store read, exactly like native)
+ *
+ * shared-ui RN chrome is replicated as DOM with provenance (web consumers
+ * resolve `@buoy-gg/shared-ui` to a minimal shim):
+ *  - `macOSColors` — inlined verbatim subset from
+ *    shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts.
+ *  - Icons — inline lucide SVGs (shared-ui's icons are lucide re-exports).
+ *  - The active chip's native shadow (shadowOffset 0/1, opacity 0.08,
+ *    radius 2) → an equivalent CSS box-shadow.
+ *  - shared-ui `CopyButton` (the Pro branch of the copy button) — inlined
+ *    labelled DOM twin below: same idle/success/error icon set, 1500ms
+ *    feedback, lazy function value, and label-follows-labelStyle behavior.
+ *
+ * Intentional deviations (all logged):
+ *  - shared-ui CopyButton's ClipboardHintBanner and internal
+ *    @buoy-gg/license Pro modal are not ported — license gating isn't part
+ *    of the web port; the explicit `isPro` prop branch (native's own outer
+ *    gate) still routes free users to `onUpgradePress`.
+ *  - `CopySettings` is imported from the platform-free
+ *    `generateNetworkCopyText` module (the native file imports it from
+ *    NetworkCopySettingsView.tsx, which would drag react-native in).
+ *
+ * @platform React DOM Web
+ */
+
+// =============================
+// Native palette (provenance)
+// =============================
+
+/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */const macOSColors = {
+  background: {
+    hover: "#1D1D1F"
+  },
+  border: {
+    default: "#2D2D2F"
+  },
+  text: {
+    primary: "#F5F5F7",
+    secondary: "#A1A1A6",
+    muted: "#8E8E93",
+    disabled: "#9E9EA0"
+  },
+  semantic: {
+    success: "#34C759",
+    error: "#FF453A",
+    warning: "#FFEB3B",
+    info: "#00B8E6",
+    infoBackground: "rgba(0, 184, 230, 0.1)",
+    debug: "#BF5AF2"
+  }
+};
+
+// =============================
+// Inline lucide icons (shared-ui icons are lucide re-exports)
+// =============================
+
+function Svg({
+  size = 14,
+  color = "currentColor",
+  children
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: {
+      flexShrink: 0,
+      display: "block"
+    },
+    children: children
+  });
+}
+const CheckCircle = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
+  ...p,
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M21.801 10A10 10 0 1 1 17 3.335"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "m9 11 3 3L22 4"
+  })]
+});
+const XCircle = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
+  ...p,
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "m15 9-6 6"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "m9 9 6 6"
+  })]
+});
+const Clock = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
+  ...p,
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("polyline", {
+    points: "12 6 12 12 16 14"
+  })]
+});
+const Trash2 = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
+  ...p,
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M3 6h18"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
+    x1: "10",
+    x2: "10",
+    y1: "11",
+    y2: "17"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
+    x1: "14",
+    x2: "14",
+    y1: "11",
+    y2: "17"
+  })]
+});
+const Bookmark = p => /*#__PURE__*/(0, _jsxRuntime.jsx)(Svg, {
+  ...p,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"
+  })
+});
+const Pin = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
+  ...p,
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M12 17v5"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1z"
+  })]
+});
+const Copy = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
+  ...p,
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+    width: "14",
+    height: "14",
+    x: "8",
+    y: "8",
+    rx: "2",
+    ry: "2"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+  })]
+});
+const CheckCircle2 = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
+  ...p,
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "m9 12 2 2 4-4"
+  })]
+});
+const AlertTriangle = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
+  ...p,
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M12 9v4"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M12 17h.01"
+  })]
+});
+/** Success / error / pending chips — tap to toggle the status filter. */
+function NetworkHeaderBadges({
+  activeStatus,
+  onToggleStatus,
+  ignoredPatterns,
+  paused
+}) {
+  const counts = (0, _useNetworkBadgeCounts.useNetworkBadgeCounts)({
+    ignoredPatterns,
+    paused
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: styles.headerChipRow,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+      type: "button",
+      style: {
+        ...styles.headerChip,
+        ...(activeStatus === "success" ? styles.headerChipActive : null)
+      },
+      onClick: () => onToggleStatus("success"),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CheckCircle, {
+        size: 12,
+        color: macOSColors.semantic.success
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        style: {
+          ...styles.headerChipValue,
+          color: macOSColors.semantic.success
+        },
+        children: counts.successful
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+      type: "button",
+      style: {
+        ...styles.headerChip,
+        ...(activeStatus === "error" ? styles.headerChipActive : null)
+      },
+      onClick: () => onToggleStatus("error"),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(XCircle, {
+        size: 12,
+        color: macOSColors.semantic.error
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        style: {
+          ...styles.headerChipValue,
+          color: macOSColors.semantic.error
+        },
+        children: counts.failed
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+      type: "button",
+      style: {
+        ...styles.headerChip,
+        ...(activeStatus === "pending" ? styles.headerChipActive : null)
+      },
+      onClick: () => onToggleStatus("pending"),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Clock, {
+        size: 12,
+        color: macOSColors.semantic.warning
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        style: {
+          ...styles.headerChipValue,
+          color: macOSColors.semantic.warning
+        },
+        children: counts.pending
+      })]
+    })]
+  });
+}
+/** Trash button — handler co-located; enabled while the store has events.
+ * Subscribes to a flip-guarded boolean, so it renders when the store goes
+ * empty↔non-empty, not on every count change. */
+function NetworkClearButton({
+  paused
+}) {
+  const hasEvents = (0, _useNetworkHasMatches.useNetworkHasEvents)({
+    paused
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+    type: "button",
+    "aria-label": "Clear events",
+    onClick: () => _networkEventStore.networkEventStore.clearEvents(),
+    style: {
+      ...styles.headerActionButton,
+      ...(!hasEvents ? styles.headerActionButtonDisabled : null)
+    },
+    disabled: !hasEvents,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Trash2, {
+      size: 14,
+      color: hasEvents ? macOSColors.text.muted : macOSColors.text.disabled
+    })
+  });
+}
+/**
+ * Entry point to the Saved screen, with its count. A self-subscribing leaf so
+ * the badge tracks the store without the modal header re-rendering.
+ */
+function NetworkSavedButton({
+  onPress
+}) {
+  const {
+    savedRecords
+  } = (0, _useNetworkSaved.useNetworkSaved)();
+  const count = savedRecords.length;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+    type: "button",
+    onClick: onPress,
+    "aria-label": "Saved requests",
+    style: styles.headerActionButton,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Bookmark, {
+      size: 14,
+      color: count > 0 ? macOSColors.semantic.debug : macOSColors.text.muted
+    }), count > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      style: styles.savedBadge,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        style: styles.savedBadgeText,
+        children: count > 99 ? "99+" : count
+      })
+    }) : null]
+  });
+}
+/**
+ * Pin + Save toggles for the request-detail header — same self-subscribing
+ * leaf as native, for the same two reasons: the host root stays free of
+ * subscriptions, and these buttons deliberately do NOT live inside
+ * `NetworkEventDetailView` (the Events tool renders that same detail view
+ * with no saved store behind it).
+ *
+ * The event object is resolved at PRESS time (live store first, then the
+ * saved snapshot), and the selected id is SUBSCRIBED here rather than passed
+ * down, so stepping through requests doesn't rebuild the host header.
+ */
+function NetworkDetailPinActions({
+  isPro,
+  onUpgradePress
+}) {
+  const eventId = (0, _useNetworkSelection.useSelectedNetworkEventId)();
+  const state = (0, _useNetworkSaved.useNetworkSaved)();
+  const {
+    pinned,
+    saved
+  } = (0, _networkSavedStore.flagsForEventId)(state, eventId);
+  const savedLimit = isPro ? _networkSavedStore.MAX_SAVED : _networkSavedStore.FREE_TIER_SAVED_LIMIT;
+  const atPinCap = !pinned && state.pinnedEvents.length >= _networkSavedStore.MAX_PINNED;
+  const atSavedCap = !saved && state.savedRecords.length >= savedLimit;
+  const resolveEvent = () => {
+    if (!eventId) return null;
+    return _networkEventStore.networkEventStore.getEvents().find(event => event.id === eventId) ?? _networkSavedStore.networkSavedStore.getEventById(eventId);
+  };
+  const handlePin = () => {
+    const event = resolveEvent();
+    if (event) state.togglePin(event);
+  };
+  const handleSave = () => {
+    // Hitting the free ceiling is an upgrade moment, not a dead button.
+    if (atSavedCap && !isPro) {
+      onUpgradePress();
+      return;
+    }
+    const event = resolveEvent();
+    if (event) state.toggleSave(event);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      type: "button",
+      onClick: handlePin,
+      disabled: atPinCap,
+      "aria-label": pinned ? "Unpin request" : "Pin request",
+      title: atPinCap ? `Pin limit reached (${_networkSavedStore.MAX_PINNED})` : undefined,
+      style: {
+        ...styles.headerActionButton,
+        ...(pinned ? styles.headerActionButtonActive : null),
+        ...(atPinCap ? styles.headerActionButtonDisabled : null)
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Pin, {
+        size: 14,
+        color: pinned ? macOSColors.semantic.info : atPinCap ? macOSColors.text.disabled : macOSColors.text.secondary
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      type: "button",
+      onClick: handleSave,
+      disabled: atSavedCap && isPro,
+      "aria-label": saved ? "Remove from saved" : "Save request",
+      title: atSavedCap && isPro ? `Saved limit reached (${_networkSavedStore.MAX_SAVED})` : undefined,
+      style: {
+        ...styles.headerActionButton,
+        ...(saved ? styles.headerActionButtonSaved : null),
+        ...(atSavedCap && isPro ? styles.headerActionButtonDisabled : null)
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Bookmark, {
+        size: 14,
+        color: saved ? macOSColors.semantic.debug : atSavedCap && isPro ? macOSColors.text.disabled : macOSColors.text.secondary
+      })
+    })]
+  });
+}
+/**
+ * Copy-all-requests button. Subscribes to a flip-guarded boolean (its
+ * enabled state); the copy text is generated at PRESS time from a live
+ * store read, so there's no per-event work and no stale closure.
+ *
+ * The Pro branch inlines shared-ui CopyButton's copy/feedback loop (same
+ * icon set, 1500ms feedback, label keeps its own color while the icon
+ * follows the state — native's `labelStyle` wins over the state color).
+ */
+function NetworkHeaderCopyButton({
+  isPro,
+  filter,
+  ignoredPatterns,
+  copySettings,
+  paused,
+  onUpgradePress,
+  label
+}) {
+  const hasEvents = (0, _useNetworkHasMatches.useNetworkHasMatches)({
+    filter,
+    ignoredPatterns,
+    paused
+  });
+  const [copyState, setCopyState] = (0, _react.useState)("idle");
+  const timeoutRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+  }, []);
+  if (!isPro) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+      type: "button",
+      onClick: onUpgradePress,
+      style: {
+        ...(label ? styles.copyMenuRow : styles.headerActionButton),
+        ...(!hasEvents ? styles.headerActionButtonDisabled : null)
+      },
+      disabled: !hasEvents,
+      "aria-label": label ?? "Copy requests",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Copy, {
+        size: 14,
+        color: hasEvents ? macOSColors.text.secondary : macOSColors.text.disabled
+      }), label ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        style: styles.copyMenuLabel,
+        children: label
+      }) : null]
+    });
+  }
+  const settle = state => {
+    setCopyState(state);
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    // 1500ms — shared-ui CopyButton's `feedbackDuration` default.
+    timeoutRef.current = setTimeout(() => {
+      setCopyState("idle");
+      timeoutRef.current = null;
+    }, 1500);
+  };
+  const handleCopy = async () => {
+    try {
+      // Lazy value: resolved at copy time from the LIVE store — no per-event
+      // work, no staleness (native's CopyButton function-value contract).
+      const text = (0, _generateNetworkCopyText.generateNetworkCopyText)((0, _filterNetworkEvents.filterNetworkEvents)((0, _filterNetworkEvents.applyIgnoredPatterns)(_networkEventStore.networkEventStore.getEvents(), ignoredPatterns), filter), copySettings);
+      await navigator.clipboard.writeText(text);
+      settle("success");
+    } catch {
+      settle("error");
+    }
+  };
+  const iconColor = copyState === "success" ? macOSColors.semantic.success : copyState === "error" ? macOSColors.semantic.error : hasEvents ? macOSColors.text.secondary : macOSColors.text.disabled;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+    type: "button",
+    onClick: copyState === "idle" ? handleCopy : undefined,
+    style: {
+      ...(label ? styles.copyMenuRow : styles.headerActionButton),
+      ...(!hasEvents ? styles.headerActionButtonDisabled : null)
+    },
+    disabled: !hasEvents,
+    "aria-label": copyState === "idle" ? label ?? "Copy to clipboard" : copyState === "success" ? "Copied to clipboard" : "Failed to copy",
+    children: [copyState === "success" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckCircle2, {
+      size: 14,
+      color: iconColor
+    }) : copyState === "error" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertTriangle, {
+      size: 14,
+      color: iconColor
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Copy, {
+      size: 14,
+      color: iconColor
+    }), label ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      style: styles.copyMenuLabel,
+      children: label
+    }) : null]
+  });
+}
+
+// Values mirror the native StyleSheet block 1:1.
+const styles = {
+  /** The overflow-menu variant: a full-width row, matching the other items. */
+  copyMenuRow: {
+    display: "flex",
+    width: "100%",
+    boxSizing: "border-box",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    padding: "11px 6px",
+    justifyContent: "flex-start",
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    margin: 0,
+    fontFamily: "inherit",
+    textAlign: "left"
+  },
+  copyMenuLabel: {
+    fontSize: 13,
+    fontWeight: 600,
+    color: macOSColors.text.primary
+  },
+  headerChipRow: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  /**
+   * Counter chips and toolbar buttons carry a permanent outline; the fill
+   * marks the active filter.
+   */
+  headerChip: {
+    display: "inline-flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: macOSColors.background.hover,
+    padding: "5px 10px",
+    borderRadius: 12,
+    border: `1px solid ${macOSColors.border.default}`,
+    cursor: "pointer",
+    margin: 0
+  },
+  headerChipActive: {
+    backgroundColor: macOSColors.semantic.infoBackground,
+    border: `1px solid ${macOSColors.semantic.info}50`,
+    // Native: shadowColor info, offset 0/1, opacity 0.08, radius 2.
+    boxShadow: "0 1px 2px rgba(0, 184, 230, 0.08)"
+  },
+  headerChipValue: {
+    fontSize: 12,
+    fontWeight: 600,
+    fontFamily: "ui-monospace, Menlo, monospace"
+  },
+  headerActionButton: {
+    position: "relative",
+    display: "inline-flex",
+    width: 32,
+    height: 32,
+    boxSizing: "border-box",
+    borderRadius: 8,
+    backgroundColor: macOSColors.background.hover,
+    border: `1px solid ${macOSColors.border.default}`,
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+    padding: 0,
+    margin: 0
+  },
+  headerActionButtonDisabled: {
+    opacity: 0.55,
+    cursor: "default"
+  },
+  headerActionButtonActive: {
+    backgroundColor: macOSColors.semantic.infoBackground,
+    border: `1px solid ${macOSColors.semantic.info}50`
+  },
+  headerActionButtonSaved: {
+    backgroundColor: `${macOSColors.semantic.debug}1A`,
+    border: `1px solid ${macOSColors.semantic.debug}50`
+  },
+  savedBadge: {
+    position: "absolute",
+    top: -3,
+    right: -3,
+    minWidth: 14,
+    height: 14,
+    boxSizing: "border-box",
+    padding: "0 3px",
+    borderRadius: 7,
+    backgroundColor: macOSColors.semantic.debug,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  savedBadgeText: {
+    color: "#FFFFFF",
+    fontSize: 9,
+    fontWeight: 700,
+    fontFamily: "ui-monospace, Menlo, monospace"
+  }
+};

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

@@ -166,7 +166,8 @@ function NetworkListScreen({
   } = (0, _useNetworkEventList.useNetworkEventList)({
     filter,
     ignoredPatterns,
-    paused: paused || !visible,
+    paused,
+    visible,
     isPro
   });