@buoy-gg/network 7.0.40 → 7.0.42

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

@@ -1,623 +1 @@
-"use strict";
-
-/**
- * NetworkListScreen.web — DOM twin of NetworkListScreen.tsx.
- *
- * The network tool's LIST screen: owns the event-store subscription, the
- * scrolling list, the OVERRIDDEN and PINNED strips, empty state, disabled
- * banner, and the free-tier locked-history footer. Identical prop contract,
- * hook usage and derivation order as the native file — the data layer is
- * REUSED, not forked (`useNetworkEventList`, `useNetworkSaved`,
- * `useOverrideRules`, `ruleMatches`, `splitPinned` are all platform-free).
- *
- * Stable-tree contract (rule4): hooks run unconditionally, then the
- * component returns null when not visible. The subscription is gated with
- * `paused || !visible` so a hidden list doesn't subscribe at all.
- *
- * 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).
- *  - `NetworkUpgradeBanner` (which itself leans on shared-ui `ProBadge` +
- *    `Zap`) — inlined DOM twin below, values from
- *    NetworkUpgradeBanner.tsx + license/FeatureGate.tsx `proBadge` styles.
- *
- * Intentional deviations (all logged):
- *  - FlatList virtualization → a plain scrolled div. The store caps at 500
- *    events and web rows are cheap DOM; the window/batch tuning the native
- *    list carries is a FlatList-only concern.
- *    (`extraData={savedLiveIds}` is likewise moot — plain `map` has no
- *    PureComponent bail-out to bust.)
- *  - The upgrade banner's `ProBadge` renders the static gold "PRO" — the
- *    Weekend Pass variant reads `useProAccess` from @buoy-gg/license, which
- *    is not part of the web port.
- *  - `onEventPress` opens the detail view (ported in F3 as
- *    NetworkEventDetailView.web / NetworkDetailScreen.web) — callers wire the
- *    prop to `networkSelectionStore.select`, the screen just calls it
- *    (native behavior; nothing stubbed here).
- *  - Native's row tap opens the detail view and long-press toggles the pin;
- *    both are wired identically here (long-press = 500ms pointer hold, see
- *    NetworkEventItemCompact.web).
- *
- * F4 integration point: `ignoredPatterns` is a prop (same as native). The
- * native root feeds it from shared-ui's persisted `useIgnoredPatterns` store,
- * which the web shim does not expose — web hosts pass `[]` until the filter
- * feature lands.
- *
- * @platform React DOM Web
- */
-
-import { useCallback } from "react";
-import { NetworkEventItemCompact } from "./NetworkEventItemCompact.web";
-import { useNetworkEventList } from "../hooks/useNetworkEventList";
-import { useNetworkSaved } from "../hooks/useNetworkSaved";
-import { useOverrideRules } from "../hooks/useOverrideRules";
-import { ruleMatches } from "../overrides/matchRule";
-import { splitPinned } from "../utils/withPinnedFirst";
-
-// =============================
-// Native palettes (provenance)
-// =============================
-
-/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const macOSColors = {
-  background: {
-    card: "#1A1A1C"
-  },
-  border: {
-    default: "#2D2D2F"
-  },
-  text: {
-    primary: "#F5F5F7",
-    muted: "#8E8E93"
-  },
-  semantic: {
-    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",
-  text: "#E0E0E0",
-  textMuted: "#888888",
-  primary: "#20C997"
-};
-
-// =============================
-// 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 Globe = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M2 12h20"
-  })]
-});
-const Pin = ({
-  active,
-  ...p
-}) => /*#__PURE__*/_jsx(Svg, {
-  ...p,
-  children: /*#__PURE__*/_jsxs("g", {
-    transform: active ? "rotate(-45 12 12) translate(12 12) scale(0.92) translate(-12 -12)" : undefined,
-    children: [/*#__PURE__*/_jsx("path", {
-      d: "M2.97 21.03 8.18 15.82"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M4.4 10.81 13.19 19.6"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M5.17 10.54 11.43 8.83"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M13.46 18.83 15.17 12.57"
-    }), /*#__PURE__*/_jsx("rect", {
-      x: "12.15",
-      y: "5.4",
-      width: "9.38",
-      height: "3.52",
-      rx: "1.07",
-      transform: "rotate(-45 16.84 7.16)"
-    })]
-  })
-});
-const Power = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M12 2v10"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M18.4 6.6a9 9 0 1 1-12.77.04"
-  })]
-});
-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 Zap = p => /*#__PURE__*/_jsx(Svg, {
-  ...p,
-  children: /*#__PURE__*/_jsx("polygon", {
-    points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2"
-  })
-});
-
-// =============================
-// NetworkUpgradeBanner DOM twin (provenance: NetworkUpgradeBanner.tsx +
-// license/FeatureGate.tsx proBadge styles; ProBadge is static "PRO" — see
-// the deviations log)
-// =============================
-
-function NetworkUpgradeBannerWeb({
-  title,
-  subtitle,
-  onPress
-}) {
-  return /*#__PURE__*/_jsxs("button", {
-    type: "button",
-    style: styles.upgradeBanner,
-    onClick: onPress,
-    children: [/*#__PURE__*/_jsxs("span", {
-      style: styles.upgradeContent,
-      children: [/*#__PURE__*/_jsxs("span", {
-        style: styles.upgradeLeft,
-        children: [/*#__PURE__*/_jsx(Zap, {
-          size: 16,
-          color: buoy.primary
-        }), /*#__PURE__*/_jsx("span", {
-          style: styles.upgradeTitle,
-          children: title
-        })]
-      }), /*#__PURE__*/_jsx("span", {
-        style: styles.proBadge,
-        children: "PRO"
-      })]
-    }), /*#__PURE__*/_jsx("span", {
-      style: styles.upgradeSubtitle,
-      children: subtitle
-    })]
-  });
-}
-
-// =============================
-// Screen (structure mirrors the native file 1:1)
-// =============================
-
-function EmptyState({
-  isEnabled
-}) {
-  return /*#__PURE__*/_jsxs("div", {
-    style: styles.emptyState,
-    children: [/*#__PURE__*/_jsx(Globe, {
-      size: 32,
-      color: macOSColors.text.muted
-    }), /*#__PURE__*/_jsx("div", {
-      style: styles.emptyTitle,
-      children: "No network events"
-    }), /*#__PURE__*/_jsx("div", {
-      style: styles.emptyText,
-      children: isEnabled ? "Network requests will appear here" : "Enable interception to start capturing"
-    })]
-  });
-}
-
-/**
- * The PINNED strip above the live list. Renders OUTSIDE the scrolled list on
- * purpose — pins ignore the filters, are bounded at MAX_PINNED in the store,
- * and keeping them out of the list keeps the boundary from moving as events
- * arrive (same rationale as native).
- */
-function PinnedSection({
-  events,
-  onEventPress,
-  onLongPress,
-  savedLiveIds,
-  onClearPinned
-}) {
-  if (events.length === 0) return null;
-  return /*#__PURE__*/_jsxs("div", {
-    style: styles.pinnedSection,
-    children: [/*#__PURE__*/_jsxs("div", {
-      style: styles.pinnedHeader,
-      children: [/*#__PURE__*/_jsx(Pin, {
-        size: 11,
-        active: true,
-        color: macOSColors.semantic.info
-      }), /*#__PURE__*/_jsxs("span", {
-        style: styles.pinnedTitle,
-        children: ["PINNED \xB7 ", events.length]
-      }), /*#__PURE__*/_jsx("button", {
-        type: "button",
-        onClick: onClearPinned,
-        style: styles.pinnedClear,
-        children: /*#__PURE__*/_jsx("span", {
-          style: styles.pinnedClearText,
-          children: "Unpin all"
-        })
-      })]
-    }), events.map(event => /*#__PURE__*/_jsx(NetworkEventItemCompact, {
-      event: event,
-      onPress: onEventPress,
-      onLongPress: onLongPress,
-      pinned: true,
-      saved: savedLiveIds.has(event.id)
-    }, event.id))]
-  });
-}
-
-/**
- * The OVERRIDDEN strip, above the pins. Rows are matched against the RULES
- * rather than filtered on the `override` mark, and the header button is
- * PAUSE, not "Manage" — same reasoning as native (see NetworkListScreen.tsx).
- */
-function OverriddenSection({
-  events,
-  onEventPress,
-  onLongPress,
-  savedLiveIds,
-  paused,
-  onTogglePaused
-}) {
-  if (events.length === 0) return null;
-  return /*#__PURE__*/_jsxs("div", {
-    style: {
-      ...styles.overriddenSection,
-      ...(paused ? styles.overriddenSectionOff : null)
-    },
-    children: [/*#__PURE__*/_jsxs("div", {
-      style: styles.overriddenHeader,
-      children: [/*#__PURE__*/_jsx(FlaskConical, {
-        size: 11,
-        color: paused ? macOSColors.text.muted : macOSColors.semantic.warning
-      }), /*#__PURE__*/_jsx("span", {
-        style: {
-          ...styles.overriddenTitle,
-          ...(paused ? styles.overriddenTitleOff : null)
-        },
-        children: paused ? `PAUSED · ${events.length}` : `OVERRIDDEN · ${events.length}`
-      }), /*#__PURE__*/_jsx("button", {
-        type: "button",
-        onClick: onTogglePaused,
-        style: styles.overriddenManage,
-        children: /*#__PURE__*/_jsx("span", {
-          style: {
-            ...styles.overriddenManageText,
-            ...(paused ? styles.overriddenTitleOff : null)
-          },
-          children: paused ? "Resume" : "Pause"
-        })
-      })]
-    }), events.map(event => /*#__PURE__*/_jsx(NetworkEventItemCompact, {
-      event: event,
-      onPress: onEventPress,
-      onLongPress: onLongPress,
-      overridden: true,
-      saved: savedLiveIds.has(event.id)
-    }, event.id))]
-  });
-}
-export function NetworkListScreen({
-  visible,
-  paused,
-  filter,
-  ignoredPatterns,
-  isPro,
-  searchText,
-  onEventPress,
-  onUpgradePress
-}) {
-  const {
-    visibleEvents,
-    hasLockedEvents,
-    lockedEventCount
-  } = useNetworkEventList({
-    filter,
-    ignoredPatterns,
-    paused: paused || !visible,
-    isPro
-  });
-
-  // Pins come from the persisted saved store, NOT from the live list — that is
-  // what lets a pinned failure survive Clear, the 500-event cap and a reload.
-  const {
-    pinnedEvents,
-    pinnedLiveIds,
-    savedLiveIds,
-    togglePin,
-    clearPinned
-  } = useNetworkSaved();
-
-  // Which rules are live right now — the strip below reflects the rules, not
-  // the history, so it's correct the moment a rule is made or removed.
-  const {
-    rules,
-    enabled: overridesEnabled,
-    setEnabled,
-    isRuleSpent
-  } = useOverrideRules();
-
-  // Stable identity: handed to memoized rows.
-  const handleLongPress = useCallback(event => {
-    togglePin(event);
-  }, [togglePin]);
-
-  // Everything above is a hook and must run unconditionally; everything below
-  // is work (same rule4 contract as native).
-  if (!visible) return null;
-  const {
-    pinned,
-    rest
-  } = splitPinned(visibleEvents, pinnedEvents, pinnedLiveIds);
-
-  // Hoist anything an active rule covers. Done after `splitPinned` so a request
-  // that is both pinned and overridden appears once, in the louder section.
-  const activeRules = rules.filter(rule => rule.enabled && !isRuleSpent(rule));
-  const isOverridden = event => activeRules.some(rule => ruleMatches(rule, event.url, String(event.method || "GET")));
-  const overridden = activeRules.length ? [...pinned, ...rest].filter(isOverridden) : [];
-  const overriddenIds = new Set(overridden.map(event => event.id));
-  const pinnedRows = pinned.filter(event => !overriddenIds.has(event.id));
-  const restRows = overriddenIds.size ? rest.filter(event => !overriddenIds.has(event.id)) : rest;
-  const isEnabled = !paused;
-  const renderListFooter = () => {
-    if (!hasLockedEvents) return null;
-    const isSearching = searchText.length > 0;
-    const bannerText = isSearching ? `${lockedEventCount} matching ${lockedEventCount === 1 ? "request" : "requests"} in locked history` : `${lockedEventCount} requests locked`;
-    const subtextMessage = isSearching ? "Upgrade to Pro to search your full request history" : "Upgrade to Pro to unlock full request history";
-    return /*#__PURE__*/_jsx(NetworkUpgradeBannerWeb, {
-      title: bannerText,
-      subtitle: subtextMessage,
-      onPress: onUpgradePress
-    });
-  };
-  return /*#__PURE__*/_jsxs("div", {
-    style: styles.root,
-    children: [!isEnabled ? /*#__PURE__*/_jsxs("div", {
-      style: styles.disabledBanner,
-      children: [/*#__PURE__*/_jsx(Power, {
-        size: 14,
-        color: macOSColors.semantic.warning
-      }), /*#__PURE__*/_jsx("span", {
-        style: styles.disabledText,
-        children: "Network interception is disabled"
-      })]
-    }) : null, /*#__PURE__*/_jsx(OverriddenSection, {
-      events: overridden,
-      onEventPress: onEventPress,
-      onLongPress: handleLongPress,
-      savedLiveIds: savedLiveIds,
-      paused: !overridesEnabled,
-      onTogglePaused: () => setEnabled(!overridesEnabled)
-    }), /*#__PURE__*/_jsx(PinnedSection, {
-      events: pinnedRows,
-      onEventPress: onEventPress,
-      onLongPress: handleLongPress,
-      savedLiveIds: savedLiveIds,
-      onClearPinned: clearPinned
-    }), restRows.length > 0 || hasLockedEvents ?
-    /*#__PURE__*/
-    // DEVIATION: FlatList → plain scrolled div (see file header). The
-    // list still OWNS scrolling — hosts render this screen without a
-    // scroll wrapper (JsModal's `disableScrollWrapper`), same as native.
-    _jsx("div", {
-      style: styles.list,
-      "aria-label": "Network events list",
-      children: /*#__PURE__*/_jsxs("div", {
-        style: styles.listContent,
-        children: [restRows.map(item => /*#__PURE__*/_jsx(NetworkEventItemCompact, {
-          event: item,
-          onPress: onEventPress,
-          onLongPress: handleLongPress,
-          saved: savedLiveIds.has(item.id)
-        }, item.id)), renderListFooter()]
-      })
-    }) : pinnedRows.length > 0 || overridden.length > 0 ? null : /*#__PURE__*/_jsx(EmptyState, {
-      isEnabled: isEnabled
-    })]
-  });
-}
-
-// Values mirror the native StyleSheet block 1:1.
-const styles = {
-  root: {
-    display: "flex",
-    flexDirection: "column",
-    flex: 1,
-    minHeight: 0
-  },
-  /**
-   * The strip is separated from the live list by a real rule, not just space:
-   * these rows do NOT obey the filters, and the boundary is what tells the
-   * user why a request they just filtered out is still on screen.
-   */
-  overriddenSection: {
-    borderBottom: `1px solid ${macOSColors.semantic.warning}44`,
-    backgroundColor: macOSColors.semantic.warningBackground
-  },
-  overriddenSectionOff: {
-    borderBottom: `1px solid ${macOSColors.border.default}`,
-    backgroundColor: macOSColors.background.card
-  },
-  overriddenTitleOff: {
-    color: macOSColors.text.muted
-  },
-  overriddenHeader: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    padding: "8px 12px 4px"
-  },
-  overriddenTitle: {
-    flex: 1,
-    fontSize: 10,
-    fontWeight: 700,
-    letterSpacing: 0.8,
-    color: macOSColors.semantic.warning
-  },
-  overriddenManage: {
-    padding: "2px 6px",
-    background: "none",
-    border: "none",
-    cursor: "pointer",
-    margin: 0
-  },
-  overriddenManageText: {
-    fontSize: 10,
-    fontWeight: 600,
-    color: macOSColors.semantic.warning
-  },
-  pinnedSection: {
-    borderBottom: `1px solid ${macOSColors.border.default}`,
-    paddingBottom: 4
-  },
-  pinnedHeader: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    padding: "10px 20px 6px"
-  },
-  pinnedTitle: {
-    flex: 1,
-    color: macOSColors.semantic.info,
-    fontSize: 10,
-    fontWeight: 700,
-    letterSpacing: 0.6,
-    fontFamily: "ui-monospace, Menlo, monospace"
-  },
-  pinnedClear: {
-    padding: "2px 6px",
-    background: "none",
-    border: "none",
-    cursor: "pointer",
-    margin: 0
-  },
-  pinnedClearText: {
-    color: macOSColors.text.muted,
-    fontSize: 10
-  },
-  disabledBanner: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    padding: 10,
-    margin: "8px 12px 0",
-    backgroundColor: macOSColors.semantic.warningBackground,
-    borderRadius: 8,
-    border: `1px solid ${macOSColors.semantic.warning}20`
-  },
-  disabledText: {
-    color: macOSColors.semantic.warning,
-    fontSize: 11,
-    flex: 1
-  },
-  list: {
-    flex: 1,
-    minHeight: 0,
-    overflowY: "auto"
-  },
-  listContent: {
-    paddingTop: 8
-  },
-  emptyState: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    padding: "40px 0"
-  },
-  emptyTitle: {
-    color: macOSColors.text.primary,
-    fontSize: 14,
-    fontWeight: 600,
-    marginTop: 12,
-    marginBottom: 6
-  },
-  emptyText: {
-    color: macOSColors.text.muted,
-    fontSize: 12,
-    textAlign: "center"
-  },
-  // NetworkUpgradeBanner.tsx values (buoyColors), verbatim.
-  upgradeBanner: {
-    display: "block",
-    width: "calc(100% - 24px)",
-    boxSizing: "border-box",
-    backgroundColor: buoy.card,
-    borderRadius: 10,
-    border: `1px solid ${buoy.primary}40`,
-    padding: 12,
-    margin: "12px 12px 34px",
-    textAlign: "left",
-    cursor: "pointer",
-    fontFamily: "inherit"
-  },
-  upgradeContent: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: 4
-  },
-  upgradeLeft: {
-    display: "inline-flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  upgradeTitle: {
-    color: buoy.text,
-    fontSize: 13,
-    fontWeight: 600
-  },
-  upgradeSubtitle: {
-    display: "block",
-    color: buoy.textMuted,
-    fontSize: 11
-  },
-  // license/FeatureGate.tsx `proBadge`/`proBadgeText`, verbatim.
-  proBadge: {
-    display: "inline-flex",
-    backgroundColor: `${buoy.primary}15`,
-    borderRadius: 4,
-    border: `1px solid ${buoy.primary}40`,
-    padding: "2px 6px",
-    fontSize: 10,
-    fontWeight: 700,
-    color: buoy.primary,
-    letterSpacing: 0.5
-  }
-};
+"use strict";import{useCallback as W}from"react";import{NetworkEventItemCompact as v}from"./NetworkEventItemCompact.web";import{useNetworkEventList as j}from"../hooks/useNetworkEventList";import{useNetworkSaved as q}from"../hooks/useNetworkSaved";import{useOverrideRules as H}from"../hooks/useOverrideRules";import{overriddenEvents as U}from"../overrides/overriddenRows";import{splitPinned as V}from"../utils/withPinnedFirst";import{jsx as e,jsxs as o}from"react/jsx-runtime";const r={background:{card:"#1A1A1C"},border:{default:"#2D2D2F"},text:{primary:"#F5F5F7",muted:"#8E8E93"},semantic:{warning:"#FFEB3B",warningBackground:"rgba(255, 235, 59, 0.15)",info:"#00B8E6"}};const s={card:"#1A1A1A",text:"#E0E0E0",textMuted:"#888888",primary:"#20C997"};function u({size:n=14,color:d="currentColor",children:a}){return e("svg",{width:n,height:n,viewBox:"0 0 24 24",fill:"none",stroke:d,strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0,display:"block"},children:a})}const _=n=>o(u,{...n,children:[e("circle",{cx:"12",cy:"12",r:"10"}),e("path",{d:"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"}),e("path",{d:"M2 12h20"})]});const G=({active:n,...d})=>e(u,{...d,children:o("g",{transform:n?"rotate(-45 12 12) translate(12 12) scale(0.92) translate(-12 -12)":void 0,children:[e("path",{d:"M2.97 21.03 8.18 15.82"}),e("path",{d:"M4.4 10.81 13.19 19.6"}),e("path",{d:"M5.17 10.54 11.43 8.83"}),e("path",{d:"M13.46 18.83 15.17 12.57"}),e("rect",{x:"12.15",y:"5.4",width:"9.38",height:"3.52",rx:"1.07",transform:"rotate(-45 16.84 7.16)"})]})});const Y=n=>o(u,{...n,children:[e("path",{d:"M12 2v10"}),e("path",{d:"M18.4 6.6a9 9 0 1 1-12.77.04"})]});const Z=n=>o(u,{...n,children:[e("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"}),e("path",{d:"M8.5 2h7"}),e("path",{d:"M7 16h10"})]});const J=n=>e(u,{...n,children:e("polygon",{points:"13 2 3 14 12 14 11 22 21 10 12 10 13 2"})});function K({title:n,subtitle:d,onPress:a}){return o("button",{type:"button",style:t.upgradeBanner,onClick:a,children:[o("span",{style:t.upgradeContent,children:[o("span",{style:t.upgradeLeft,children:[e(J,{size:16,color:s.primary}),e("span",{style:t.upgradeTitle,children:n})]}),e("span",{style:t.proBadge,children:"PRO"})]}),e("span",{style:t.upgradeSubtitle,children:d})]})}function Q({isEnabled:n}){return o("div",{style:t.emptyState,children:[e(_,{size:32,color:r.text.muted}),e("div",{style:t.emptyTitle,children:"No network events"}),e("div",{style:t.emptyText,children:n?"Network requests will appear here":"Enable interception to start capturing"})]})}function X({events:n,onEventPress:d,onLongPress:a,savedLiveIds:g,onClearPinned:l}){if(n.length===0)return null;return o("div",{style:t.pinnedSection,children:[o("div",{style:t.pinnedHeader,children:[e(G,{size:11,active:true,color:r.semantic.info}),o("span",{style:t.pinnedTitle,children:["PINNED \xB7 ",n.length]}),e("button",{type:"button",onClick:l,style:t.pinnedClear,children:e("span",{style:t.pinnedClearText,children:"Unpin all"})})]}),n.map(c=>e(v,{event:c,onPress:d,onLongPress:a,pinned:true,saved:g.has(c.id)},c.id))]})}function ee({events:n,onEventPress:d,onLongPress:a,savedLiveIds:g,paused:l,onTogglePaused:c}){if(n.length===0)return null;return o("div",{style:{...t.overriddenSection,...l?t.overriddenSectionOff:null},children:[o("div",{style:t.overriddenHeader,children:[e(Z,{size:11,color:l?r.text.muted:r.semantic.warning}),e("span",{style:{...t.overriddenTitle,...l?t.overriddenTitleOff:null},children:l?`PAUSED \xB7 ${n.length}`:`OVERRIDDEN \xB7 ${n.length}`}),e("button",{type:"button",onClick:c,style:t.overriddenManage,children:e("span",{style:{...t.overriddenManageText,...l?t.overriddenTitleOff:null},children:l?"Resume":"Pause"})})]}),n.map(p=>e(v,{event:p,onPress:d,onLongPress:a,overridden:true,saved:g.has(p.id)},p.id))]})}export function NetworkListScreen({visible:n,paused:d,filter:a,ignoredPatterns:g,isPro:l,searchText:c,onEventPress:p,onUpgradePress:B}){const{visibleEvents:L,hasLockedEvents:k,lockedEventCount:f}=j({filter:a,ignoredPatterns:g,paused:d||!n,isPro:l});const{pinnedEvents:M,pinnedLiveIds:z,savedLiveIds:h,togglePin:w,clearPinned:I}=q();const{rules:D,enabled:S,setEnabled:N,isRuleSpent:R}=H();const m=W(i=>{w(i)},[w]);if(!n)return null;const{pinned:C,rest:x}=V(L,M,z);const $=D.filter(i=>i.enabled&&!R(i));const y=U([...C,...x],$);const b=new Set(y.map(i=>i.id));const E=C.filter(i=>!b.has(i.id));const P=b.size?x.filter(i=>!b.has(i.id)):x;const T=!d;const F=()=>{if(!k)return null;const i=c.length>0;const O=i?`${f} matching ${f===1?"request":"requests"} in locked history`:`${f} requests locked`;const A=i?"Upgrade to Pro to search your full request history":"Upgrade to Pro to unlock full request history";return e(K,{title:O,subtitle:A,onPress:B})};return o("div",{style:t.root,children:[!T?o("div",{style:t.disabledBanner,children:[e(Y,{size:14,color:r.semantic.warning}),e("span",{style:t.disabledText,children:"Network interception is disabled"})]}):null,e(ee,{events:y,onEventPress:p,onLongPress:m,savedLiveIds:h,paused:!S,onTogglePaused:()=>N(!S)}),e(X,{events:E,onEventPress:p,onLongPress:m,savedLiveIds:h,onClearPinned:I}),P.length>0||k?e("div",{style:t.list,"aria-label":"Network events list",children:o("div",{style:t.listContent,children:[P.map(i=>e(v,{event:i,onPress:p,onLongPress:m,saved:h.has(i.id)},i.id)),F()]})}):E.length>0||y.length>0?null:e(Q,{isEnabled:T})]})}const t={root:{display:"flex",flexDirection:"column",flex:1,minHeight:0},overriddenSection:{borderBottom:`1px solid ${r.semantic.warning}44`,backgroundColor:r.semantic.warningBackground},overriddenSectionOff:{borderBottom:`1px solid ${r.border.default}`,backgroundColor:r.background.card},overriddenTitleOff:{color:r.text.muted},overriddenHeader:{display:"flex",flexDirection:"row",alignItems:"center",gap:6,padding:"8px 12px 4px"},overriddenTitle:{flex:1,fontSize:10,fontWeight:700,letterSpacing:.8,color:r.semantic.warning},overriddenManage:{padding:"2px 6px",background:"none",border:"none",cursor:"pointer",margin:0},overriddenManageText:{fontSize:10,fontWeight:600,color:r.semantic.warning},pinnedSection:{borderBottom:`1px solid ${r.border.default}`,paddingBottom:4},pinnedHeader:{display:"flex",flexDirection:"row",alignItems:"center",gap:6,padding:"10px 20px 6px"},pinnedTitle:{flex:1,color:r.semantic.info,fontSize:10,fontWeight:700,letterSpacing:.6,fontFamily:"ui-monospace, Menlo, monospace"},pinnedClear:{padding:"2px 6px",background:"none",border:"none",cursor:"pointer",margin:0},pinnedClearText:{color:r.text.muted,fontSize:10},disabledBanner:{display:"flex",flexDirection:"row",alignItems:"center",gap:8,padding:10,margin:"8px 12px 0",backgroundColor:r.semantic.warningBackground,borderRadius:8,border:`1px solid ${r.semantic.warning}20`},disabledText:{color:r.semantic.warning,fontSize:11,flex:1},list:{flex:1,minHeight:0,overflowY:"auto"},listContent:{paddingTop:8},emptyState:{display:"flex",flexDirection:"column",alignItems:"center",padding:"40px 0"},emptyTitle:{color:r.text.primary,fontSize:14,fontWeight:600,marginTop:12,marginBottom:6},emptyText:{color:r.text.muted,fontSize:12,textAlign:"center"},upgradeBanner:{display:"block",width:"calc(100% - 24px)",boxSizing:"border-box",backgroundColor:s.card,borderRadius:10,border:`1px solid ${s.primary}40`,padding:12,margin:"12px 12px 34px",textAlign:"left",cursor:"pointer",fontFamily:"inherit"},upgradeContent:{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:4},upgradeLeft:{display:"inline-flex",flexDirection:"row",alignItems:"center",gap:8},upgradeTitle:{color:s.text,fontSize:13,fontWeight:600},upgradeSubtitle:{display:"block",color:s.textMuted,fontSize:11},proBadge:{display:"inline-flex",backgroundColor:`${s.primary}15`,borderRadius:4,border:`1px solid ${s.primary}40`,padding:"2px 6px",fontSize:10,fontWeight:700,color:s.primary,letterSpacing:.5}};