@buoy-gg/network 7.0.40 → 7.0.42

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

@@ -1,826 +1 @@
-"use strict";
-
-/**
- * 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
- */
-
-import { useCallback, useEffect, useState } from "react";
-import { useOverrideRules } from "../hooks/useOverrideRules";
-import { NetworkOverrideEditor } from "./NetworkOverrideEditor.web";
-import { overrideRulesStore } from "../overrides/overrideRulesStore";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// =============================
-// 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__*/_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__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/_jsx("line", {
-    x1: "12",
-    x2: "12",
-    y1: "8",
-    y2: "12"
-  }), /*#__PURE__*/_jsx("line", {
-    x1: "12",
-    x2: "12.01",
-    y1: "16",
-    y2: "16"
-  })]
-});
-const AlertTriangle = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_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__*/_jsx("path", {
-    d: "M12 9v4"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M12 17h.01"
-  })]
-});
-const FlaskConical = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  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"
-  })]
-});
-const Plus = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M5 12h14"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M12 5v14"
-  })]
-});
-const Trash2 = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M3 6h18"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
-  }), /*#__PURE__*/_jsx("line", {
-    x1: "10",
-    x2: "10",
-    y1: "11",
-    y2: "17"
-  }), /*#__PURE__*/_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__*/_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__*/_jsx("div", {
-    style: {
-      margin: 0
-    },
-    children: /*#__PURE__*/_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__*/_jsx("div", {
-    style: styles.emptyContainer,
-    children: /*#__PURE__*/_jsxs("div", {
-      style: styles.emptyContent,
-      children: [/*#__PURE__*/_jsx("div", {
-        style: {
-          marginBottom: 16
-        },
-        children: /*#__PURE__*/_jsx(Icon, {
-          size: 48,
-          color: macOSColors.border.hover
-        })
-      }), /*#__PURE__*/_jsx("div", {
-        style: styles.emptyTitle,
-        children: title
-      }), /*#__PURE__*/_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__*/_jsxs(DevToolsCardWeb, {
-    onPress: onEdit,
-    contentStyle: {
-      ...styles.card,
-      borderLeft: `3px solid ${live ? accent : "transparent"}`
-    },
-    children: [/*#__PURE__*/_jsx(MethodBadgeWeb, {
-      method: method
-    }), /*#__PURE__*/_jsxs("div", {
-      style: styles.cardMiddle,
-      children: [/*#__PURE__*/_jsx("div", {
-        style: {
-          ...styles.urlText,
-          ...(!live ? styles.urlTextOff : null)
-        },
-        children: patternPath(rule)
-      }), extras ? /*#__PURE__*/_jsx("div", {
-        style: styles.extrasText,
-        children: extras
-      }) : null]
-    }), rule.hits > 0 ? /*#__PURE__*/_jsx("span", {
-      style: styles.rowHits,
-      children: rule.hits
-    }) : null, rule.kind === "fail" ? /*#__PURE__*/_jsxs("span", {
-      style: styles.failBadge,
-      children: [/*#__PURE__*/_jsx(AlertCircle, {
-        size: 10,
-        color: macOSColors.semantic.error
-      }), /*#__PURE__*/_jsx("span", {
-        style: styles.failText,
-        children: rule.failKind === "timeout" ? "TIMEOUT" : "OFFLINE"
-      })]
-    }) : /*#__PURE__*/_jsx("span", {
-      style: {
-        ...styles.statusText,
-        color: accent
-      },
-      children: rule.kind === "delay" ? "PASS" : String(rule.status ?? 200)
-    }), /*#__PURE__*/_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__*/_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.
- */
-export function NetworkOverridesScreen(props) {
-  if (!props.visible) return null;
-  return /*#__PURE__*/_jsx(OverridesBody, {
-    ...props
-  });
-}
-function OverridesBody({
-  isPro,
-  onUpgradePress: _onUpgradePress,
-  pendingDraft,
-  onPendingConsumed,
-  backHandlerRef,
-  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();
-  }, []);
-
-  // Back while editing means "back to the rule list", not "leave overrides".
-  // 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. 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 = 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
-    });
-    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.
-   */
-  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__*/_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("div", {
-    style: styles.root,
-    children: [hasRules ? /*#__PURE__*/_jsxs("div", {
-      style: {
-        ...styles.bar,
-        ...(enabled && activeCount > 0 ? styles.barOn : null)
-      },
-      children: [enabled && activeCount > 0 ? /*#__PURE__*/_jsx(AlertTriangle, {
-        size: 12,
-        color: macOSColors.semantic.warning
-      }) : null, /*#__PURE__*/_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__*/_jsx("button", {
-        type: "button",
-        onClick: () => setEnabled(!(enabled && activeCount > 0)),
-        style: styles.barButton,
-        children: /*#__PURE__*/_jsx("span", {
-          style: styles.barButtonText,
-          children: enabled && activeCount > 0 ? "Turn all off" : autoPaused ? "Turn back on" : "Turn on"
-        })
-      })]
-    }) : null, /*#__PURE__*/_jsxs("div", {
-      style: styles.listHeader,
-      children: [/*#__PURE__*/_jsx("span", {
-        style: styles.listHeaderText,
-        children: hasRules ? `${rules.length} rule${rules.length === 1 ? "" : "s"}` : ""
-      }), /*#__PURE__*/_jsx("button", {
-        type: "button",
-        onClick: () => setEditing({
-          draft: blankDraft()
-        }),
-        "aria-label": "New override rule",
-        style: styles.newButton,
-        children: /*#__PURE__*/_jsx(Plus, {
-          size: 14,
-          color: macOSColors.semantic.info
-        })
-      })]
-    }), !hasRules ? /*#__PURE__*/_jsx("div", {
-      style: styles.emptyWrap,
-      children: /*#__PURE__*/_jsx(EmptyStateWeb, {
-        icon: FlaskConical,
-        title: "Nothing overridden",
-        description: "Open any request and tap Override, or + to write a rule."
-      })
-    }) : /*#__PURE__*/_jsx("div", {
-      style: styles.list,
-      children: /*#__PURE__*/_jsxs("div", {
-        style: styles.listContent,
-        children: [rules.map(rule => /*#__PURE__*/_jsx(RuleRow, {
-          rule: rule,
-          spent: isRuleSpent(rule),
-          onEdit: () => openRule(rule),
-          onDelete: () => removeRule(rule.id)
-        }, rule.id)), !isPro ? /*#__PURE__*/_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";import{useCallback as F,useEffect as k,useState as z}from"react";import{useOverrideRules as $}from"../hooks/useOverrideRules";import{NetworkOverrideEditor as H}from"./NetworkOverrideEditor.web";import{overrideRulesStore as A}from"../overrides/overrideRulesStore";import{jsx as t,jsxs as c}from"react/jsx-runtime";const n={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 u={card:"#1A1A1A",border:"#333333",textSecondary:"#A0A0A0",textMuted:"#888888",primary:"#20C997",success:"#20C997",warning:"#FFA94D",error:"#EF4444"};function b({size:e=14,color:r="currentColor",children:l}){return t("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:r,strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0,display:"block"},children:l})}const P=e=>c(b,{...e,children:[t("circle",{cx:"12",cy:"12",r:"10"}),t("line",{x1:"12",x2:"12",y1:"8",y2:"12"}),t("line",{x1:"12",x2:"12.01",y1:"16",y2:"16"})]});const R=e=>c(b,{...e,children:[t("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"}),t("path",{d:"M12 9v4"}),t("path",{d:"M12 17h.01"})]});const I=e=>c(b,{...e,children:[t("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"}),t("path",{d:"M8.5 2h7"}),t("path",{d:"M7 16h10"})]});const j=e=>c(b,{...e,children:[t("path",{d:"M5 12h14"}),t("path",{d:"M12 5v14"})]});const L=e=>c(b,{...e,children:[t("path",{d:"M3 6h18"}),t("path",{d:"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"}),t("path",{d:"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"}),t("line",{x1:"10",x2:"10",y1:"11",y2:"17"}),t("line",{x1:"14",x2:"14",y1:"11",y2:"17"})]});const N={GET:u.success,POST:u.primary,PUT:u.warning,PATCH:u.textSecondary,DELETE:u.error,HEAD:u.textMuted,OPTIONS:u.primary};function _({method:e}){const r=N[e.toUpperCase()]||"#6B7280";return t("span",{style:{display:"inline-flex",alignItems:"center",justifyContent:"center",minWidth:45,boxSizing:"border-box",padding:"2px 6px",fontSize:11,fontWeight:700,color:r,backgroundColor:`${r}15`,border:`1px solid ${r}40`,borderRadius:4,flexShrink:0},children:e.toUpperCase()})}function U({onPress:e,children:r,contentStyle:l}){return t("div",{style:{margin:0},children:t("div",{role:"button",tabIndex:0,onClick:e,onKeyDown:a=>{if(a.key==="Enter"||a.key===" ")e()},style:{backgroundColor:u.card,border:`1px solid ${u.border}40`,borderBottom:`1px solid ${u.border}`,borderRadius:8,padding:12,minHeight:44,boxSizing:"border-box",cursor:"pointer",...l},children:r})})}function V({icon:e,title:r,description:l}){const a=e;return t("div",{style:i.emptyContainer,children:c("div",{style:i.emptyContent,children:[t("div",{style:{marginBottom:16},children:t(a,{size:48,color:n.border.hover})}),t("div",{style:i.emptyTitle,children:r}),t("div",{style:i.emptyDescription,children:l})]})})}function K(){return{enabled:true,urlPattern:"",kind:"respond",status:500,body:"",times:null}}function Y(e){const{id:r,hits:l,seen:a,createdAt:x,...m}=e;return m}function q(e){const r=e.urlPattern;const l=r.indexOf("://");if(l===-1)return r;const a=r.indexOf("/",l+3);return a===-1?r.slice(l+3):r.slice(a)}function G(e){const r=[];if(e.delayMs)r.push(`${e.delayMs/1e3}s delay`);if(e.alternate)r.push("every other");else if(e.times===1)r.push("once");else if(typeof e.times==="number")r.push(`${e.times}\xD7`);return r.join(" \xB7 ")}function Z(e){if(e.kind==="fail")return n.semantic.error;if(e.kind==="delay")return n.semantic.info;const r=e.status??200;if(r>=200&&r<300)return n.semantic.success;if(r>=300&&r<400)return n.semantic.info;return n.semantic.error}function J({rule:e,spent:r,onEdit:l,onDelete:a}){const x=e.enabled&&!r;const m=Z(e);const f=G(e);const g=e.methods?.length?e.methods.join("/"):"ANY";return c(U,{onPress:l,contentStyle:{...i.card,borderLeft:`3px solid ${x?m:"transparent"}`},children:[t(_,{method:g}),c("div",{style:i.cardMiddle,children:[t("div",{style:{...i.urlText,...!x?i.urlTextOff:null},children:q(e)}),f?t("div",{style:i.extrasText,children:f}):null]}),e.hits>0?t("span",{style:i.rowHits,children:e.hits}):null,e.kind==="fail"?c("span",{style:i.failBadge,children:[t(P,{size:10,color:n.semantic.error}),t("span",{style:i.failText,children:e.failKind==="timeout"?"TIMEOUT":"OFFLINE"})]}):t("span",{style:{...i.statusText,color:m},children:e.kind==="delay"?"PASS":String(e.status??200)}),t("button",{type:"button",onClick:p=>{p.stopPropagation();a()},"aria-label":"Delete rule",style:i.rowDelete,children:t(L,{size:13,color:n.text.muted})})]})}export function NetworkOverridesScreen(e){if(!e.visible)return null;return t(Q,{...e})}function Q({isPro:e,onUpgradePress:r,pendingDraft:l,onPendingConsumed:a,backHandlerRef:x,applySafeAreaInset:m}){const{enabled:f,autoPaused:g,rules:p,activeCount:y,setEnabled:T,upsertRule:O,setRuleEnabled:D,removeRule:B,isRuleSpent:w}=$();const[d,h]=z(null);k(()=>{A.noteHealthyLaunch()},[]);k(()=>{if(!x)return;x.current=d?()=>{h(null);return true}:null;return()=>{x.current=null}},[x,d]);const S=F(o=>{void A.fetchRuleBody(o).then(s=>{if(s==null)return;h(v=>v?.id===o?{...v,draft:{...v.draft,body:s,bodyOmitted:void 0}}:v)})},[]);k(()=>{if(!l)return;const{id:o,...s}=l;h({id:o,draft:s});if(o&&s.bodyOmitted)S(o);a?.()},[l,a,S]);k(()=>{if(!d?.id)return;if(p.some(o=>o.id===d.id))return;h(null)},[d?.id,p]);const E=o=>{h({id:o.id,draft:Y(o)});if(o.bodyOmitted)S(o.id)};const W=o=>{if(e)return;p.filter(s=>s.enabled&&!w(s)&&s.id!==o).forEach(s=>D(s.id,false))};const M=()=>{if(!d)return;const o={...d.draft,enabled:true,urlPattern:d.draft.urlPattern.trim()};if(!o.urlPattern)return;const s=O({...o,id:d.id});W(s?.id??d.id);T(true);h(null)};if(d){return t(H,{draft:d.draft,onChange:o=>h({...d,draft:o}),onSave:M,onCancel:()=>h(null),saveLabel:d.id?"Save":"Add",applySafeAreaInset:m})}const C=p.length>0;return c("div",{style:i.root,children:[C?c("div",{style:{...i.bar,...f&&y>0?i.barOn:null},children:[f&&y>0?t(R,{size:12,color:n.semantic.warning}):null,t("span",{style:{...i.barText,...f&&y>0?i.barTextOn:null},children:g?"Overrides paused \u2014 they'd been on for 3 launches":f&&y>0?`${y} override${y===1?" is":"s are"} on`:"Overrides are off"}),t("button",{type:"button",onClick:()=>T(!(f&&y>0)),style:i.barButton,children:t("span",{style:i.barButtonText,children:f&&y>0?"Turn all off":g?"Turn back on":"Turn on"})})]}):null,c("div",{style:i.listHeader,children:[t("span",{style:i.listHeaderText,children:C?`${p.length} rule${p.length===1?"":"s"}`:""}),t("button",{type:"button",onClick:()=>h({draft:K()}),"aria-label":"New override rule",style:i.newButton,children:t(j,{size:14,color:n.semantic.info})})]}),!C?t("div",{style:i.emptyWrap,children:t(V,{icon:I,title:"Nothing overridden",description:"Open any request and tap Override, or + to write a rule."})}):t("div",{style:i.list,children:c("div",{style:i.listContent,children:[p.map(o=>t(J,{rule:o,spent:w(o),onEdit:()=>E(o),onDelete:()=>B(o.id)},o.id)),!e?t("span",{style:i.footNote,children:"Free: one override at a time. Pro: up to 50."}):null]})})]})}const i={root:{display:"flex",flexDirection:"column",flex:1,minHeight:0},bar:{display:"flex",flexDirection:"row",alignItems:"center",gap:8,padding:"10px 12px",borderBottom:`1px solid ${n.border.default}`,backgroundColor:n.background.card},barOn:{borderBottom:`1px solid ${n.semantic.warning}44`,backgroundColor:n.semantic.warningBackground},barText:{flex:1,minWidth:0,fontSize:12,fontWeight:600,color:n.text.secondary},barTextOn:{color:n.semantic.warning},barButton:{padding:"6px 10px",borderRadius:5,border:`1px solid ${n.border.hover}`,backgroundColor:n.background.base,cursor:"pointer",margin:0,flexShrink:0},barButtonText:{fontSize:11,fontWeight:700,color:n.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:n.text.muted,textTransform:"uppercase"},newButton:{display:"inline-flex",padding:6,borderRadius:5,border:`1px solid ${n.border.default}`,backgroundColor:n.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:n.text.primary,lineHeight:"16px",fontFamily:"ui-monospace, Menlo, monospace",display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden",overflowWrap:"anywhere"},urlTextOff:{color:n.text.muted},extrasText:{fontSize:10,color:n.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:`${n.semantic.error}26`,borderRadius:3,flexShrink:0},failText:{fontSize:10,color:n.semantic.error,fontWeight:600},rowHits:{fontSize:11,fontWeight:700,color:n.semantic.warning,flexShrink:0},rowDelete:{display:"inline-flex",padding:5,borderRadius:5,border:`1px solid ${n.border.default}`,backgroundColor:n.background.base,cursor:"pointer",margin:0,flexShrink:0},footNote:{fontSize:10,lineHeight:"14px",color:n.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:n.text.icon,fontSize:16,fontWeight:500,textAlign:"center",marginBottom:8},emptyDescription:{color:n.border.hover,fontSize:14,textAlign:"center",lineHeight:"20px"}};