@buoy-gg/network 7.0.12 → 7.0.14

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

@@ -0,0 +1,99 @@
+"use strict";
+
+import { StyleSheet, Text, TouchableOpacity } from "react-native";
+import { macOSColors } from "@buoy-gg/shared-ui";
+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";
+
+/**
+ * The Override action, in the request-detail header.
+ *
+ * A labelled word rather than an icon: every other control here is a glyph
+ * (back, pin, bookmark) and glyphs are fine for things you already know. This
+ * one is the least familiar action in the tool, and "Override" spelled out is
+ * the entire explanation.
+ *
+ * A self-subscribing leaf, for the same two reasons `NetworkDetailPinActions`
+ * is one: the modal root stays free of subscriptions, and the selected id is
+ * 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, because "you are
+ * not seeing the truth" is one idea and should look like one.
+ *
+ * Tapping it goes straight to the Overrides screen with the rule open: a new
+ * one prefilled from this request, or the existing one if something already
+ * covers it. One destination, so there's never a question of where the thing
+ * you just made went.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+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.
+  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(TouchableOpacity, {
+    onPress: handlePress,
+    "sentry-label": "ignore open overrides",
+    accessibilityLabel: active ? "Edit the override on this request" : "Override this request",
+    style: [styles.button, active && styles.buttonActive],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [styles.label, active && styles.labelActive],
+      children: "Override"
+    })
+  });
+}
+const styles = StyleSheet.create({
+  button: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: macOSColors.border.input,
+    backgroundColor: macOSColors.background.input
+  },
+  buttonActive: {
+    borderColor: macOSColors.semantic.warning + "77",
+    backgroundColor: macOSColors.semantic.warningBackground
+  },
+  label: {
+    fontSize: 11,
+    fontWeight: "700",
+    color: macOSColors.text.primary
+  },
+  labelActive: {
+    color: macOSColors.semantic.warning
+  }
+});

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

@@ -0,0 +1,85 @@
+"use strict";
+
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { FlaskConical, macOSColors } from "@buoy-gg/shared-ui";
+import { useOverrideRules } from "../hooks/useOverrideRules";
+
+/**
+ * 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 has to keep saying so from the top level — Chrome shows the same
+ * warning in its Overrides pane for the same reason.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function NetworkOverridesButton({
+  onPress
+}) {
+  const {
+    activeCount
+  } = useOverrideRules();
+  const active = activeCount > 0;
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    onPress: onPress,
+    "sentry-label": "ignore open overrides",
+    style: [styles.button, active && styles.buttonActive],
+    accessibilityLabel: active ? `Response overrides — ${activeCount} active` : "Response overrides",
+    children: [/*#__PURE__*/_jsx(FlaskConical, {
+      size: 14,
+      color: active ? macOSColors.semantic.warning : macOSColors.text.secondary
+    }), active ? /*#__PURE__*/_jsx(View, {
+      style: styles.badge,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.badgeText,
+        children: activeCount
+      })
+    }) : null]
+  });
+}
+const styles = StyleSheet.create({
+  // The header's standard 32×32 action box — same shape, fill, border and
+  // radius as search/power/clear. It was a bare padded glyph, which read as a
+  // different CLASS of control than its neighbours when it is exactly the same
+  // kind of thing.
+  button: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: macOSColors.background.hover,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default
+  },
+  // 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"
+  },
+  badge: {
+    position: "absolute",
+    // Inside the box now that there is one; a corner-hung badge would clip
+    // against the neighbouring buttons' 8pt gap.
+    top: 1,
+    right: 1,
+    minWidth: 12,
+    height: 12,
+    borderRadius: 6,
+    paddingHorizontal: 3,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: macOSColors.semantic.warning
+  },
+  badgeText: {
+    fontSize: 8,
+    fontWeight: "800",
+    color: macOSColors.background.base
+  }
+});

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

@@ -0,0 +1,485 @@
+"use strict";
+
+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 { useOverrideRules } from "../hooks/useOverrideRules";
+import { NetworkOverrideEditor } from "./NetworkOverrideEditor";
+import { overrideRulesStore } from "../overrides/overrideRulesStore";
+
+/**
+ * The rule manager: what's armed, and how to stop all of it.
+ *
+ * One bar across the top is both the warning and the switch. It used to be two
+ * things — an ON/OFF pill beside a title, and a separate banner saying the same
+ * thing in different words — which left the pill reading as though it applied
+ * to the selected rule. A state pill is ambiguous; a verb button isn't.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function blankDraft() {
+  return {
+    enabled: true,
+    urlPattern: "",
+    kind: "respond",
+    status: 500,
+    body: "",
+    times: null
+  };
+}
+function toDraft(rule) {
+  const {
+    id: _id,
+    hits: _hits,
+    seen: _seen,
+    createdAt: _createdAt,
+    ...draft
+  } = 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.
+ */
+function scopeLine(rule) {
+  const method = rule.methods?.length ? rule.methods.join("/") : "Any";
+  let 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}`;
+}
+
+/**
+ * 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.
+ */
+function RuleRow({
+  rule,
+  spent,
+  onToggle,
+  onEdit
+}) {
+  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,
+      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)
+      })]
+    }), rule.hits > 0 ? /*#__PURE__*/_jsx(Text, {
+      style: styles.rowHits,
+      children: rule.hits
+    }) : null]
+  });
+}
+/**
+ * Stable-router gate.
+ *
+ * The screens in `NetworkModal` are rendered as permanent siblings, and the
+ * convention there is that a HIDDEN screen must not subscribe to anything.
+ * Splitting the body out is how this one honours that: `useOverrideRules`
+ * subscribes to a store that ticks while rules are firing, and a hidden screen
+ * re-rendering for that would be pure waste. (The header's overrides button is
+ * a deliberate exception — it's always visible and its whole job is to react.)
+ */
+export function NetworkOverridesScreen(props) {
+  if (!props.visible) return null;
+  return /*#__PURE__*/_jsx(OverridesBody, {
+    ...props
+  });
+}
+function OverridesBody({
+  isPro,
+  onUpgradePress,
+  pendingDraft,
+  onPendingConsumed,
+  applySafeAreaInset
+}) {
+  const {
+    enabled,
+    autoPaused,
+    rules,
+    activeCount,
+    setEnabled,
+    upsertRule,
+    setRuleEnabled,
+    removeRule,
+    isRuleSpent
+  } = useOverrideRules();
+  const [editing, setEditing] = useState(null);
+
+  // Reaching this screen proves the app renders, so the launch-safety streak
+  // has nothing to guard against — see `noteHealthyLaunch`.
+  useEffect(() => {
+    overrideRulesStore.noteHealthyLaunch();
+  }, []);
+
+  /**
+   * Open a rule for editing, pulling its body over if this surface doesn't have
+   * it.
+   *
+   * On the device that's already the case and the fetch resolves synchronously.
+   * On the dashboard a large body is left out of the snapshot on purpose (see
+   * `stripLargeRuleBodies`), so it arrives a moment after the editor does — the
+   * `id` re-check keeps a slow reply from landing in a rule you've since moved
+   * on from.
+   */
+  const hydrateBody = useCallback(id => {
+    void overrideRulesStore.fetchRuleBody(id).then(body => {
+      if (body == null) return;
+      setEditing(current => current?.id === id ? {
+        ...current,
+        draft: {
+          ...current.draft,
+          body,
+          bodyOmitted: undefined
+        }
+      } : current);
+    });
+  }, []);
+  useEffect(() => {
+    if (!pendingDraft) return;
+    const {
+      id,
+      ...draft
+    } = pendingDraft;
+    setEditing({
+      id,
+      draft
+    });
+    // Same reason as `openRule`: the detail page's Override button hands over an
+    // existing rule, and on the dashboard that rule's body may not be here yet.
+    if (id && draft.bodyOmitted) hydrateBody(id);
+    onPendingConsumed?.();
+  }, [pendingDraft, onPendingConsumed, hydrateBody]);
+
+  /**
+   * Leave the editor when the rule it's editing stops existing.
+   *
+   * Rules can be cleared from somewhere else — the dashboard, an MCP agent —
+   * while this editor is open. Without this, Save would upsert the old id and
+   * quietly RESURRECT a rule someone had just deleted. Only guards existing
+   * rules; a draft with no id yet is a new rule and has nothing to lose.
+   */
+  useEffect(() => {
+    if (!editing?.id) return;
+    if (rules.some(rule => rule.id === editing.id)) return;
+    setEditing(null);
+  }, [editing?.id, rules]);
+  const openRule = rule => {
+    setEditing({
+      id: rule.id,
+      draft: toDraft(rule)
+    });
+    if (rule.bodyOmitted) hydrateBody(rule.id);
+  };
+
+  /**
+   * On the free tier a new rule REPLACES the live one rather than being refused.
+   *
+   * The old behaviour put an upgrade modal in the action path: you tapped a
+   * thing and got a sales pitch instead of the thing. Nobody buys from a modal
+   * that just cancelled their action, and it hid the feature behind a wall
+   * instead of letting you feel its shape. "One override at a time" is a shape
+   * a developer understands.
+   */
+  const enforceFreeTier = keepId => {
+    if (isPro) return;
+    rules.filter(rule => rule.enabled && !isRuleSpent(rule) && rule.id !== keepId).forEach(rule => setRuleEnabled(rule.id, false));
+  };
+  const handleSave = () => {
+    if (!editing) return;
+    const draft = {
+      ...editing.draft,
+      urlPattern: editing.draft.urlPattern.trim()
+    };
+    if (!draft.urlPattern) return;
+    const saved = upsertRule({
+      ...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);
+    }
+    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,
+      onChange: draft => setEditing({
+        ...editing,
+        draft
+      }),
+      onSave: handleSave,
+      onCancel: () => setEditing(null),
+      saveLabel: editing.id ? "Save" : "Add",
+      applySafeAreaInset: applySafeAreaInset
+    });
+  }
+  const hasRules = rules.length > 0;
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.root,
+    children: [hasRules ? /*#__PURE__*/_jsxs(View, {
+      style: [styles.bar, enabled && activeCount > 0 && styles.barOn],
+      children: [enabled && activeCount > 0 ? /*#__PURE__*/_jsx(AlertTriangle, {
+        size: 12,
+        color: macOSColors.semantic.warning
+      }) : null, /*#__PURE__*/_jsx(Text, {
+        style: [styles.barText, enabled && activeCount > 0 && styles.barTextOn],
+        numberOfLines: 2,
+        children: autoPaused ? "Overrides paused — they'd been on for 3 launches" : enabled && activeCount > 0 ? `${activeCount} override${activeCount === 1 ? " is" : "s are"} on` : "Overrides are off"
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: () => setEnabled(!(enabled && activeCount > 0)),
+        "sentry-label": "ignore toggle overrides master",
+        style: styles.barButton,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.barButtonText,
+          children: enabled && activeCount > 0 ? "Turn all off" : autoPaused ? "Turn back on" : "Turn on"
+        })
+      })]
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: styles.listHeader,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.listHeaderText,
+        children: hasRules ? `${rules.length} rule${rules.length === 1 ? "" : "s"}` : ""
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: () => setEditing({
+          draft: blankDraft()
+        }),
+        "sentry-label": "ignore new override rule",
+        accessibilityLabel: "New override rule",
+        style: styles.newButton,
+        children: /*#__PURE__*/_jsx(Plus, {
+          size: 14,
+          color: macOSColors.semantic.info
+        })
+      })]
+    }), !hasRules ? /*#__PURE__*/_jsx(View, {
+      style: styles.emptyWrap,
+      children: /*#__PURE__*/_jsx(EmptyState, {
+        icon: FlaskConical,
+        title: "Nothing overridden"
+        // Names the control that actually exists. This said "tap Force 500"
+        // — a button from the deleted preset list, which sent anyone
+        // following it looking for something that isn't there.
+        ,
+        description: "Open any request and tap Override, or + to write a rule."
+      })
+    }) : /*#__PURE__*/_jsxs(ScrollView, {
+      style: styles.list,
+      contentContainerStyle: styles.listContent,
+      keyboardShouldPersistTaps: "handled",
+      children: [rules.map(rule => /*#__PURE__*/_jsx(RuleRow, {
+        rule: rule,
+        spent: isRuleSpent(rule),
+        onToggle: () => handleToggle(rule),
+        onEdit: () => openRule(rule)
+      }, rule.id)), /*#__PURE__*/_jsx(Text, {
+        style: styles.footNote,
+        children: isPro ? "Dev builds only." : "Dev builds only. Free: one override at a time. Pro: up to 50."
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  root: {
+    flex: 1
+  },
+  bar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: macOSColors.border.default,
+    backgroundColor: macOSColors.background.card
+  },
+  barOn: {
+    borderBottomColor: macOSColors.semantic.warning + "44",
+    backgroundColor: macOSColors.semantic.warningBackground
+  },
+  barText: {
+    flex: 1,
+    fontSize: 12,
+    fontWeight: "600",
+    color: macOSColors.text.secondary
+  },
+  barTextOn: {
+    color: macOSColors.semantic.warning
+  },
+  barButton: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: macOSColors.border.hover,
+    backgroundColor: macOSColors.background.base
+  },
+  barButtonText: {
+    fontSize: 11,
+    fontWeight: "700",
+    color: macOSColors.text.primary
+  },
+  listHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 12,
+    paddingTop: 10,
+    paddingBottom: 4
+  },
+  listHeaderText: {
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.6,
+    color: macOSColors.text.muted,
+    textTransform: "uppercase"
+  },
+  newButton: {
+    padding: 6,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    backgroundColor: macOSColors.background.card
+  },
+  emptyWrap: {
+    flex: 1,
+    justifyContent: "center"
+  },
+  list: {
+    flex: 1
+  },
+  listContent: {
+    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
+  },
+  toggle: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  toggleDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4
+  },
+  rowBody: {
+    flex: 1
+  },
+  rowTitle: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: macOSColors.text.primary
+  },
+  rowTitleOff: {
+    color: macOSColors.text.muted
+  },
+  rowScope: {
+    fontSize: 10,
+    fontFamily: "monospace",
+    color: macOSColors.text.secondary,
+    marginTop: 2
+  },
+  rowHits: {
+    fontSize: 11,
+    fontWeight: "700",
+    color: macOSColors.semantic.warning,
+    minWidth: 16,
+    textAlign: "right"
+  },
+  footNote: {
+    fontSize: 10,
+    lineHeight: 14,
+    color: macOSColors.text.muted,
+    paddingHorizontal: 4,
+    paddingTop: 8
+  }
+});