@buoy-gg/network 7.0.25 → 7.0.27

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

@@ -2,7 +2,7 @@
 
 import { useState, useRef, useEffect, useCallback } from "react";
 import { View, StyleSheet, TouchableOpacity, TextInput } from "react-native";
-import { Search, Filter, Bookmark, X, JsModal, ModalHeader, devToolsStorageKeys, macOSColors, persistentStorage, TabSelector, useFeatureGate, UpgradeModal, PowerToggleButton, useIgnoredPatterns, ToolBackground } from "@buoy-gg/shared-ui";
+import { Search, Filter, Bookmark, X, JsModal, ModalHeader, devToolsStorageKeys, macOSColors, night, persistentStorage, NightSegmented, useFeatureGate, UpgradeModal, PowerToggleButton, useIgnoredPatterns } from "@buoy-gg/shared-ui";
 import { NetworkFilterViewV3 } from "./NetworkFilterViewV3";
 import { TickProvider } from "../hooks/useTickEveryMinute";
 import { NetworkEventDetailView } from "./NetworkEventDetailView";
@@ -360,25 +360,26 @@ function NetworkModalInner({
 
   // Compact header with actions (like Sentry/Storage modals)
   const renderHeaderContent = () => {
-    // Filter view header with tabs
+    // Filter view header with tabs — the night segmented control (the same
+    // one the dial settings header uses).
     if (showFilterView) {
-      const tabs = [{
-        key: "filters",
-        label: "Filters"
-      }, {
-        key: "copy",
-        label: "Copy"
-      }];
       return /*#__PURE__*/_jsxs(ModalHeader, {
         children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
           onBack: () => setShowFilterView(false)
         }), /*#__PURE__*/_jsx(ModalHeader.Content, {
           title: "",
           noMargin: true,
-          children: /*#__PURE__*/_jsx(TabSelector, {
-            tabs: tabs,
-            activeTab: activeTab,
-            onTabChange: tab => setActiveTab(tab)
+          children: /*#__PURE__*/_jsx(NightSegmented, {
+            size: "sm",
+            tabs: [{
+              key: "filters",
+              label: "Filters"
+            }, {
+              key: "copy",
+              label: "Copy"
+            }],
+            activeKey: activeTab,
+            onChange: tab => setActiveTab(tab)
           })
         })]
       });
@@ -444,12 +445,12 @@ function NetworkModalInner({
           style: styles.headerSearchContainer,
           children: [/*#__PURE__*/_jsx(Search, {
             size: 14,
-            color: macOSColors.text.secondary
+            color: night.color.textSecondary
           }), /*#__PURE__*/_jsx(TextInput, {
             ref: searchInputRef,
             style: styles.headerSearchInput,
             placeholder: "Search URL, method, operation, error...",
-            placeholderTextColor: macOSColors.text.muted,
+            placeholderTextColor: night.color.placeholder,
             value: searchText,
             onChangeText: handleSearch,
             onSubmitEditing: () => setIsSearchActive(false),
@@ -468,7 +469,7 @@ function NetworkModalInner({
             style: styles.headerSearchClear,
             children: /*#__PURE__*/_jsx(X, {
               size: 14,
-              color: macOSColors.text.secondary
+              color: night.color.textSecondary
             })
           }) : null]
         }) : /*#__PURE__*/_jsx(NetworkHeaderBadges, {
@@ -484,7 +485,7 @@ function NetworkModalInner({
           style: styles.headerActionButton,
           children: /*#__PURE__*/_jsx(Search, {
             size: 14,
-            color: macOSColors.text.secondary
+            color: night.color.textSecondary
           })
         }), overridesAvailable ? /*#__PURE__*/_jsx(NetworkOverridesButton, {
           onPress: () => setShowOverridesView(true)
@@ -520,7 +521,7 @@ function NetworkModalInner({
   const body = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.container,
-      children: [/*#__PURE__*/_jsx(ToolBackground, {}), /*#__PURE__*/_jsx(NetworkDetailScreen, {
+      children: [/*#__PURE__*/_jsx(NetworkDetailScreen, {
         visible: hasSelection,
         paused: paused,
         ignoredPatternValues: ignoredPatternValues,
@@ -590,7 +591,7 @@ function NetworkModalInner({
       children: [/*#__PURE__*/_jsx(NetworkHeaderMenuItem, {
         icon: /*#__PURE__*/_jsx(Filter, {
           size: 14,
-          color: hasActiveFilter ? macOSColors.semantic.info : macOSColors.text.secondary
+          color: hasActiveFilter ? night.color.accent : night.color.textSecondary
         }),
         label: "Filters",
         detail: hasActiveFilter ? "Active" : undefined,
@@ -602,7 +603,7 @@ function NetworkModalInner({
       }), /*#__PURE__*/_jsx(NetworkHeaderMenuItem, {
         icon: /*#__PURE__*/_jsx(Bookmark, {
           size: 14,
-          color: macOSColors.text.secondary
+          color: night.color.textSecondary
         }),
         label: "Saved requests",
         onPress: () => {
@@ -654,6 +655,7 @@ function NetworkModalInner({
     onClose: onClose,
     onMinimize: onMinimize,
     persistenceKey: persistenceKey,
+    variant: "night",
     header: {
       showToggleButton: true,
       customContent: renderHeaderContent()
@@ -662,7 +664,12 @@ function NetworkModalInner({
     enablePersistence: true,
     initialMode: "bottomSheet",
     enableGlitchEffects: true,
-    disableScrollWrapper: bodyOwnsScroll,
+    disableScrollWrapper: bodyOwnsScroll
+    // Night hoists the ToolBackground to the sheet root (field runs through
+    // the header). The desktop INLINE panel never goes through JsModal — its
+    // host (the workbench) hoists one shared field instead, so the body
+    // mounts none of its own in either shell.
+    ,
     styles: {},
     children: body
   });
@@ -670,7 +677,10 @@ function NetworkModalInner({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: macOSColors.background.base
+    // Transparent so the HOST's hoisted star field shows through — the night
+    // JsModal's sheet-root field in the modal, the desktop workbench's shared
+    // row field in the inline panel.
+    backgroundColor: "transparent"
   },
   /** Detail = scrolling body + pinned stepper footer. `minHeight: 0` so the
    * body's ScrollView scrolls instead of stretching the column. */
@@ -683,11 +693,13 @@ const styles = StyleSheet.create({
     flex: 1
   },
   /** Inline shell — fills the host panel; `minHeight: 0` so the list's own
-   * FlatList can scroll instead of stretching the column. */
+   * FlatList can scroll instead of stretching the column. Transparent so the
+   * desktop workbench's hoisted sky (one field spanning sidebar + panel)
+   * shows through — the shell paints its own base beneath that field. */
   inlineRoot: {
     flex: 1,
     minHeight: 0,
-    backgroundColor: macOSColors.background.base
+    backgroundColor: "transparent"
   },
   inlineHeader: {
     paddingHorizontal: 12,
@@ -696,19 +708,21 @@ const styles = StyleSheet.create({
     borderBottomColor: macOSColors.border.default,
     backgroundColor: macOSColors.background.card
   },
+  // Night chrome — the header is glass over the star field, so the search
+  // field and action chips sit on the Everlights dark-glass fill.
   headerSearchContainer: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: macOSColors.background.input,
-    borderRadius: 10,
+    backgroundColor: night.color.surfaceElevated,
+    borderRadius: night.radius.row,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     paddingHorizontal: 12,
     paddingVertical: 5
   },
   headerSearchInput: {
     flex: 1,
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontSize: 13,
     marginLeft: 6,
     paddingVertical: 2
@@ -724,15 +738,15 @@ const styles = StyleSheet.create({
     width: 32,
     height: 32,
     borderRadius: 8,
-    backgroundColor: macOSColors.background.hover,
+    backgroundColor: night.color.buttonSurface,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     alignItems: "center",
     justifyContent: "center"
   },
   activeFilterButton: {
-    backgroundColor: macOSColors.semantic.infoBackground,
-    borderColor: macOSColors.semantic.info + "40"
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong
   }
 });
 

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

@@ -1,7 +1,7 @@
 "use strict";
 
 import { StyleSheet, Text, TouchableOpacity } from "react-native";
-import { macOSColors } from "@buoy-gg/shared-ui";
+import { night } from "@buoy-gg/shared-ui";
 import { useOverrideRules } from "../hooks/useOverrideRules";
 import { useSelectedNetworkEventId } from "../hooks/useNetworkSelection";
 import { ruleMatches } from "../overrides/matchRule";
@@ -76,24 +76,27 @@ export function NetworkOverrideHeaderButton({
   });
 }
 const styles = StyleSheet.create({
+  // Night: the header's dark-glass chip, with the accent label the night
+  // language gives labelled actions (plate + accent ink). Active keeps the
+  // warning tint — same "you are not seeing the truth" signal as the flask.
   button: {
     paddingHorizontal: 10,
     paddingVertical: 6,
-    borderRadius: 6,
+    borderRadius: 8,
     borderWidth: 1,
-    borderColor: macOSColors.border.input,
-    backgroundColor: macOSColors.background.input
+    borderColor: night.color.border,
+    backgroundColor: night.color.buttonSurface
   },
   buttonActive: {
-    borderColor: macOSColors.semantic.warning + "77",
-    backgroundColor: macOSColors.semantic.warningBackground
+    borderColor: night.color.warning + "77",
+    backgroundColor: night.color.warningSoft
   },
   label: {
     fontSize: 11,
     fontWeight: "700",
-    color: macOSColors.text.primary
+    color: night.color.accent
   },
   labelActive: {
-    color: macOSColors.semantic.warning
+    color: night.color.warning
   }
 });

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

@@ -1,7 +1,7 @@
 "use strict";
 
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { FlaskConical, macOSColors } from "@buoy-gg/shared-ui";
+import { FlaskConical, night } from "@buoy-gg/shared-ui";
 import { useOverrideRules } from "../hooks/useOverrideRules";
 
 /**
@@ -32,7 +32,7 @@ export function NetworkOverridesButton({
     accessibilityLabel: active ? `Response overrides — ${activeCount} active` : "Response overrides",
     children: [/*#__PURE__*/_jsx(FlaskConical, {
       size: 14,
-      color: active ? macOSColors.semantic.warning : macOSColors.text.secondary
+      color: active ? night.color.warning : night.color.textSecondary
     }), active ? /*#__PURE__*/_jsx(View, {
       style: styles.badge,
       children: /*#__PURE__*/_jsx(Text, {
@@ -53,15 +53,15 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: macOSColors.background.hover,
+    backgroundColor: night.color.buttonSurface,
     borderWidth: 1,
-    borderColor: macOSColors.border.default
+    borderColor: night.color.border
   },
   // Active fills the whole box, the way the power toggle goes green — the
   // warning now reads at a glance instead of as a tinted glyph.
   buttonActive: {
-    backgroundColor: macOSColors.semantic.warningBackground,
-    borderColor: macOSColors.semantic.warning + "77"
+    backgroundColor: night.color.warningSoft,
+    borderColor: night.color.warning + "77"
   },
   badge: {
     position: "absolute",
@@ -75,11 +75,11 @@ const styles = StyleSheet.create({
     paddingHorizontal: 3,
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: macOSColors.semantic.warning
+    backgroundColor: night.color.warning
   },
   badgeText: {
     fontSize: 8,
     fontWeight: "800",
-    color: macOSColors.background.base
+    color: "#000000"
   }
 });

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

@@ -5,7 +5,7 @@ import { flagsForEventId, networkSavedStore } from "../utils/networkSavedStore";
 import { overrideRulesStore } from "../overrides/overrideRulesStore";
 import { draftFromEvent } from "../overrides/presets";
 import { inspectEngine } from "../overrides/engine";
-import { getNetworkListenerCount, isNetworkListening } from "../utils/networkListener";
+import { getNetworkListenerCount, isNetworkInterceptionLive, isNetworkListening } from "../utils/networkListener";
 import { approxJsonSize, isOverWireBudget } from "@buoy-gg/shared-ui";
 
 /**
@@ -361,22 +361,30 @@ export const networkSyncAdapter = {
   // flags, and a total snapshot budget so the list degrades instead of the
   // whole panel being dropped at the emit layer.
   version: 5,
-  getSnapshot: () => ({
-    events: fitEventsToBudget(networkEventStore.getEvents()),
-    /**
-     * Response-override rules live on the DEVICE — that's the only place they
-     * can run, since a rule is applied inside the app's own XMLHttpRequest.
-     * Remote surfaces mirror this and forward their edits back as actions.
-     */
-    overrides: stripLargeRuleBodies(overrideRulesStore.getState()),
-    // 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: toWireEvent(record.event).event
-    }))
-  }),
+  getSnapshot: () => {
+    // Piggyback the interception health check on the watch loop: while a
+    // dashboard/MCP watch is open this runs continuously, so a clobbered
+    // fetch/XHR patch (see networkListener.startListening) heals within one
+    // snapshot tick instead of staying dead for the session. Two property
+    // reads when healthy.
+    networkEventStore.ensureInterception();
+    return {
+      events: fitEventsToBudget(networkEventStore.getEvents()),
+      /**
+       * Response-override rules live on the DEVICE — that's the only place they
+       * can run, since a rule is applied inside the app's own XMLHttpRequest.
+       * Remote surfaces mirror this and forward their edits back as actions.
+       */
+      overrides: stripLargeRuleBodies(overrideRulesStore.getState()),
+      // 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: toWireEvent(record.event).event
+      }))
+    };
+  },
   subscribe: onChange => {
     // Pinning with no traffic in flight still has to reach the dashboard, so
     // both stores drive the snapshot.
@@ -587,10 +595,22 @@ export const networkSyncAdapter = {
       } catch {
         /* no interceptable runtime here */
       }
+      // `interceptorInstalled` is the listener's own flag; `interceptorLive`
+      // is whether the interceptors are actually reachable through the global
+      // chain. installed:true + live:false = something re-assigned fetch/XHR
+      // over the interceptor (it self-heals on the next subscribe/snapshot —
+      // see ensureInterception).
+      let interceptorLive = null;
+      try {
+        interceptorLive = isNetworkInterceptionLive();
+      } catch {
+        /* no interceptable runtime here */
+      }
       return {
         capturing: subscribers > 0,
         subscribers,
         interceptorInstalled,
+        interceptorLive,
         listenerCount,
         eventCount: networkEventStore.getEvents().length
       };

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

@@ -172,6 +172,32 @@ class NetworkEventStore extends BaseEventStore {
     return this.rawListenerUnsubscribe !== null;
   }
 
+  /**
+   * Re-assert the interceptor if something re-assigned fetch/XHR since capture
+   * started (Expo's runtime, RN DevTools, a second dev server's tooling — see
+   * networkListener.startListening). A no-op costing two property reads when
+   * everything is healthy, and a no-op entirely unless this store is actively
+   * capturing — a mirror-mode dashboard must never install an interceptor in
+   * its own process.
+   */
+  ensureInterception() {
+    if (!this.isCapturing()) return;
+    networkListener().startListening();
+  }
+
+  /**
+   * Every new consumer — the Network modal opening, a badge mounting, a
+   * dashboard watch attaching — is a chance to notice and repair a clobbered
+   * interceptor, which matters because a long-lived watch can hold the
+   * subscriber count above zero for the whole session (so the 0→1
+   * startCapturing path would never run again).
+   */
+  subscribeToEvents(listener) {
+    const unsubscribe = super.subscribeToEvents(listener);
+    this.ensureInterception();
+    return unsubscribe;
+  }
+
   /**
    * Process a network listener event
    */