@buoy-gg/network 7.0.14 → 7.0.16

package/lib/module/network/components/NetworkListScreen.web.js

@@ -0,0 +1,605 @@
+"use strict";
+
+/**
+ * NetworkListScreen.web — DOM twin of NetworkListScreen.tsx.
+ *
+ * The network tool's LIST screen: owns the event-store subscription, the
+ * scrolling list, the OVERRIDDEN and PINNED strips, empty state, disabled
+ * banner, and the free-tier locked-history footer. Identical prop contract,
+ * hook usage and derivation order as the native file — the data layer is
+ * REUSED, not forked (`useNetworkEventList`, `useNetworkSaved`,
+ * `useOverrideRules`, `ruleMatches`, `splitPinned` are all platform-free).
+ *
+ * Stable-tree contract (rule4): hooks run unconditionally, then the
+ * component returns null when not visible. The subscription is gated with
+ * `paused || !visible` so a hidden list doesn't subscribe at all.
+ *
+ * shared-ui RN chrome is replicated as DOM with provenance (web consumers
+ * resolve `@buoy-gg/shared-ui` to a minimal shim):
+ *  - `macOSColors` / `buoyColors` — inlined verbatim subsets from
+ *    shared/src/ui/gameUI/constants/.
+ *  - Icons — inline lucide SVGs (shared-ui's icons are lucide re-exports).
+ *  - `NetworkUpgradeBanner` (which itself leans on shared-ui `ProBadge` +
+ *    `Zap`) — inlined DOM twin below, values from
+ *    NetworkUpgradeBanner.tsx + license/FeatureGate.tsx `proBadge` styles.
+ *
+ * Intentional deviations (all logged):
+ *  - FlatList virtualization → a plain scrolled div. The store caps at 500
+ *    events and web rows are cheap DOM; the window/batch tuning the native
+ *    list carries is a FlatList-only concern.
+ *    (`extraData={savedLiveIds}` is likewise moot — plain `map` has no
+ *    PureComponent bail-out to bust.)
+ *  - The upgrade banner's `ProBadge` renders the static gold "PRO" — the
+ *    Weekend Pass variant reads `useProAccess` from @buoy-gg/license, which
+ *    is not part of the web port.
+ *  - `onEventPress` opens the detail view (ported in F3 as
+ *    NetworkEventDetailView.web / NetworkDetailScreen.web) — callers wire the
+ *    prop to `networkSelectionStore.select`, the screen just calls it
+ *    (native behavior; nothing stubbed here).
+ *  - Native's row tap opens the detail view and long-press toggles the pin;
+ *    both are wired identically here (long-press = 500ms pointer hold, see
+ *    NetworkEventItemCompact.web).
+ *
+ * F4 integration point: `ignoredPatterns` is a prop (same as native). The
+ * native root feeds it from shared-ui's persisted `useIgnoredPatterns` store,
+ * which the web shim does not expose — web hosts pass `[]` until the filter
+ * feature lands.
+ *
+ * @platform React DOM Web
+ */
+
+import { useCallback } from "react";
+import { NetworkEventItemCompact } from "./NetworkEventItemCompact.web";
+import { useNetworkEventList } from "../hooks/useNetworkEventList";
+import { useNetworkSaved } from "../hooks/useNetworkSaved";
+import { useOverrideRules } from "../hooks/useOverrideRules";
+import { ruleMatches } from "../overrides/matchRule";
+import { splitPinned } from "../utils/withPinnedFirst";
+
+// =============================
+// Native palettes (provenance)
+// =============================
+
+/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const macOSColors = {
+  background: {
+    card: "#1A1A1C"
+  },
+  border: {
+    default: "#2D2D2F"
+  },
+  text: {
+    primary: "#F5F5F7",
+    muted: "#8E8E93"
+  },
+  semantic: {
+    warning: "#FFEB3B",
+    warningBackground: "rgba(255, 235, 59, 0.15)",
+    info: "#00B8E6"
+  }
+};
+
+/** buoyColors subset — shared/src/ui/gameUI/constants/gameUIColors.ts (macOS theme), verbatim. */
+const buoy = {
+  card: "#1A1A1A",
+  text: "#E0E0E0",
+  textMuted: "#888888",
+  primary: "#20C997"
+};
+
+// =============================
+// Inline lucide icons (shared-ui icons are lucide re-exports)
+// =============================
+
+function Svg({
+  size = 14,
+  color = "currentColor",
+  children
+}) {
+  return /*#__PURE__*/_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 Globe = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M2 12h20"
+  })]
+});
+const Pin = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M12 17v5"
+  }), /*#__PURE__*/_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 Power = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M12 2v10"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M18.4 6.6a9 9 0 1 1-12.77.04"
+  })]
+});
+const FlaskConical = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M8.5 2h7"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M7 16h10"
+  })]
+});
+const Zap = p => /*#__PURE__*/_jsx(Svg, {
+  ...p,
+  children: /*#__PURE__*/_jsx("polygon", {
+    points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2"
+  })
+});
+
+// =============================
+// NetworkUpgradeBanner DOM twin (provenance: NetworkUpgradeBanner.tsx +
+// license/FeatureGate.tsx proBadge styles; ProBadge is static "PRO" — see
+// the deviations log)
+// =============================
+
+function NetworkUpgradeBannerWeb({
+  title,
+  subtitle,
+  onPress
+}) {
+  return /*#__PURE__*/_jsxs("button", {
+    type: "button",
+    style: styles.upgradeBanner,
+    onClick: onPress,
+    children: [/*#__PURE__*/_jsxs("span", {
+      style: styles.upgradeContent,
+      children: [/*#__PURE__*/_jsxs("span", {
+        style: styles.upgradeLeft,
+        children: [/*#__PURE__*/_jsx(Zap, {
+          size: 16,
+          color: buoy.primary
+        }), /*#__PURE__*/_jsx("span", {
+          style: styles.upgradeTitle,
+          children: title
+        })]
+      }), /*#__PURE__*/_jsx("span", {
+        style: styles.proBadge,
+        children: "PRO"
+      })]
+    }), /*#__PURE__*/_jsx("span", {
+      style: styles.upgradeSubtitle,
+      children: subtitle
+    })]
+  });
+}
+
+// =============================
+// Screen (structure mirrors the native file 1:1)
+// =============================
+
+function EmptyState({
+  isEnabled
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    style: styles.emptyState,
+    children: [/*#__PURE__*/_jsx(Globe, {
+      size: 32,
+      color: macOSColors.text.muted
+    }), /*#__PURE__*/_jsx("div", {
+      style: styles.emptyTitle,
+      children: "No network events"
+    }), /*#__PURE__*/_jsx("div", {
+      style: styles.emptyText,
+      children: isEnabled ? "Network requests will appear here" : "Enable interception to start capturing"
+    })]
+  });
+}
+
+/**
+ * The PINNED strip above the live list. Renders OUTSIDE the scrolled list on
+ * purpose — pins ignore the filters, are bounded at MAX_PINNED in the store,
+ * and keeping them out of the list keeps the boundary from moving as events
+ * arrive (same rationale as native).
+ */
+function PinnedSection({
+  events,
+  onEventPress,
+  onLongPress,
+  savedLiveIds,
+  onClearPinned
+}) {
+  if (events.length === 0) return null;
+  return /*#__PURE__*/_jsxs("div", {
+    style: styles.pinnedSection,
+    children: [/*#__PURE__*/_jsxs("div", {
+      style: styles.pinnedHeader,
+      children: [/*#__PURE__*/_jsx(Pin, {
+        size: 11,
+        color: macOSColors.semantic.info
+      }), /*#__PURE__*/_jsxs("span", {
+        style: styles.pinnedTitle,
+        children: ["PINNED \xB7 ", events.length]
+      }), /*#__PURE__*/_jsx("button", {
+        type: "button",
+        onClick: onClearPinned,
+        style: styles.pinnedClear,
+        children: /*#__PURE__*/_jsx("span", {
+          style: styles.pinnedClearText,
+          children: "Unpin all"
+        })
+      })]
+    }), events.map(event => /*#__PURE__*/_jsx(NetworkEventItemCompact, {
+      event: event,
+      onPress: onEventPress,
+      onLongPress: onLongPress,
+      pinned: true,
+      saved: savedLiveIds.has(event.id)
+    }, event.id))]
+  });
+}
+
+/**
+ * The OVERRIDDEN strip, above the pins. Rows are matched against the RULES
+ * rather than filtered on the `override` mark, and the header button is
+ * PAUSE, not "Manage" — same reasoning as native (see NetworkListScreen.tsx).
+ */
+function OverriddenSection({
+  events,
+  onEventPress,
+  onLongPress,
+  savedLiveIds,
+  paused,
+  onTogglePaused
+}) {
+  if (events.length === 0) return null;
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      ...styles.overriddenSection,
+      ...(paused ? styles.overriddenSectionOff : null)
+    },
+    children: [/*#__PURE__*/_jsxs("div", {
+      style: styles.overriddenHeader,
+      children: [/*#__PURE__*/_jsx(FlaskConical, {
+        size: 11,
+        color: paused ? macOSColors.text.muted : macOSColors.semantic.warning
+      }), /*#__PURE__*/_jsx("span", {
+        style: {
+          ...styles.overriddenTitle,
+          ...(paused ? styles.overriddenTitleOff : null)
+        },
+        children: paused ? `PAUSED · ${events.length}` : `OVERRIDDEN · ${events.length}`
+      }), /*#__PURE__*/_jsx("button", {
+        type: "button",
+        onClick: onTogglePaused,
+        style: styles.overriddenManage,
+        children: /*#__PURE__*/_jsx("span", {
+          style: {
+            ...styles.overriddenManageText,
+            ...(paused ? styles.overriddenTitleOff : null)
+          },
+          children: paused ? "Resume" : "Pause"
+        })
+      })]
+    }), events.map(event => /*#__PURE__*/_jsx(NetworkEventItemCompact, {
+      event: event,
+      onPress: onEventPress,
+      onLongPress: onLongPress,
+      overridden: true,
+      saved: savedLiveIds.has(event.id)
+    }, event.id))]
+  });
+}
+export function NetworkListScreen({
+  visible,
+  paused,
+  filter,
+  ignoredPatterns,
+  isPro,
+  searchText,
+  onEventPress,
+  onUpgradePress
+}) {
+  const {
+    visibleEvents,
+    hasLockedEvents,
+    lockedEventCount
+  } = useNetworkEventList({
+    filter,
+    ignoredPatterns,
+    paused: paused || !visible,
+    isPro
+  });
+
+  // Pins come from the persisted saved store, NOT from the live list — that is
+  // what lets a pinned failure survive Clear, the 500-event cap and a reload.
+  const {
+    pinnedEvents,
+    pinnedLiveIds,
+    savedLiveIds,
+    togglePin,
+    clearPinned
+  } = useNetworkSaved();
+
+  // Which rules are live right now — the strip below reflects the rules, not
+  // the history, so it's correct the moment a rule is made or removed.
+  const {
+    rules,
+    enabled: overridesEnabled,
+    setEnabled,
+    isRuleSpent
+  } = useOverrideRules();
+
+  // Stable identity: handed to memoized rows.
+  const handleLongPress = useCallback(event => {
+    togglePin(event);
+  }, [togglePin]);
+
+  // Everything above is a hook and must run unconditionally; everything below
+  // is work (same rule4 contract as native).
+  if (!visible) return null;
+  const {
+    pinned,
+    rest
+  } = splitPinned(visibleEvents, pinnedEvents, pinnedLiveIds);
+
+  // Hoist anything an active rule covers. Done after `splitPinned` so a request
+  // that is both pinned and overridden appears once, in the louder section.
+  const activeRules = rules.filter(rule => rule.enabled && !isRuleSpent(rule));
+  const isOverridden = event => activeRules.some(rule => ruleMatches(rule, event.url, String(event.method || "GET")));
+  const overridden = activeRules.length ? [...pinned, ...rest].filter(isOverridden) : [];
+  const overriddenIds = new Set(overridden.map(event => event.id));
+  const pinnedRows = pinned.filter(event => !overriddenIds.has(event.id));
+  const restRows = overriddenIds.size ? rest.filter(event => !overriddenIds.has(event.id)) : rest;
+  const isEnabled = !paused;
+  const renderListFooter = () => {
+    if (!hasLockedEvents) return null;
+    const isSearching = searchText.length > 0;
+    const bannerText = isSearching ? `${lockedEventCount} matching ${lockedEventCount === 1 ? "request" : "requests"} in locked history` : `${lockedEventCount} requests locked`;
+    const subtextMessage = isSearching ? "Upgrade to Pro to search your full request history" : "Upgrade to Pro to unlock full request history";
+    return /*#__PURE__*/_jsx(NetworkUpgradeBannerWeb, {
+      title: bannerText,
+      subtitle: subtextMessage,
+      onPress: onUpgradePress
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    style: styles.root,
+    children: [!isEnabled ? /*#__PURE__*/_jsxs("div", {
+      style: styles.disabledBanner,
+      children: [/*#__PURE__*/_jsx(Power, {
+        size: 14,
+        color: macOSColors.semantic.warning
+      }), /*#__PURE__*/_jsx("span", {
+        style: styles.disabledText,
+        children: "Network interception is disabled"
+      })]
+    }) : null, /*#__PURE__*/_jsx(OverriddenSection, {
+      events: overridden,
+      onEventPress: onEventPress,
+      onLongPress: handleLongPress,
+      savedLiveIds: savedLiveIds,
+      paused: !overridesEnabled,
+      onTogglePaused: () => setEnabled(!overridesEnabled)
+    }), /*#__PURE__*/_jsx(PinnedSection, {
+      events: pinnedRows,
+      onEventPress: onEventPress,
+      onLongPress: handleLongPress,
+      savedLiveIds: savedLiveIds,
+      onClearPinned: clearPinned
+    }), restRows.length > 0 || hasLockedEvents ?
+    /*#__PURE__*/
+    // DEVIATION: FlatList → plain scrolled div (see file header). The
+    // list still OWNS scrolling — hosts render this screen without a
+    // scroll wrapper (JsModal's `disableScrollWrapper`), same as native.
+    _jsx("div", {
+      style: styles.list,
+      "aria-label": "Network events list",
+      children: /*#__PURE__*/_jsxs("div", {
+        style: styles.listContent,
+        children: [restRows.map(item => /*#__PURE__*/_jsx(NetworkEventItemCompact, {
+          event: item,
+          onPress: onEventPress,
+          onLongPress: handleLongPress,
+          saved: savedLiveIds.has(item.id)
+        }, item.id)), renderListFooter()]
+      })
+    }) : pinnedRows.length > 0 || overridden.length > 0 ? null : /*#__PURE__*/_jsx(EmptyState, {
+      isEnabled: isEnabled
+    })]
+  });
+}
+
+// Values mirror the native StyleSheet block 1:1.
+const styles = {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    minHeight: 0
+  },
+  /**
+   * The strip is separated from the live list by a real rule, not just space:
+   * these rows do NOT obey the filters, and the boundary is what tells the
+   * user why a request they just filtered out is still on screen.
+   */
+  overriddenSection: {
+    borderBottom: `1px solid ${macOSColors.semantic.warning}44`,
+    backgroundColor: macOSColors.semantic.warningBackground
+  },
+  overriddenSectionOff: {
+    borderBottom: `1px solid ${macOSColors.border.default}`,
+    backgroundColor: macOSColors.background.card
+  },
+  overriddenTitleOff: {
+    color: macOSColors.text.muted
+  },
+  overriddenHeader: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    padding: "8px 12px 4px"
+  },
+  overriddenTitle: {
+    flex: 1,
+    fontSize: 10,
+    fontWeight: 700,
+    letterSpacing: 0.8,
+    color: macOSColors.semantic.warning
+  },
+  overriddenManage: {
+    padding: "2px 6px",
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    margin: 0
+  },
+  overriddenManageText: {
+    fontSize: 10,
+    fontWeight: 600,
+    color: macOSColors.semantic.warning
+  },
+  pinnedSection: {
+    borderBottom: `1px solid ${macOSColors.border.default}`,
+    paddingBottom: 4
+  },
+  pinnedHeader: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    padding: "10px 20px 6px"
+  },
+  pinnedTitle: {
+    flex: 1,
+    color: macOSColors.semantic.info,
+    fontSize: 10,
+    fontWeight: 700,
+    letterSpacing: 0.6,
+    fontFamily: "ui-monospace, Menlo, monospace"
+  },
+  pinnedClear: {
+    padding: "2px 6px",
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    margin: 0
+  },
+  pinnedClearText: {
+    color: macOSColors.text.muted,
+    fontSize: 10
+  },
+  disabledBanner: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 10,
+    margin: "8px 12px 0",
+    backgroundColor: macOSColors.semantic.warningBackground,
+    borderRadius: 8,
+    border: `1px solid ${macOSColors.semantic.warning}20`
+  },
+  disabledText: {
+    color: macOSColors.semantic.warning,
+    fontSize: 11,
+    flex: 1
+  },
+  list: {
+    flex: 1,
+    minHeight: 0,
+    overflowY: "auto"
+  },
+  listContent: {
+    paddingTop: 8
+  },
+  emptyState: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "40px 0"
+  },
+  emptyTitle: {
+    color: macOSColors.text.primary,
+    fontSize: 14,
+    fontWeight: 600,
+    marginTop: 12,
+    marginBottom: 6
+  },
+  emptyText: {
+    color: macOSColors.text.muted,
+    fontSize: 12,
+    textAlign: "center"
+  },
+  // NetworkUpgradeBanner.tsx values (buoyColors), verbatim.
+  upgradeBanner: {
+    display: "block",
+    width: "calc(100% - 24px)",
+    boxSizing: "border-box",
+    backgroundColor: buoy.card,
+    borderRadius: 10,
+    border: `1px solid ${buoy.primary}40`,
+    padding: 12,
+    margin: "12px 12px 34px",
+    textAlign: "left",
+    cursor: "pointer",
+    fontFamily: "inherit"
+  },
+  upgradeContent: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 4
+  },
+  upgradeLeft: {
+    display: "inline-flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  upgradeTitle: {
+    color: buoy.text,
+    fontSize: 13,
+    fontWeight: 600
+  },
+  upgradeSubtitle: {
+    display: "block",
+    color: buoy.textMuted,
+    fontSize: 11
+  },
+  // license/FeatureGate.tsx `proBadge`/`proBadgeText`, verbatim.
+  proBadge: {
+    display: "inline-flex",
+    backgroundColor: `${buoy.primary}15`,
+    borderRadius: 4,
+    border: `1px solid ${buoy.primary}40`,
+    padding: "2px 6px",
+    fontSize: 10,
+    fontWeight: 700,
+    color: buoy.primary,
+    letterSpacing: 0.5
+  }
+};

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

@@ -120,7 +120,8 @@ function NetworkFilterScreen({
   } = useNetworkEventList({
     filter,
     ignoredPatterns,
-    paused: paused || !visible,
+    paused,
+    visible,
     isPro
   });
   if (!visible) return null;
@@ -148,7 +149,8 @@ function NetworkCopyScreen({
   } = useNetworkEventList({
     filter,
     ignoredPatterns,
-    paused: paused || !visible,
+    paused,
+    visible,
     isPro
   });
   if (!visible) return null;
@@ -322,6 +324,11 @@ function NetworkModalInner({
   // Stable identity: the Overrides screen adopts the draft in an effect keyed
   // on both, so an unstable callback would re-run it every render.
   const handlePendingOverrideConsumed = useCallback(() => setPendingOverrideDraft(null), []);
+
+  // Non-null while the Overrides screen has its rule editor open — the editor
+  // is that screen's own state, so the header asks it first before popping the
+  // whole screen. See the prop's comment on NetworkOverridesScreen.
+  const overridesBackRef = useRef(null);
   const handleSearch = text => {
     setSearchText(text);
     setFilter(prev => ({
@@ -401,6 +408,7 @@ function NetworkModalInner({
       return /*#__PURE__*/_jsxs(ModalHeader, {
         children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
           onBack: () => {
+            if (overridesBackRef.current?.()) return;
             setShowOverridesView(false);
             setPendingOverrideDraft(null);
           }
@@ -551,7 +559,8 @@ function NetworkModalInner({
         isPro: isPro,
         onUpgradePress: () => showUpgrade("overrides"),
         pendingDraft: pendingOverrideDraft,
-        onPendingConsumed: handlePendingOverrideConsumed
+        onPendingConsumed: handlePendingOverrideConsumed,
+        backHandlerRef: overridesBackRef
         // Inline (desktop panel) has no home indicator to clear.
         ,
         applySafeAreaInset: !inline && modalMode === "bottomSheet"