@buoy-gg/network 7.0.41 → 7.0.43

package/lib/commonjs/network/components/NetworkOverridesScreen.web.js

@@ -1,830 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NetworkOverridesScreen = NetworkOverridesScreen;
-var _react = require("react");
-var _useOverrideRules = require("../hooks/useOverrideRules");
-var _NetworkOverrideEditor = require("./NetworkOverrideEditor.web");
-var _overrideRulesStore = require("../overrides/overrideRulesStore");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * NetworkOverridesScreen.web — DOM twin of NetworkOverridesScreen.tsx.
- *
- * 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; rules render in the request
- * row's visual language (card, method badge, monospace path, status colors);
- * the rule editor takes over the whole screen while open, with the header's
- * back press routed through `backHandlerRef` (back-while-editing means "back
- * to the rule list", not "leave overrides").
- *
- * REUSED, not forked (all platform-free): `useOverrideRules`,
- * `overrideRulesStore` (persisting via the shared-ui barrel → the web shim's
- * localStorage `persistentStorage`, SAME `@react_buoy_network_overrides` key
- * + JSON shape as the phone), `isRuleSpent`, the free-tier enforcement, and
- * the pending-draft adoption flow. A rule saved here is picked up by the live
- * `networkListener` through the exact hooks native registers
- * (`setOverrideHooks` at overrideRulesStore import).
- *
- * 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).
- *  - `DevToolsCard` / `MethodBadge` — inlined DOM twins, values from
- *    shared/src/ui/components/DevToolsCard.tsx and Badge.tsx (same twins the
- *    F2 list rows carry).
- *  - `EmptyState` — inlined DOM twin, values from
- *    shared/src/ui/components/EmptyState.tsx (including its shipped
- *    low-contrast description color, documented there).
- *
- * Intentional deviations (all logged):
- *  - `hitSlop` on the row delete button has no DOM equivalent — the button
- *    keeps its natural hit area.
- *
- * @platform React DOM Web
- */
-
-// =============================
-// Native palettes (provenance)
-// =============================
-
-/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */
-const macOSColors = {
-  background: {
-    base: "#0A0A0C",
-    card: "#1A1A1C"
-  },
-  border: {
-    default: "#2D2D2F",
-    hover: "#4D4D4F"
-  },
-  text: {
-    primary: "#F5F5F7",
-    secondary: "#A1A1A6",
-    muted: "#8E8E93",
-    icon: "#6D6D6F"
-  },
-  semantic: {
-    success: "#34C759",
-    error: "#FF453A",
-    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",
-  border: "#333333",
-  textSecondary: "#A0A0A0",
-  textMuted: "#888888",
-  primary: "#20C997",
-  success: "#20C997",
-  warning: "#FFA94D",
-  error: "#EF4444"
-};
-
-// =============================
-// Inline lucide icons (shared-ui icons are lucide re-exports)
-// =============================
-
-function Svg({
-  size = 14,
-  color = "currentColor",
-  children
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.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 AlertCircle = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: "12",
-    x2: "12",
-    y1: "8",
-    y2: "12"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: "12",
-    x2: "12.01",
-    y1: "16",
-    y2: "16"
-  })]
-});
-const AlertTriangle = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 20h16a2 2 0 0 0 1.73-2Z"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M12 9v4"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M12 17h.01"
-  })]
-});
-const FlaskConical = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M8.5 2h7"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M7 16h10"
-  })]
-});
-const Plus = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M5 12h14"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M12 5v14"
-  })]
-});
-const Trash2 = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M3 6h18"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: "10",
-    x2: "10",
-    y1: "11",
-    y2: "17"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: "14",
-    x2: "14",
-    y1: "11",
-    y2: "17"
-  })]
-});
-
-// =============================
-// shared-ui DOM twins (provenance: Badge.tsx / DevToolsCard.tsx / EmptyState.tsx)
-// =============================
-
-/**
- * MethodBadge twin — shared/src/ui/components/Badge.tsx `MethodBadge`
- * (`size="small"`: 6/2 padding, 11px, weight 700, minWidth 45, `${color}15`
- * fill, `${color}40` border, radius 4). METHOD_COLORS map, verbatim — an
- * unknown method (the rule rows' "ANY", or "GET/POST") falls to #6B7280,
- * same as native.
- */
-const METHOD_COLORS = {
-  GET: buoy.success,
-  POST: buoy.primary,
-  PUT: buoy.warning,
-  PATCH: buoy.textSecondary,
-  DELETE: buoy.error,
-  HEAD: buoy.textMuted,
-  OPTIONS: buoy.primary
-};
-function MethodBadgeWeb({
-  method
-}) {
-  const color = METHOD_COLORS[method.toUpperCase()] || "#6B7280";
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-    style: {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      minWidth: 45,
-      boxSizing: "border-box",
-      padding: "2px 6px",
-      fontSize: 11,
-      fontWeight: 700,
-      color,
-      backgroundColor: `${color}15`,
-      border: `1px solid ${color}40`,
-      borderRadius: 4,
-      flexShrink: 0
-    },
-    children: method.toUpperCase()
-  });
-}
-
-/**
- * DevToolsCard twin — shared/src/ui/components/DevToolsCard.tsx (buoyColors
- * card fill, `${border}40` outline + bottom hairline, radius 8, padding 12,
- * minHeight 44). The rule list zeroes the wrapper margins — the list's own
- * gap spaces rows, same as native `cardWrapper`.
- */
-function DevToolsCardWeb({
-  onPress,
-  children,
-  contentStyle
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: {
-      margin: 0
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      role: "button",
-      tabIndex: 0,
-      onClick: onPress,
-      onKeyDown: e => {
-        if (e.key === "Enter" || e.key === " ") onPress();
-      },
-      style: {
-        backgroundColor: buoy.card,
-        border: `1px solid ${buoy.border}40`,
-        borderBottom: `1px solid ${buoy.border}`,
-        borderRadius: 8,
-        padding: 12,
-        minHeight: 44,
-        boxSizing: "border-box",
-        cursor: "pointer",
-        ...contentStyle
-      },
-      children: children
-    })
-  });
-}
-
-/**
- * EmptyState twin — shared/src/ui/components/EmptyState.tsx, default variant
- * (icon 48 @ border.hover, 16/500 title in text.icon, 14px description in
- * border.hover — the shipped low-contrast look, documented in the native
- * file).
- */
-function EmptyStateWeb({
-  icon,
-  title,
-  description
-}) {
-  const Icon = icon;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: styles.emptyContainer,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: styles.emptyContent,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: {
-          marginBottom: 16
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-          size: 48,
-          color: macOSColors.border.hover
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: styles.emptyTitle,
-        children: title
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: styles.emptyDescription,
-        children: description
-      })]
-    })
-  });
-}
-
-// =============================
-// Screen (structure mirrors the native file 1:1)
-// =============================
-
-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;
-}
-
-/**
- * Where the rule applies — PATH only, not the whole URL (the host is the same
- * for every rule in a typical app; same reasoning as the request row's
- * `displayUrl`).
- */
-function patternPath(rule) {
-  const path = rule.urlPattern;
-  const schemeEnd = path.indexOf("://");
-  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, in the request row's visual language — same card, method badge,
- * monospace path and status colors as `NetworkEventItemCompact`. A trash
- * instead of the type chip and chevron; the outcome color floods the left
- * edge only while the rule is live. No per-rule on/off — delete the rule, or
- * pause everything from the master bar. (Native comment.)
- */
-function RuleRow({
-  rule,
-  spent,
-  onEdit,
-  onDelete
-}) {
-  const live = rule.enabled && !spent;
-  const accent = ruleAccent(rule);
-  const extras = extrasLine(rule);
-  const method = rule.methods?.length ? rule.methods.join("/") : "ANY";
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DevToolsCardWeb, {
-    onPress: onEdit,
-    contentStyle: {
-      ...styles.card,
-      borderLeft: `3px solid ${live ? accent : "transparent"}`
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MethodBadgeWeb, {
-      method: method
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: styles.cardMiddle,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: {
-          ...styles.urlText,
-          ...(!live ? styles.urlTextOff : null)
-        },
-        children: patternPath(rule)
-      }), extras ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: styles.extrasText,
-        children: extras
-      }) : null]
-    }), rule.hits > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      style: styles.rowHits,
-      children: rule.hits
-    }) : null, rule.kind === "fail" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-      style: styles.failBadge,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AlertCircle, {
-        size: 10,
-        color: macOSColors.semantic.error
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: styles.failText,
-        children: rule.failKind === "timeout" ? "TIMEOUT" : "OFFLINE"
-      })]
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      style: {
-        ...styles.statusText,
-        color: accent
-      },
-      children: rule.kind === "delay" ? "PASS" : String(rule.status ?? 200)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-      type: "button",
-      onClick: e => {
-        // The delete sits inside the card's press target — stop the row's
-        // edit from also firing (native gets this free from nested
-        // touchables).
-        e.stopPropagation();
-        onDelete();
-      },
-      "aria-label": "Delete rule",
-      style: styles.rowDelete,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Trash2, {
-        size: 13,
-        color: macOSColors.text.muted
-      })
-    })]
-  });
-}
-/**
- * Stable-router gate — same convention as native: a HIDDEN screen must not
- * subscribe to anything, so the subscribing body is split out and the shell
- * returns null.
- */
-function NetworkOverridesScreen(props) {
-  if (!props.visible) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(OverridesBody, {
-    ...props
-  });
-}
-function OverridesBody({
-  isPro,
-  onUpgradePress: _onUpgradePress,
-  pendingDraft,
-  onPendingConsumed,
-  backHandlerRef,
-  applySafeAreaInset
-}) {
-  const {
-    enabled,
-    autoPaused,
-    rules,
-    activeCount,
-    setEnabled,
-    upsertRule,
-    setRuleEnabled,
-    removeRule,
-    isRuleSpent
-  } = (0, _useOverrideRules.useOverrideRules)();
-  const [editing, setEditing] = (0, _react.useState)(null);
-
-  // Reaching this screen proves the app renders, so the launch-safety streak
-  // has nothing to guard against — see `noteHealthyLaunch`.
-  (0, _react.useEffect)(() => {
-    _overrideRulesStore.overrideRulesStore.noteHealthyLaunch();
-  }, []);
-
-  // Back while editing means "back to the rule list", not "leave overrides".
-  // Cleared on unmount so a hidden screen can't swallow back presses.
-  (0, _react.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. On the device (and this webview) that fetch resolves locally and
-   * immediately; the `id` re-check keeps a slow reply from landing in a rule
-   * you've since moved on from. (Native comment — kept for parity.)
-   */
-  const hydrateBody = (0, _react.useCallback)(id => {
-    void _overrideRulesStore.overrideRulesStore.fetchRuleBody(id).then(body => {
-      if (body == null) return;
-      setEditing(current => current?.id === id ? {
-        ...current,
-        draft: {
-          ...current.draft,
-          body,
-          bodyOmitted: undefined
-        }
-      } : current);
-    });
-  }, []);
-  (0, _react.useEffect)(() => {
-    if (!pendingDraft) return;
-    const {
-      id,
-      ...draft
-    } = pendingDraft;
-    setEditing({
-      id,
-      draft
-    });
-    if (id && draft.bodyOmitted) hydrateBody(id);
-    onPendingConsumed?.();
-  }, [pendingDraft, onPendingConsumed, hydrateBody]);
-
-  /**
-   * Leave the editor when the rule it's editing stops existing — without
-   * this, Save would upsert the old id and quietly RESURRECT a rule someone
-   * had just deleted (dashboard / MCP agent). Only guards existing rules.
-   */
-  (0, _react.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 — "one override at a time" is a shape a developer understands.
-   * (Native comment.)
-   */
-  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;
-    // Saving always arms the rule — the ONLY way back on for a rule the free
-    // tier disabled or that used itself up. (Native comment.)
-    const draft = {
-      ...editing.draft,
-      enabled: true,
-      urlPattern: editing.draft.urlPattern.trim()
-    };
-    if (!draft.urlPattern) return;
-    const saved = upsertRule({
-      ...draft,
-      id: editing.id
-    });
-    enforceFreeTier(saved?.id ?? editing.id);
-    // Arm the master switch — a deliberately-created rule sitting inert
-    // because overrides happen to be paused is the silent-failure this
-    // feature can least afford. (Native comment.)
-    setEnabled(true);
-    setEditing(null);
-  };
-  if (editing) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkOverrideEditor.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__*/(0, _jsxRuntime.jsxs)("div", {
-    style: styles.root,
-    children: [hasRules ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: {
-        ...styles.bar,
-        ...(enabled && activeCount > 0 ? styles.barOn : null)
-      },
-      children: [enabled && activeCount > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertTriangle, {
-        size: 12,
-        color: macOSColors.semantic.warning
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: {
-          ...styles.barText,
-          ...(enabled && activeCount > 0 ? styles.barTextOn : null)
-        },
-        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__*/(0, _jsxRuntime.jsx)("button", {
-        type: "button",
-        onClick: () => setEnabled(!(enabled && activeCount > 0)),
-        style: styles.barButton,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: styles.barButtonText,
-          children: enabled && activeCount > 0 ? "Turn all off" : autoPaused ? "Turn back on" : "Turn on"
-        })
-      })]
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: styles.listHeader,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: styles.listHeaderText,
-        children: hasRules ? `${rules.length} rule${rules.length === 1 ? "" : "s"}` : ""
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-        type: "button",
-        onClick: () => setEditing({
-          draft: blankDraft()
-        }),
-        "aria-label": "New override rule",
-        style: styles.newButton,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Plus, {
-          size: 14,
-          color: macOSColors.semantic.info
-        })
-      })]
-    }), !hasRules ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: styles.emptyWrap,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyStateWeb, {
-        icon: FlaskConical,
-        title: "Nothing overridden",
-        description: "Open any request and tap Override, or + to write a rule."
-      })
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: styles.list,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        style: styles.listContent,
-        children: [rules.map(rule => /*#__PURE__*/(0, _jsxRuntime.jsx)(RuleRow, {
-          rule: rule,
-          spent: isRuleSpent(rule),
-          onEdit: () => openRule(rule),
-          onDelete: () => removeRule(rule.id)
-        }, rule.id)), !isPro ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: styles.footNote,
-          children: "Free: one override at a time. Pro: up to 50."
-        }) : null]
-      })
-    })]
-  });
-}
-
-// Values mirror the native StyleSheet block 1:1.
-const styles = {
-  root: {
-    display: "flex",
-    flexDirection: "column",
-    flex: 1,
-    minHeight: 0
-  },
-  bar: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    padding: "10px 12px",
-    borderBottom: `1px solid ${macOSColors.border.default}`,
-    backgroundColor: macOSColors.background.card
-  },
-  barOn: {
-    borderBottom: `1px solid ${macOSColors.semantic.warning}44`,
-    backgroundColor: macOSColors.semantic.warningBackground
-  },
-  barText: {
-    flex: 1,
-    minWidth: 0,
-    fontSize: 12,
-    fontWeight: 600,
-    color: macOSColors.text.secondary
-  },
-  barTextOn: {
-    color: macOSColors.semantic.warning
-  },
-  barButton: {
-    padding: "6px 10px",
-    borderRadius: 5,
-    border: `1px solid ${macOSColors.border.hover}`,
-    backgroundColor: macOSColors.background.base,
-    cursor: "pointer",
-    margin: 0,
-    flexShrink: 0
-  },
-  barButtonText: {
-    fontSize: 11,
-    fontWeight: 700,
-    color: macOSColors.text.primary,
-    whiteSpace: "nowrap"
-  },
-  listHeader: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: "10px 12px 4px"
-  },
-  listHeaderText: {
-    fontSize: 10,
-    fontWeight: 700,
-    letterSpacing: 0.6,
-    color: macOSColors.text.muted,
-    textTransform: "uppercase"
-  },
-  newButton: {
-    display: "inline-flex",
-    padding: 6,
-    borderRadius: 5,
-    border: `1px solid ${macOSColors.border.default}`,
-    backgroundColor: macOSColors.background.card,
-    cursor: "pointer",
-    margin: 0
-  },
-  emptyWrap: {
-    flex: 1,
-    minHeight: 0,
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center"
-  },
-  list: {
-    flex: 1,
-    minHeight: 0,
-    overflowY: "auto"
-  },
-  listContent: {
-    padding: 10,
-    display: "flex",
-    flexDirection: "column",
-    gap: 6
-  },
-  card: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  cardMiddle: {
-    flex: 1,
-    minWidth: 0
-  },
-  // Same type as the request row's URL.
-  urlText: {
-    fontSize: 12,
-    color: macOSColors.text.primary,
-    lineHeight: "16px",
-    fontFamily: "ui-monospace, Menlo, monospace",
-    display: "-webkit-box",
-    WebkitLineClamp: 2,
-    WebkitBoxOrient: "vertical",
-    overflow: "hidden",
-    overflowWrap: "anywhere"
-  },
-  urlTextOff: {
-    color: macOSColors.text.muted
-  },
-  extrasText: {
-    fontSize: 10,
-    color: macOSColors.text.secondary,
-    marginTop: 2
-  },
-  statusText: {
-    fontSize: 11,
-    fontWeight: 600,
-    flexShrink: 0
-  },
-  failBadge: {
-    display: "inline-flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 2,
-    padding: "1px 4px",
-    backgroundColor: `${macOSColors.semantic.error}26`,
-    borderRadius: 3,
-    flexShrink: 0
-  },
-  failText: {
-    fontSize: 10,
-    color: macOSColors.semantic.error,
-    fontWeight: 600
-  },
-  rowHits: {
-    fontSize: 11,
-    fontWeight: 700,
-    color: macOSColors.semantic.warning,
-    flexShrink: 0
-  },
-  rowDelete: {
-    display: "inline-flex",
-    padding: 5,
-    borderRadius: 5,
-    border: `1px solid ${macOSColors.border.default}`,
-    backgroundColor: macOSColors.background.base,
-    cursor: "pointer",
-    margin: 0,
-    flexShrink: 0
-  },
-  footNote: {
-    fontSize: 10,
-    lineHeight: "14px",
-    color: macOSColors.text.muted,
-    padding: "8px 4px 0"
-  },
-  // EmptyState.tsx styles, verbatim (default variant).
-  emptyContainer: {
-    flex: 1,
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 32
-  },
-  emptyContent: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    maxWidth: 300
-  },
-  emptyTitle: {
-    color: macOSColors.text.icon,
-    fontSize: 16,
-    fontWeight: 500,
-    textAlign: "center",
-    marginBottom: 8
-  },
-  emptyDescription: {
-    // Shipped low-contrast look — see the note in the native EmptyState.tsx.
-    color: macOSColors.border.hover,
-    fontSize: 14,
-    textAlign: "center",
-    lineHeight: "20px"
-  }
-};
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.NetworkOverridesScreen=NetworkOverridesScreen;var _react=require("react");var _useOverrideRules=require("../hooks/useOverrideRules");var _NetworkOverrideEditor=require("./NetworkOverrideEditor.web");var _overrideRulesStore=require("../overrides/overrideRulesStore");var _jsxRuntime=require("react/jsx-runtime");const macOSColors={background:{base:"#0A0A0C",card:"#1A1A1C"},border:{default:"#2D2D2F",hover:"#4D4D4F"},text:{primary:"#F5F5F7",secondary:"#A1A1A6",muted:"#8E8E93",icon:"#6D6D6F"},semantic:{success:"#34C759",error:"#FF453A",warning:"#FFEB3B",warningBackground:"rgba(255, 235, 59, 0.15)",info:"#00B8E6"}};const buoy={card:"#1A1A1A",border:"#333333",textSecondary:"#A0A0A0",textMuted:"#888888",primary:"#20C997",success:"#20C997",warning:"#FFA94D",error:"#EF4444"};function Svg({size:e=14,color:t="currentColor",children:n}){return(0,_jsxRuntime.jsx)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:t,strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0,display:"block"},children:n})}const AlertCircle=e=>(0,_jsxRuntime.jsxs)(Svg,{...e,children:[(0,_jsxRuntime.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,_jsxRuntime.jsx)("line",{x1:"12",x2:"12",y1:"8",y2:"12"}),(0,_jsxRuntime.jsx)("line",{x1:"12",x2:"12.01",y1:"16",y2:"16"})]});const AlertTriangle=e=>(0,_jsxRuntime.jsxs)(Svg,{...e,children:[(0,_jsxRuntime.jsx)("path",{d:"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 20h16a2 2 0 0 0 1.73-2Z"}),(0,_jsxRuntime.jsx)("path",{d:"M12 9v4"}),(0,_jsxRuntime.jsx)("path",{d:"M12 17h.01"})]});const FlaskConical=e=>(0,_jsxRuntime.jsxs)(Svg,{...e,children:[(0,_jsxRuntime.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"}),(0,_jsxRuntime.jsx)("path",{d:"M8.5 2h7"}),(0,_jsxRuntime.jsx)("path",{d:"M7 16h10"})]});const Plus=e=>(0,_jsxRuntime.jsxs)(Svg,{...e,children:[(0,_jsxRuntime.jsx)("path",{d:"M5 12h14"}),(0,_jsxRuntime.jsx)("path",{d:"M12 5v14"})]});const Trash2=e=>(0,_jsxRuntime.jsxs)(Svg,{...e,children:[(0,_jsxRuntime.jsx)("path",{d:"M3 6h18"}),(0,_jsxRuntime.jsx)("path",{d:"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"}),(0,_jsxRuntime.jsx)("path",{d:"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"}),(0,_jsxRuntime.jsx)("line",{x1:"10",x2:"10",y1:"11",y2:"17"}),(0,_jsxRuntime.jsx)("line",{x1:"14",x2:"14",y1:"11",y2:"17"})]});const METHOD_COLORS={GET:buoy.success,POST:buoy.primary,PUT:buoy.warning,PATCH:buoy.textSecondary,DELETE:buoy.error,HEAD:buoy.textMuted,OPTIONS:buoy.primary};function MethodBadgeWeb({method:e}){const t=METHOD_COLORS[e.toUpperCase()]||"#6B7280";return(0,_jsxRuntime.jsx)("span",{style:{display:"inline-flex",alignItems:"center",justifyContent:"center",minWidth:45,boxSizing:"border-box",padding:"2px 6px",fontSize:11,fontWeight:700,color:t,backgroundColor:`${t}15`,border:`1px solid ${t}40`,borderRadius:4,flexShrink:0},children:e.toUpperCase()})}function DevToolsCardWeb({onPress:e,children:t,contentStyle:n}){return(0,_jsxRuntime.jsx)("div",{style:{margin:0},children:(0,_jsxRuntime.jsx)("div",{role:"button",tabIndex:0,onClick:e,onKeyDown:o=>{if(o.key==="Enter"||o.key===" ")e()},style:{backgroundColor:buoy.card,border:`1px solid ${buoy.border}40`,borderBottom:`1px solid ${buoy.border}`,borderRadius:8,padding:12,minHeight:44,boxSizing:"border-box",cursor:"pointer",...n},children:t})})}function EmptyStateWeb({icon:e,title:t,description:n}){const o=e;return(0,_jsxRuntime.jsx)("div",{style:styles.emptyContainer,children:(0,_jsxRuntime.jsxs)("div",{style:styles.emptyContent,children:[(0,_jsxRuntime.jsx)("div",{style:{marginBottom:16},children:(0,_jsxRuntime.jsx)(o,{size:48,color:macOSColors.border.hover})}),(0,_jsxRuntime.jsx)("div",{style:styles.emptyTitle,children:t}),(0,_jsxRuntime.jsx)("div",{style:styles.emptyDescription,children:n})]})})}function blankDraft(){return{enabled:true,urlPattern:"",kind:"respond",status:500,body:"",times:null}}function toDraft(e){const{id:t,hits:n,seen:o,createdAt:c,...u}=e;return u}function patternPath(e){const t=e.urlPattern;const n=t.indexOf("://");if(n===-1)return t;const o=t.indexOf("/",n+3);return o===-1?t.slice(n+3):t.slice(o)}function extrasLine(e){const t=[];if(e.delayMs)t.push(`${e.delayMs/1e3}s delay`);if(e.alternate)t.push("every other");else if(e.times===1)t.push("once");else if(typeof e.times==="number")t.push(`${e.times}\xD7`);return t.join(" \xB7 ")}function ruleAccent(e){if(e.kind==="fail")return macOSColors.semantic.error;if(e.kind==="delay")return macOSColors.semantic.info;const t=e.status??200;if(t>=200&&t<300)return macOSColors.semantic.success;if(t>=300&&t<400)return macOSColors.semantic.info;return macOSColors.semantic.error}function RuleRow({rule:e,spent:t,onEdit:n,onDelete:o}){const c=e.enabled&&!t;const u=ruleAccent(e);const l=extrasLine(e);const f=e.methods?.length?e.methods.join("/"):"ANY";return(0,_jsxRuntime.jsxs)(DevToolsCardWeb,{onPress:n,contentStyle:{...styles.card,borderLeft:`3px solid ${c?u:"transparent"}`},children:[(0,_jsxRuntime.jsx)(MethodBadgeWeb,{method:f}),(0,_jsxRuntime.jsxs)("div",{style:styles.cardMiddle,children:[(0,_jsxRuntime.jsx)("div",{style:{...styles.urlText,...!c?styles.urlTextOff:null},children:patternPath(e)}),l?(0,_jsxRuntime.jsx)("div",{style:styles.extrasText,children:l}):null]}),e.hits>0?(0,_jsxRuntime.jsx)("span",{style:styles.rowHits,children:e.hits}):null,e.kind==="fail"?(0,_jsxRuntime.jsxs)("span",{style:styles.failBadge,children:[(0,_jsxRuntime.jsx)(AlertCircle,{size:10,color:macOSColors.semantic.error}),(0,_jsxRuntime.jsx)("span",{style:styles.failText,children:e.failKind==="timeout"?"TIMEOUT":"OFFLINE"})]}):(0,_jsxRuntime.jsx)("span",{style:{...styles.statusText,color:u},children:e.kind==="delay"?"PASS":String(e.status??200)}),(0,_jsxRuntime.jsx)("button",{type:"button",onClick:d=>{d.stopPropagation();o()},"aria-label":"Delete rule",style:styles.rowDelete,children:(0,_jsxRuntime.jsx)(Trash2,{size:13,color:macOSColors.text.muted})})]})}function NetworkOverridesScreen(e){if(!e.visible)return null;return(0,_jsxRuntime.jsx)(OverridesBody,{...e})}function OverridesBody({isPro:e,onUpgradePress:t,pendingDraft:n,onPendingConsumed:o,backHandlerRef:c,applySafeAreaInset:u}){const{enabled:l,autoPaused:f,rules:d,activeCount:x,setEnabled:b,upsertRule:g,setRuleEnabled:j,removeRule:v,isRuleSpent:m}=(0,_useOverrideRules.useOverrideRules)();const[i,a]=(0,_react.useState)(null);(0,_react.useEffect)(()=>{_overrideRulesStore.overrideRulesStore.noteHealthyLaunch()},[]);(0,_react.useEffect)(()=>{if(!c)return;c.current=i?()=>{a(null);return true}:null;return()=>{c.current=null}},[c,i]);const h=(0,_react.useCallback)(r=>{void _overrideRulesStore.overrideRulesStore.fetchRuleBody(r).then(s=>{if(s==null)return;a(p=>p?.id===r?{...p,draft:{...p.draft,body:s,bodyOmitted:void 0}}:p)})},[]);(0,_react.useEffect)(()=>{if(!n)return;const{id:r,...s}=n;a({id:r,draft:s});if(r&&s.bodyOmitted)h(r);o?.()},[n,o,h]);(0,_react.useEffect)(()=>{if(!i?.id)return;if(d.some(r=>r.id===i.id))return;a(null)},[i?.id,d]);const k=r=>{a({id:r.id,draft:toDraft(r)});if(r.bodyOmitted)h(r.id)};const S=r=>{if(e)return;d.filter(s=>s.enabled&&!m(s)&&s.id!==r).forEach(s=>j(s.id,false))};const C=()=>{if(!i)return;const r={...i.draft,enabled:true,urlPattern:i.draft.urlPattern.trim()};if(!r.urlPattern)return;const s=g({...r,id:i.id});S(s?.id??i.id);b(true);a(null)};if(i){return(0,_jsxRuntime.jsx)(_NetworkOverrideEditor.NetworkOverrideEditor,{draft:i.draft,onChange:r=>a({...i,draft:r}),onSave:C,onCancel:()=>a(null),saveLabel:i.id?"Save":"Add",applySafeAreaInset:u})}const y=d.length>0;return(0,_jsxRuntime.jsxs)("div",{style:styles.root,children:[y?(0,_jsxRuntime.jsxs)("div",{style:{...styles.bar,...l&&x>0?styles.barOn:null},children:[l&&x>0?(0,_jsxRuntime.jsx)(AlertTriangle,{size:12,color:macOSColors.semantic.warning}):null,(0,_jsxRuntime.jsx)("span",{style:{...styles.barText,...l&&x>0?styles.barTextOn:null},children:f?"Overrides paused \u2014 they'd been on for 3 launches":l&&x>0?`${x} override${x===1?" is":"s are"} on`:"Overrides are off"}),(0,_jsxRuntime.jsx)("button",{type:"button",onClick:()=>b(!(l&&x>0)),style:styles.barButton,children:(0,_jsxRuntime.jsx)("span",{style:styles.barButtonText,children:l&&x>0?"Turn all off":f?"Turn back on":"Turn on"})})]}):null,(0,_jsxRuntime.jsxs)("div",{style:styles.listHeader,children:[(0,_jsxRuntime.jsx)("span",{style:styles.listHeaderText,children:y?`${d.length} rule${d.length===1?"":"s"}`:""}),(0,_jsxRuntime.jsx)("button",{type:"button",onClick:()=>a({draft:blankDraft()}),"aria-label":"New override rule",style:styles.newButton,children:(0,_jsxRuntime.jsx)(Plus,{size:14,color:macOSColors.semantic.info})})]}),!y?(0,_jsxRuntime.jsx)("div",{style:styles.emptyWrap,children:(0,_jsxRuntime.jsx)(EmptyStateWeb,{icon:FlaskConical,title:"Nothing overridden",description:"Open any request and tap Override, or + to write a rule."})}):(0,_jsxRuntime.jsx)("div",{style:styles.list,children:(0,_jsxRuntime.jsxs)("div",{style:styles.listContent,children:[d.map(r=>(0,_jsxRuntime.jsx)(RuleRow,{rule:r,spent:m(r),onEdit:()=>k(r),onDelete:()=>v(r.id)},r.id)),!e?(0,_jsxRuntime.jsx)("span",{style:styles.footNote,children:"Free: one override at a time. Pro: up to 50."}):null]})})]})}const styles={root:{display:"flex",flexDirection:"column",flex:1,minHeight:0},bar:{display:"flex",flexDirection:"row",alignItems:"center",gap:8,padding:"10px 12px",borderBottom:`1px solid ${macOSColors.border.default}`,backgroundColor:macOSColors.background.card},barOn:{borderBottom:`1px solid ${macOSColors.semantic.warning}44`,backgroundColor:macOSColors.semantic.warningBackground},barText:{flex:1,minWidth:0,fontSize:12,fontWeight:600,color:macOSColors.text.secondary},barTextOn:{color:macOSColors.semantic.warning},barButton:{padding:"6px 10px",borderRadius:5,border:`1px solid ${macOSColors.border.hover}`,backgroundColor:macOSColors.background.base,cursor:"pointer",margin:0,flexShrink:0},barButtonText:{fontSize:11,fontWeight:700,color:macOSColors.text.primary,whiteSpace:"nowrap"},listHeader:{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"space-between",padding:"10px 12px 4px"},listHeaderText:{fontSize:10,fontWeight:700,letterSpacing:.6,color:macOSColors.text.muted,textTransform:"uppercase"},newButton:{display:"inline-flex",padding:6,borderRadius:5,border:`1px solid ${macOSColors.border.default}`,backgroundColor:macOSColors.background.card,cursor:"pointer",margin:0},emptyWrap:{flex:1,minHeight:0,display:"flex",flexDirection:"column",justifyContent:"center"},list:{flex:1,minHeight:0,overflowY:"auto"},listContent:{padding:10,display:"flex",flexDirection:"column",gap:6},card:{display:"flex",flexDirection:"row",alignItems:"center",gap:8},cardMiddle:{flex:1,minWidth:0},urlText:{fontSize:12,color:macOSColors.text.primary,lineHeight:"16px",fontFamily:"ui-monospace, Menlo, monospace",display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden",overflowWrap:"anywhere"},urlTextOff:{color:macOSColors.text.muted},extrasText:{fontSize:10,color:macOSColors.text.secondary,marginTop:2},statusText:{fontSize:11,fontWeight:600,flexShrink:0},failBadge:{display:"inline-flex",flexDirection:"row",alignItems:"center",gap:2,padding:"1px 4px",backgroundColor:`${macOSColors.semantic.error}26`,borderRadius:3,flexShrink:0},failText:{fontSize:10,color:macOSColors.semantic.error,fontWeight:600},rowHits:{fontSize:11,fontWeight:700,color:macOSColors.semantic.warning,flexShrink:0},rowDelete:{display:"inline-flex",padding:5,borderRadius:5,border:`1px solid ${macOSColors.border.default}`,backgroundColor:macOSColors.background.base,cursor:"pointer",margin:0,flexShrink:0},footNote:{fontSize:10,lineHeight:"14px",color:macOSColors.text.muted,padding:"8px 4px 0"},emptyContainer:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",padding:32},emptyContent:{display:"flex",flexDirection:"column",alignItems:"center",maxWidth:300},emptyTitle:{color:macOSColors.text.icon,fontSize:16,fontWeight:500,textAlign:"center",marginBottom:8},emptyDescription:{color:macOSColors.border.hover,fontSize:14,textAlign:"center",lineHeight:"20px"}};