@buoy-gg/network 7.0.15 → 7.0.17

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

@@ -0,0 +1,131 @@
+"use strict";
+
+/**
+ * NetworkOverrideHeaderButton.web — DOM twin of
+ * NetworkOverrideHeaderButton.tsx.
+ *
+ * The Override action, in the request-detail header. A labelled word rather
+ * than an icon — it's the least familiar action in the tool, and "Override"
+ * spelled out is the entire explanation. A self-subscribing leaf: the
+ * selected id and the rule list are subscribed HERE so stepping between
+ * requests doesn't rebuild the header around a new prop.
+ *
+ * It lights up while a rule covers the request you're looking at — the same
+ * warning tint the OVERRIDDEN strip and the toolbar flask use. Tapping it
+ * goes straight to the Overrides screen with the rule open: a new one
+ * prefilled from this request (`draftFromEvent`), or the existing one if
+ * something already covers it (first enabled match wins, so stacking a
+ * second rule the first would shadow is never offered). (Native comments.)
+ *
+ * REUSED, not forked (all platform-free): `useOverrideRules`,
+ * `useSelectedNetworkEventId`, `ruleMatches`, `draftFromEvent`,
+ * `networkEventStore`, `networkSavedStore`.
+ *
+ * shared-ui RN chrome is replicated as DOM with provenance:
+ *  - `macOSColors` — inlined verbatim subset from
+ *    shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts.
+ *
+ * @platform React DOM Web
+ */
+
+import { useOverrideRules } from "../hooks/useOverrideRules";
+import { useSelectedNetworkEventId } from "../hooks/useNetworkSelection";
+import { ruleMatches } from "../overrides/matchRule";
+import { draftFromEvent } from "../overrides/presets";
+import { networkEventStore } from "../utils/networkEventStore";
+import { networkSavedStore } from "../utils/networkSavedStore";
+
+/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */
+import { jsx as _jsx } from "react/jsx-runtime";
+const macOSColors = {
+  background: {
+    input: "#26262A"
+  },
+  border: {
+    input: "#3D3D42"
+  },
+  text: {
+    primary: "#F5F5F7"
+  },
+  semantic: {
+    warning: "#FFEB3B",
+    warningBackground: "rgba(255, 235, 59, 0.15)"
+  }
+};
+export function NetworkOverrideHeaderButton({
+  onOpen
+}) {
+  const eventId = useSelectedNetworkEventId();
+  const {
+    rules,
+    isRuleSpent
+  } = useOverrideRules();
+
+  // Resolved here rather than held as a prop: the live store has the fresh
+  // copy while a request is in flight, and the saved store is the only copy
+  // once it has been cleared or aged out. (Native comment.)
+  const event = eventId ? networkEventStore.getEvents().find(e => e.id === eventId) ?? networkSavedStore.getEventById(eventId) : null;
+  const existing = event ? rules.find(rule => rule.enabled && !isRuleSpent(rule) && ruleMatches(rule, event.url, String(event.method || "GET"))) ?? null : null;
+  const active = existing !== null;
+  const handlePress = () => {
+    if (!event) return;
+    if (existing) {
+      // Editing what's already there, rather than stacking a second rule the
+      // first would shadow — first enabled match wins.
+      const {
+        id,
+        hits: _h,
+        seen: _s,
+        createdAt: _c,
+        ...draft
+      } = existing;
+      onOpen(draft, id);
+      return;
+    }
+    onOpen(draftFromEvent(event));
+  };
+  return /*#__PURE__*/_jsx("button", {
+    type: "button",
+    onClick: handlePress,
+    "aria-label": active ? "Edit the override on this request" : "Override this request",
+    style: {
+      ...styles.button,
+      ...(active ? styles.buttonActive : null)
+    },
+    children: /*#__PURE__*/_jsx("span", {
+      style: {
+        ...styles.label,
+        ...(active ? styles.labelActive : null)
+      },
+      children: "Override"
+    })
+  });
+}
+
+// Values mirror the native StyleSheet block 1:1.
+const styles = {
+  button: {
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "6px 10px",
+    borderRadius: 6,
+    border: `1px solid ${macOSColors.border.input}`,
+    backgroundColor: macOSColors.background.input,
+    cursor: "pointer",
+    margin: 0,
+    boxSizing: "border-box"
+  },
+  buttonActive: {
+    border: `1px solid ${macOSColors.semantic.warning}77`,
+    backgroundColor: macOSColors.semantic.warningBackground
+  },
+  label: {
+    fontSize: 11,
+    fontWeight: 700,
+    color: macOSColors.text.primary,
+    fontFamily: "inherit"
+  },
+  labelActive: {
+    color: macOSColors.semantic.warning
+  }
+};

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

@@ -0,0 +1,141 @@
+"use strict";
+
+/**
+ * NetworkOverridesButton.web — DOM twin of NetworkOverridesButton.tsx.
+ *
+ * Header button for the Overrides screen, and the always-visible "overrides
+ * are active" indicator. A self-subscribing LEAF, like the other live header
+ * pieces — the rule list changes on its own schedule (every hit bumps a
+ * counter) and the modal shell has no business re-rendering for it.
+ *
+ * The active tint is not decoration: a rule left enabled from yesterday makes
+ * the app behave wrongly in a way that looks exactly like a real bug, so the
+ * tool keeps saying so from the top level. (Native comment.)
+ *
+ * REUSED, not forked: `useOverrideRules` (platform-free).
+ *
+ * shared-ui RN chrome is replicated as DOM with provenance:
+ *  - `macOSColors` — inlined verbatim subset from
+ *    shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts.
+ *  - `FlaskConical` — inline lucide SVG (shared-ui icons are lucide
+ *    re-exports).
+ *
+ * @platform React DOM Web
+ */
+
+import { useOverrideRules } from "../hooks/useOverrideRules";
+
+/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const macOSColors = {
+  background: {
+    base: "#0A0A0C",
+    hover: "#1D1D1F"
+  },
+  border: {
+    default: "#2D2D2F"
+  },
+  text: {
+    secondary: "#A1A1A6"
+  },
+  semantic: {
+    warning: "#FFEB3B",
+    warningBackground: "rgba(255, 235, 59, 0.15)"
+  }
+};
+const FlaskConical = ({
+  size = 14,
+  color
+}) => /*#__PURE__*/_jsxs("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: [/*#__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"
+  })]
+});
+export function NetworkOverridesButton({
+  onPress
+}) {
+  const {
+    activeCount
+  } = useOverrideRules();
+  const active = activeCount > 0;
+  return /*#__PURE__*/_jsxs("button", {
+    type: "button",
+    onClick: onPress,
+    style: {
+      ...styles.button,
+      ...(active ? styles.buttonActive : null)
+    },
+    "aria-label": active ? `Response overrides — ${activeCount} active` : "Response overrides",
+    children: [/*#__PURE__*/_jsx(FlaskConical, {
+      size: 14,
+      color: active ? macOSColors.semantic.warning : macOSColors.text.secondary
+    }), active ? /*#__PURE__*/_jsx("span", {
+      style: styles.badge,
+      children: /*#__PURE__*/_jsx("span", {
+        style: styles.badgeText,
+        children: activeCount
+      })
+    }) : null]
+  });
+}
+
+// Values mirror the native StyleSheet block 1:1: the header's standard 32×32
+// action box; active fills the whole box the way the power toggle goes green,
+// with the count badge INSIDE the box.
+const styles = {
+  button: {
+    position: "relative",
+    display: "inline-flex",
+    width: 32,
+    height: 32,
+    boxSizing: "border-box",
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: macOSColors.background.hover,
+    border: `1px solid ${macOSColors.border.default}`,
+    cursor: "pointer",
+    padding: 0,
+    margin: 0
+  },
+  buttonActive: {
+    backgroundColor: macOSColors.semantic.warningBackground,
+    border: `1px solid ${macOSColors.semantic.warning}77`
+  },
+  badge: {
+    position: "absolute",
+    top: 1,
+    right: 1,
+    minWidth: 12,
+    height: 12,
+    borderRadius: 6,
+    padding: "0 3px",
+    boxSizing: "border-box",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: macOSColors.semantic.warning
+  },
+  badgeText: {
+    fontSize: 8,
+    fontWeight: 800,
+    color: macOSColors.background.base,
+    lineHeight: 1
+  }
+};

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

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useState } from "react";
 import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { AlertTriangle, EmptyState, FlaskConical, Plus, macOSColors } from "@buoy-gg/shared-ui";
+import { AlertCircle, AlertTriangle, DevToolsCard, EmptyState, FlaskConical, MethodBadge, Plus, Trash2, macOSColors } from "@buoy-gg/shared-ui";
 import { useOverrideRules } from "../hooks/useOverrideRules";
 import { NetworkOverrideEditor } from "./NetworkOverrideEditor";
 import { overrideRulesStore } from "../overrides/overrideRulesStore";
@@ -37,101 +37,111 @@ function toDraft(rule) {
   return draft;
 }
 
-/** Plain-language names for statuses, so a row never reads as a bare number. */
-const STATUS_NAMES = {
-  200: "Success",
-  201: "Created",
-  400: "Bad request",
-  401: "Unauthorized",
-  403: "Forbidden",
-  404: "Not found",
-  429: "Rate limited",
-  500: "Server error",
-  503: "Unavailable"
-};
-
-/** What the rule DOES, in the same words the editor uses. */
-function outcomeLine(rule) {
-  const parts = [];
-  if (rule.kind === "respond") {
-    const status = rule.status ?? 200;
-    const name = STATUS_NAMES[status];
-    parts.push(name ? `${name} ${status}` : String(status));
-  } else if (rule.kind === "fail") {
-    parts.push(rule.failKind === "timeout" ? "Timeout" : "Offline");
-  } else {
-    parts.push("Real response");
-  }
-  if (rule.delayMs) parts.push(`${rule.delayMs / 1000}s`);
-  if (rule.alternate) parts.push("every other");else if (rule.times === 1) parts.push("once");else if (typeof rule.times === "number") parts.push(`${rule.times}×`);
-  return parts.join(" · ");
-}
-
 /**
  * Where the rule applies — PATH only, not the whole URL.
  *
  * The host is the same for every rule in a typical app, so showing it pushes
- * the part that differs off the end of the line.
+ * the part that differs off the end of the line. Same reasoning as the request
+ * row's `displayUrl`.
  */
-function scopeLine(rule) {
-  const method = rule.methods?.length ? rule.methods.join("/") : "Any";
-  let path = rule.urlPattern;
+function patternPath(rule) {
+  const path = rule.urlPattern;
   const schemeEnd = path.indexOf("://");
-  if (schemeEnd !== -1) {
-    const slash = path.indexOf("/", schemeEnd + 3);
-    path = slash === -1 ? path.slice(schemeEnd + 3) : path.slice(slash);
-  }
-  return `${method} ${path}`;
+  if (schemeEnd === -1) return path;
+  const slash = path.indexOf("/", schemeEnd + 3);
+  return slash === -1 ? path.slice(schemeEnd + 3) : path.slice(slash);
+}
+
+/** Delay and lifetime, in the editor's own words. Empty for a plain rule. */
+function extrasLine(rule) {
+  const parts = [];
+  if (rule.delayMs) parts.push(`${rule.delayMs / 1000}s delay`);
+  if (rule.alternate) parts.push("every other");else if (rule.times === 1) parts.push("once");else if (typeof rule.times === "number") parts.push(`${rule.times}×`);
+  return parts.join(" · ");
+}
+
+/** The outcome's color, on the request list's status scale — a forced 500
+ * should look exactly like a real one. */
+function ruleAccent(rule) {
+  if (rule.kind === "fail") return macOSColors.semantic.error;
+  if (rule.kind === "delay") return macOSColors.semantic.info;
+  const status = rule.status ?? 200;
+  if (status >= 200 && status < 300) return macOSColors.semantic.success;
+  if (status >= 300 && status < 400) return macOSColors.semantic.info;
+  return macOSColors.semantic.error;
 }
 
 /**
- * One rule. Toggle · two lines · hit count, and nothing else.
- *
- * The pencil and trash icons are gone: the row itself opens the editor (where
- * Delete now lives), and three tap targets in a 44pt row is a config table, not
- * a list. `hits` stays as the only right-hand element because "my glob never
- * matched" is the most common rule bug and the count is how you find out.
+ * One rule, in the request row's visual language — the same card, method badge,
+ * monospace path and status colors as `NetworkEventItemCompact`, so a rule
+ * reads as "the request it will produce". What's different is what a rule
+ * needs: a trash instead of the type chip and chevron, and the outcome color
+ * only floods the left edge while the rule is live. There's no per-rule
+ * on/off — a rule you don't want anymore gets deleted, and pausing everything
+ * is the master bar's job.
  */
 function RuleRow({
   rule,
   spent,
-  onToggle,
-  onEdit
+  onEdit,
+  onDelete
 }) {
   const live = rule.enabled && !spent;
-  const accent = live ? macOSColors.semantic.warning : macOSColors.text.muted;
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.row,
-    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-      onPress: onToggle,
-      "sentry-label": "ignore toggle override rule",
-      accessibilityLabel: live ? "Turn rule off" : "Turn rule on",
-      style: [styles.toggle, live && {
-        borderColor: accent,
-        backgroundColor: `${accent}33`
-      }],
-      children: /*#__PURE__*/_jsx(View, {
-        style: [styles.toggleDot, {
-          backgroundColor: accent
-        }]
-      })
-    }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-      onPress: onEdit,
-      "sentry-label": "ignore edit override rule",
-      style: styles.rowBody,
+  const accent = ruleAccent(rule);
+  const extras = extrasLine(rule);
+  const method = rule.methods?.length ? rule.methods.join("/") : "ANY";
+  return /*#__PURE__*/_jsxs(DevToolsCard, {
+    onPress: onEdit,
+    style: styles.cardWrapper,
+    contentStyle: [styles.card, {
+      borderLeftColor: live ? accent : "transparent"
+    }],
+    children: [/*#__PURE__*/_jsx(MethodBadge, {
+      method: method,
+      size: "small"
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.cardMiddle,
       children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.rowTitle, !live && styles.rowTitleOff],
-        numberOfLines: 1,
-        children: outcomeLine(rule)
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.rowScope,
-        numberOfLines: 1,
-        children: scopeLine(rule)
-      })]
+        style: [styles.urlText, !live && styles.urlTextOff],
+        numberOfLines: 2,
+        children: patternPath(rule)
+      }), extras ? /*#__PURE__*/_jsx(Text, {
+        style: styles.extrasText,
+        children: extras
+      }) : null]
     }), rule.hits > 0 ? /*#__PURE__*/_jsx(Text, {
       style: styles.rowHits,
       children: rule.hits
-    }) : null]
+    }) : null, rule.kind === "fail" ? /*#__PURE__*/_jsxs(View, {
+      style: styles.failBadge,
+      children: [/*#__PURE__*/_jsx(AlertCircle, {
+        size: 10,
+        color: macOSColors.semantic.error
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.failText,
+        children: rule.failKind === "timeout" ? "TIMEOUT" : "OFFLINE"
+      })]
+    }) : /*#__PURE__*/_jsx(Text, {
+      style: [styles.statusText, {
+        color: accent
+      }],
+      children: rule.kind === "delay" ? "PASS" : String(rule.status ?? 200)
+    }), /*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: onDelete,
+      "sentry-label": "ignore delete override rule",
+      accessibilityLabel: "Delete rule",
+      hitSlop: {
+        top: 8,
+        bottom: 8,
+        left: 4,
+        right: 4
+      },
+      style: styles.rowDelete,
+      children: /*#__PURE__*/_jsx(Trash2, {
+        size: 13,
+        color: macOSColors.text.muted
+      })
+    })]
   });
 }
 /**
@@ -155,6 +165,7 @@ function OverridesBody({
   onUpgradePress,
   pendingDraft,
   onPendingConsumed,
+  backHandlerRef,
   applySafeAreaInset
 }) {
   const {
@@ -176,6 +187,20 @@ function OverridesBody({
     overrideRulesStore.noteHealthyLaunch();
   }, []);
 
+  // Back while editing means "back to the rule list", not "leave overrides" —
+  // see the prop's comment. Cleared on unmount so a hidden screen can't
+  // swallow back presses.
+  useEffect(() => {
+    if (!backHandlerRef) return;
+    backHandlerRef.current = editing ? () => {
+      setEditing(null);
+      return true;
+    } : null;
+    return () => {
+      backHandlerRef.current = null;
+    };
+  }, [backHandlerRef, editing]);
+
   /**
    * Open a rule for editing, pulling its body over if this surface doesn't have
    * it.
@@ -251,8 +276,12 @@ function OverridesBody({
   };
   const handleSave = () => {
     if (!editing) return;
+    // Saving always arms the rule. With no per-rule toggle, this is the ONLY
+    // way back on for a rule the free tier disabled or that used itself up —
+    // and nobody edits a rule they want to stay inert.
     const draft = {
       ...editing.draft,
+      enabled: true,
       urlPattern: editing.draft.urlPattern.trim()
     };
     if (!draft.urlPattern) return;
@@ -260,21 +289,14 @@ function OverridesBody({
       ...draft,
       id: editing.id
     });
-    if (draft.enabled) {
-      enforceFreeTier(saved?.id ?? editing.id);
-      // Arm the master switch. Deliberately creating a rule and having it sit
-      // inert because overrides happen to be paused is the silent-failure this
-      // feature can least afford — the preset path already does this, and the
-      // manager disagreeing with it was just a gap.
-      setEnabled(true);
-    }
+    enforceFreeTier(saved?.id ?? editing.id);
+    // Arm the master switch. Deliberately creating a rule and having it sit
+    // inert because overrides happen to be paused is the silent-failure this
+    // feature can least afford — the preset path already does this, and the
+    // manager disagreeing with it was just a gap.
+    setEnabled(true);
     setEditing(null);
   };
-  const handleToggle = rule => {
-    const next = !rule.enabled;
-    setRuleEnabled(rule.id, next);
-    if (next) enforceFreeTier(rule.id);
-  };
   if (editing) {
     return /*#__PURE__*/_jsx(NetworkOverrideEditor, {
       draft: editing.draft,
@@ -344,12 +366,12 @@ function OverridesBody({
       children: [rules.map(rule => /*#__PURE__*/_jsx(RuleRow, {
         rule: rule,
         spent: isRuleSpent(rule),
-        onToggle: () => handleToggle(rule),
-        onEdit: () => openRule(rule)
-      }, rule.id)), /*#__PURE__*/_jsx(Text, {
+        onEdit: () => openRule(rule),
+        onDelete: () => removeRule(rule.id)
+      }, rule.id)), !isPro ? /*#__PURE__*/_jsx(Text, {
         style: styles.footNote,
-        children: isPro ? "Dev builds only." : "Dev builds only. Free: one override at a time. Pro: up to 50."
-      })]
+        children: "Free: one override at a time. Pro: up to 50."
+      }) : null]
     })]
   });
 }
@@ -426,54 +448,66 @@ const styles = StyleSheet.create({
     padding: 10,
     gap: 6
   },
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10,
-    paddingHorizontal: 10,
-    paddingVertical: 10,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: macOSColors.border.default,
-    backgroundColor: macOSColors.background.card
+  // The list already spaces rows via `listContent` gap — zero out the card's
+  // own margins so the two don't stack.
+  cardWrapper: {
+    marginHorizontal: 0,
+    marginVertical: 0
   },
-  toggle: {
-    width: 22,
-    height: 22,
-    borderRadius: 11,
-    borderWidth: 1,
-    borderColor: macOSColors.border.default,
+  card: {
+    flexDirection: "row",
     alignItems: "center",
-    justifyContent: "center"
-  },
-  toggleDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4
+    gap: 8,
+    borderLeftWidth: 3,
+    borderLeftColor: "transparent"
   },
-  rowBody: {
+  cardMiddle: {
     flex: 1
   },
-  rowTitle: {
+  // Same type as the request row's URL.
+  urlText: {
     fontSize: 12,
-    fontWeight: "600",
-    color: macOSColors.text.primary
+    color: macOSColors.text.primary,
+    lineHeight: 16,
+    fontFamily: "monospace"
   },
-  rowTitleOff: {
+  urlTextOff: {
     color: macOSColors.text.muted
   },
-  rowScope: {
+  extrasText: {
     fontSize: 10,
-    fontFamily: "monospace",
     color: macOSColors.text.secondary,
     marginTop: 2
   },
+  statusText: {
+    fontSize: 11,
+    fontWeight: "600"
+  },
+  failBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2,
+    paddingHorizontal: 4,
+    paddingVertical: 1,
+    backgroundColor: macOSColors.semantic.error + "26",
+    borderRadius: 3
+  },
+  failText: {
+    fontSize: 10,
+    color: macOSColors.semantic.error,
+    fontWeight: "600"
+  },
   rowHits: {
     fontSize: 11,
     fontWeight: "700",
-    color: macOSColors.semantic.warning,
-    minWidth: 16,
-    textAlign: "right"
+    color: macOSColors.semantic.warning
+  },
+  rowDelete: {
+    padding: 5,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    backgroundColor: macOSColors.background.base
   },
   footNote: {
     fontSize: 10,