@buoy-gg/network 7.0.13 → 7.0.14

package/lib/commonjs/index.js

@@ -9,12 +9,24 @@ Object.defineProperty(exports, "DEFAULT_SETTLE_MS", {
     return _networkSelectionStore.DEFAULT_SETTLE_MS;
   }
 });
+Object.defineProperty(exports, "FREE_TIER_OVERRIDE_LIMIT", {
+  enumerable: true,
+  get: function () {
+    return _types.FREE_TIER_RULE_LIMIT;
+  }
+});
 Object.defineProperty(exports, "FREE_TIER_SAVED_LIMIT", {
   enumerable: true,
   get: function () {
     return _networkSavedStore.FREE_TIER_SAVED_LIMIT;
   }
 });
+Object.defineProperty(exports, "MAX_OVERRIDE_RULES", {
+  enumerable: true,
+  get: function () {
+    return _types.MAX_RULES;
+  }
+});
 Object.defineProperty(exports, "MAX_PINNED", {
   enumerable: true,
   get: function () {
@@ -75,6 +87,18 @@ Object.defineProperty(exports, "NetworkToolView", {
     return _NetworkModal.NetworkToolView;
   }
 });
+Object.defineProperty(exports, "OVERRIDE_STATUS_MAX", {
+  enumerable: true,
+  get: function () {
+    return _types.STATUS_MAX;
+  }
+});
+Object.defineProperty(exports, "OVERRIDE_STATUS_MIN", {
+  enumerable: true,
+  get: function () {
+    return _types.STATUS_MIN;
+  }
+});
 Object.defineProperty(exports, "TickProvider", {
   enumerable: true,
   get: function () {
@@ -93,6 +117,12 @@ Object.defineProperty(exports, "createNetworkTool", {
     return _preset.createNetworkTool;
   }
 });
+Object.defineProperty(exports, "draftFromEvent", {
+  enumerable: true,
+  get: function () {
+    return _presets.draftFromEvent;
+  }
+});
 Object.defineProperty(exports, "flagsForEventId", {
   enumerable: true,
   get: function () {
@@ -171,6 +201,12 @@ Object.defineProperty(exports, "networkToolPreset", {
     return _preset.networkToolPreset;
   }
 });
+Object.defineProperty(exports, "overrideRulesStore", {
+  enumerable: true,
+  get: function () {
+    return _overrideRulesStore.overrideRulesStore;
+  }
+});
 Object.defineProperty(exports, "removeAllNetworkListeners", {
   enumerable: true,
   get: function () {
@@ -246,6 +282,9 @@ var _withPinnedFirst = require("./network/utils/withPinnedFirst");
 var _networkSelectionStore = require("./network/utils/networkSelectionStore");
 var _useTickEveryMinute = require("./network/hooks/useTickEveryMinute");
 var _formatting = require("./network/utils/formatting");
+var _overrideRulesStore = require("./network/overrides/overrideRulesStore");
+var _presets = require("./network/overrides/presets");
+var _types = require("./network/overrides/types");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _networkSyncAdapter = require("./network/sync/networkSyncAdapter");
 var _networkBodyResolver = require("./network/sync/networkBodyResolver");

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

@@ -74,8 +74,11 @@ const TimingPhases = ({
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: [styles.phaseBar, {
             backgroundColor: phase.color,
-            // A floor so a 1ms phase is still a visible tick.
-            width: `${Math.max(1, phase.value / span * 100)}%`
+            // A floor so a 1ms phase is still a visible tick, and a
+            // ceiling because `total` and the phases are measured at
+            // different points — ttfb can exceed event.duration, which
+            // would push the bar past its track and over the label.
+            width: `${Math.min(100, Math.max(1, phase.value / span * 100))}%`
           }]
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -443,6 +446,15 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
               style: styles.httpDurationText,
               children: (0, _formatting.formatDuration)(event.duration)
             })]
+          }) : null, event.override ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.overrideBadge,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FlaskConical, {
+              size: 10,
+              color: _sharedUi.macOSColors.semantic.warning
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.overrideBadgeText,
+              children: event.override.ruleName || "Overridden"
+            })]
           }) : null, isPro ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InlineCopyButton
           // LAZY, not `getFullRequestDetails()`. CopyButton resolves a
           // function value at press time; calling it here instead
@@ -796,6 +808,20 @@ const styles = _reactNative.StyleSheet.create({
     color: _sharedUi.macOSColors.text.secondary,
     fontSize: 11
   },
+  overrideBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 6,
+    paddingVertical: 3,
+    borderRadius: 4,
+    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground
+  },
+  overrideBadgeText: {
+    color: _sharedUi.macOSColors.semantic.warning,
+    fontSize: 10,
+    fontWeight: "700"
+  },
   copyFullButton: {
     marginLeft: "auto",
     flexShrink: 0,
@@ -948,7 +974,8 @@ const styles = _reactNative.StyleSheet.create({
     height: 7,
     borderRadius: 4,
     backgroundColor: _sharedUi.macOSColors.background.hover,
-    justifyContent: "center"
+    justifyContent: "center",
+    overflow: "hidden"
   },
   phaseBar: {
     height: 7,

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

@@ -173,6 +173,7 @@ function NetworkEventItemCompact({
   onPress,
   pinned = false,
   saved = false,
+  overridden = false,
   onLongPress
 }) {
   const statusColor = getStatusColor(event.status, event.error);
@@ -211,6 +212,9 @@ function NetworkEventItemCompact({
       }) : null, saved ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Bookmark, {
         size: 10,
         color: _sharedUi.macOSColors.semantic.debug
+      }) : null, overridden || event.override ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FlaskConical, {
+        size: 10,
+        color: _sharedUi.macOSColors.semantic.warning
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIndicator, {
         event: event,
         isPending: isPending,

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

@@ -222,7 +222,8 @@ function NetworkHeaderCopyButton({
   ignoredPatterns,
   copySettings,
   paused,
-  onUpgradePress
+  onUpgradePress,
+  label
 }) {
   const hasEvents = (0, _useNetworkHasMatches.useNetworkHasMatches)({
     filter,
@@ -230,15 +231,18 @@ function NetworkHeaderCopyButton({
     paused
   });
   if (!isPro) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
       "sentry-label": "ignore copy pro",
       onPress: onUpgradePress,
-      style: [styles.headerActionButton, !hasEvents && styles.headerActionButtonDisabled],
+      style: [label ? styles.copyMenuRow : styles.headerActionButton, !hasEvents && styles.headerActionButtonDisabled],
       disabled: !hasEvents,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Copy, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Copy, {
         size: 14,
         color: hasEvents ? _sharedUi.macOSColors.text.secondary : _sharedUi.macOSColors.text.disabled
-      })
+      }), label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.copyMenuLabel,
+        children: label
+      }) : null]
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CopyButton
@@ -247,7 +251,9 @@ function NetworkHeaderCopyButton({
   , {
     value: () => (0, _generateNetworkCopyText.generateNetworkCopyText)((0, _filterNetworkEvents.filterNetworkEvents)((0, _filterNetworkEvents.applyIgnoredPatterns)(_networkEventStore.networkEventStore.getEvents(), ignoredPatterns), filter), copySettings),
     size: 14,
-    buttonStyle: styles.headerActionButton,
+    label: label,
+    buttonStyle: label ? styles.copyMenuRow : styles.headerActionButton,
+    labelStyle: styles.copyMenuLabel,
     colors: {
       idle: hasEvents ? _sharedUi.macOSColors.text.secondary : _sharedUi.macOSColors.text.disabled,
       success: _sharedUi.macOSColors.semantic.success,
@@ -257,6 +263,20 @@ function NetworkHeaderCopyButton({
   });
 }
 const styles = _reactNative.StyleSheet.create({
+  /** The overflow-menu variant: a full-width row, matching the other items. */
+  copyMenuRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingHorizontal: 6,
+    paddingVertical: 11,
+    justifyContent: "flex-start"
+  },
+  copyMenuLabel: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: _sharedUi.macOSColors.text.primary
+  },
   headerChipRow: {
     flexDirection: "row",
     alignItems: "center",

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

@@ -0,0 +1,183 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NetworkHeaderMenu = NetworkHeaderMenu;
+exports.NetworkHeaderMenuButton = NetworkHeaderMenuButton;
+exports.NetworkHeaderMenuItem = NetworkHeaderMenuItem;
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * The header's overflow menu.
+ *
+ * The toolbar had grown to three status badges and six icon buttons, which on a
+ * 402pt screen meant the pending badge was being overlapped by the search
+ * button. Something had to leave, and the rule for deciding what is:
+ *
+ *   **A control that COMMUNICATES STATE stays visible. A destination or a rare
+ *   action goes in the menu.**
+ *
+ * That keeps the power toggle (are we capturing?), the overrides flask (is the
+ * app being lied to, and how many rules?), the status badges (what happened)
+ * and Clear (the reproduce loop is clear → repro → read, and burying the first
+ * step doubles it). Search stays because it's the only way through 500 rows.
+ *
+ * Filters, Saved and Copy leave. Filters is the interesting one — it does show
+ * state, so the ⋯ carries a dot when a filter is applied rather than hiding
+ * that fact.
+ */
+
+function NetworkHeaderMenuButton({
+  onPress,
+  isOpen,
+  hasIndicator
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    onPress: onPress,
+    "sentry-label": "ignore toggle header menu",
+    accessibilityLabel: isOpen ? "Close menu" : "More actions",
+    style: [styles.button, isOpen && styles.buttonOpen],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.dots,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.dot, isOpen && styles.dotOpen]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.dot, isOpen && styles.dotOpen]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.dot, isOpen && styles.dotOpen]
+      })]
+    }), hasIndicator ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.indicator
+    }) : null]
+  });
+}
+/**
+ * The dropdown itself, rendered in the modal BODY rather than the header —
+ * the header is a fixed-height row and anything overflowing it is clipped, so
+ * a panel anchored to the top-right of the body lands exactly where a dropdown
+ * from the ⋯ should appear.
+ */
+function NetworkHeaderMenu({
+  onClose,
+  children
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.overlay,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      style: styles.backdrop,
+      activeOpacity: 1,
+      onPress: onClose,
+      "sentry-label": "ignore dismiss header menu"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.panel,
+      children: children
+    })]
+  });
+}
+function NetworkHeaderMenuItem({
+  icon,
+  label,
+  detail,
+  onPress
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    onPress: onPress,
+    "sentry-label": "ignore header menu item",
+    style: styles.item,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.itemIcon,
+      children: icon
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.itemLabel,
+      children: label
+    }), detail ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.itemDetail,
+      children: detail
+    }) : null]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  // The same 32×32 box every other header action uses, minus the fill and
+  // border. Padding alone gave a 3pt-wide hit area AND a shorter box than its
+  // neighbours, which is why the dots sat high in the row; a fixed square
+  // centres the glyph on the same baseline as the search/power/clear icons.
+  button: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  // Only lit while the menu is down — the button is the one thing not covered
+  // by the backdrop, so it has to look like the thing that is currently open.
+  buttonOpen: {
+    backgroundColor: _sharedUi.macOSColors.background.hover
+  },
+  dots: {
+    flexDirection: "column",
+    gap: 2.5,
+    alignItems: "center"
+  },
+  dot: {
+    width: 3,
+    height: 3,
+    borderRadius: 2,
+    backgroundColor: _sharedUi.macOSColors.text.secondary
+  },
+  dotOpen: {
+    backgroundColor: _sharedUi.macOSColors.text.primary
+  },
+  indicator: {
+    position: "absolute",
+    // Sits just up-and-right of the top dot. Anchored to the 32pt box's corner
+    // it would float off on its own, since the dot column is only 3pt wide.
+    top: 6,
+    right: 8,
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: _sharedUi.macOSColors.semantic.info
+  },
+  overlay: {
+    ..._sharedUi.absoluteFill,
+    zIndex: 50
+  },
+  backdrop: {
+    ..._sharedUi.absoluteFill,
+    backgroundColor: "rgba(0,0,0,0.5)"
+  },
+  panel: {
+    position: "absolute",
+    top: 6,
+    right: 8,
+    minWidth: 196,
+    paddingVertical: 4,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.hover,
+    backgroundColor: _sharedUi.macOSColors.background.card
+  },
+  item: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 11
+  },
+  itemIcon: {
+    width: 16,
+    alignItems: "center"
+  },
+  itemLabel: {
+    flex: 1,
+    fontSize: 13,
+    fontWeight: "600",
+    color: _sharedUi.macOSColors.text.primary
+  },
+  itemDetail: {
+    fontSize: 11,
+    color: _sharedUi.macOSColors.text.muted
+  }
+});

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

@@ -11,6 +11,8 @@ var _NetworkEventItemCompact = require("./NetworkEventItemCompact");
 var _NetworkUpgradeBanner = require("./NetworkUpgradeBanner");
 var _useNetworkEventList = require("../hooks/useNetworkEventList");
 var _useNetworkSaved = require("../hooks/useNetworkSaved");
+var _useOverrideRules = require("../hooks/useOverrideRules");
+var _matchRule = require("../overrides/matchRule");
 var _withPinnedFirst = require("../utils/withPinnedFirst");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -91,6 +93,62 @@ function PinnedSection({
     }, event.id))]
   });
 }
+
+/**
+ * The OVERRIDDEN strip, above the pins.
+ *
+ * An overridden request is the one thing in this list that isn't true — the app
+ * got something the server never sent. That has to be impossible to miss, and a
+ * glyph on a row twenty scroll-positions down isn't. It sits ABOVE pins because
+ * a stale override explains a bug, whereas a pin only marks one.
+ *
+ * Rows are matched against the RULES rather than filtered on the `override`
+ * mark, so the request you built a rule from hoists immediately instead of
+ * waiting for the endpoint to be called again.
+ *
+ * The header button is PAUSE, not "Manage". Flipping overrides off and on is by
+ * far the most repeated action in a testing session — force the failure, check
+ * the UI, turn it off, check the happy path, turn it back on — and it used to
+ * cost a trip to another screen each way. The manager is still one tap away on
+ * the toolbar; it just isn't the thing you reach for twenty times an hour.
+ */
+function OverriddenSection({
+  events,
+  onEventPress,
+  onLongPress,
+  savedLiveIds,
+  paused,
+  onTogglePaused
+}) {
+  if (events.length === 0) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.overriddenSection, paused && styles.overriddenSectionOff],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.overriddenHeader,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FlaskConical, {
+        size: 11,
+        color: paused ? _sharedUi.macOSColors.text.muted : _sharedUi.macOSColors.semantic.warning
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.overriddenTitle, paused && styles.overriddenTitleOff],
+        children: paused ? `PAUSED · ${events.length}` : `OVERRIDDEN · ${events.length}`
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        onPress: onTogglePaused,
+        "sentry-label": "ignore pause overrides",
+        style: styles.overriddenManage,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.overriddenManageText, paused && styles.overriddenTitleOff],
+          children: paused ? "Resume" : "Pause"
+        })
+      })]
+    }), events.map(event => /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkEventItemCompact.NetworkEventItemCompact, {
+      event: event,
+      onPress: onEventPress,
+      onLongPress: onLongPress,
+      overridden: true,
+      saved: savedLiveIds.has(event.id)
+    }, event.id))]
+  });
+}
 function NetworkListScreen({
   visible,
   paused,
@@ -122,6 +180,15 @@ function NetworkListScreen({
     clearPinned
   } = (0, _useNetworkSaved.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
+  } = (0, _useOverrideRules.useOverrideRules)();
+
   // Stable identity: handed to memoized rows.
   const handleLongPress = (0, _react.useCallback)(event => {
     togglePin(event);
@@ -136,6 +203,17 @@ function NetworkListScreen({
     pinned,
     rest
   } = (0, _withPinnedFirst.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.
+  // Paused rules still populate the strip — that's how you find the thing you
+  // paused in order to resume it. The header says PAUSED instead.
+  const activeRules = rules.filter(rule => rule.enabled && !isRuleSpent(rule));
+  const isOverridden = event => activeRules.some(rule => (0, _matchRule.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 renderItem = ({
     item
@@ -167,14 +245,21 @@ function NetworkListScreen({
         style: styles.disabledText,
         children: "Network interception is disabled"
       })]
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(PinnedSection, {
-      events: pinned,
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(OverriddenSection, {
+      events: overridden,
+      onEventPress: onEventPress,
+      onLongPress: handleLongPress,
+      savedLiveIds: savedLiveIds,
+      paused: !overridesEnabled,
+      onTogglePaused: () => setEnabled(!overridesEnabled)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PinnedSection, {
+      events: pinnedRows,
       onEventPress: onEventPress,
       onLongPress: handleLongPress,
       savedLiveIds: savedLiveIds,
       onClearPinned: clearPinned
-    }), rest.length > 0 || hasLockedEvents ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
-      data: rest,
+    }), restRows.length > 0 || hasLockedEvents ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+      data: restRows,
       renderItem: renderItem,
       keyExtractor: keyExtractor,
       contentContainerStyle: styles.listContent,
@@ -203,7 +288,7 @@ function NetworkListScreen({
       extraData: savedLiveIds,
       "sentry-label": "ignore network events list",
       ListFooterComponent: renderListFooter
-    }) : pinned.length > 0 ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyState, {
+    }) : pinnedRows.length > 0 || overridden.length > 0 ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyState, {
       isEnabled: isEnabled
     })]
   });
@@ -218,6 +303,42 @@ const styles = _reactNative.StyleSheet.create({
    * 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: {
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.macOSColors.semantic.warning + "44",
+    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground
+  },
+  overriddenSectionOff: {
+    borderBottomColor: _sharedUi.macOSColors.border.default,
+    backgroundColor: _sharedUi.macOSColors.background.card
+  },
+  overriddenTitleOff: {
+    color: _sharedUi.macOSColors.text.muted
+  },
+  overriddenHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 4
+  },
+  overriddenTitle: {
+    flex: 1,
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.8,
+    color: _sharedUi.macOSColors.semantic.warning
+  },
+  overriddenManage: {
+    paddingHorizontal: 6,
+    paddingVertical: 2
+  },
+  overriddenManageText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: _sharedUi.macOSColors.semantic.warning
+  },
   pinnedSection: {
     borderBottomWidth: 1,
     borderBottomColor: _sharedUi.macOSColors.border.default,