@buoy-gg/network 7.0.41 → 7.0.42

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

@@ -1,1306 +1 @@
-"use strict";
-
-/**
- * NetworkFilterViewV3.web — DOM twin of NetworkFilterViewV3.tsx.
- *
- * Same props, same filter semantics, same screen inventory. Natively the
- * screen is a thin config over shared-ui's `DynamicFilterView`; the web shim
- * doesn't ship that component, so this twin renders the exact subtree
- * DynamicFilterView produces FOR THIS CONFIG (no tabs, no filter-summary, no
- * include-only, no preview — those config branches are disabled natively and
- * are not ported):
- *
- *  1. Facet card sections — Status (All/Success/Error/Pending, icon + count),
- *     Method (colored method badge + count, no label — native's
- *     `showLabel = type !== "method"`), Content Type (icon + count + label).
- *     Same single-select method/content-type replace behavior
- *     (`handleDynamicFilterChange` is native's handler, verbatim).
- *  2. ACTIVE FILTERS — add-pattern button → input (with the Match:
- *     Contains/Exact mode toggle rendered above it, native `renderExtra`),
- *     and the pattern list where each row removes on click and carries the
- *     CONTAINS/EXACT mode badge (native `renderPatternMeta`) that toggles the
- *     pattern's match mode.
- *  3. AVAILABLE DOMAINS & URLS — host + origin+pathname suggestions from the
- *     visible events (30 per group), click-to-add with the currently selected
- *     mode; suggestions already covered by an active pattern are hidden
- *     (native's `item.includes(pattern)` filter).
- *  4. HOW NETWORK FILTERS WORK — description + examples.
- *
- * shared-ui RN chrome replicated as DOM with provenance:
- *  - `buoyColors` — inlined verbatim subset from
- *    shared/src/ui/gameUI/constants/gameUIColors.ts (DynamicFilterView /
- *    SectionHeader / FilterComponents palette).
- *  - `macOSColors` — inlined verbatim subset from
- *    shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts (the mode
- *    toggle/badge palette the native screen uses directly).
- *  - Icons — inline lucide SVGs (shared-ui's icons are lucide re-exports).
- *  - Native card glow (`shadowColor` primary, opacity 0.3, radius 8) → an
- *    equivalent CSS box-shadow; native text shadows → CSS text-shadow.
- *
- * Intentional deviations (all logged):
- *  - Pattern rows nest a pressable mode badge inside a pressable row; RN's
- *    inner Touchable swallows the press, DOM needs `stopPropagation()` on the
- *    badge so toggling a mode doesn't also remove the pattern.
- *  - Native's `adjustsFontSizeToFit` on the method badge has no DOM
- *    equivalent — long method names ellipsize at the same max width instead.
- *  - The add-pattern input autofocuses via the `autoFocus` attribute rather
- *    than RN's imperative focus.
- *
- * @platform React DOM Web
- */
-
-import { useCallback, useMemo, useState } from "react";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// =============================
-// Native palettes (provenance)
-// =============================
-
-/** buoyColors subset — shared/src/ui/gameUI/constants/gameUIColors.ts, verbatim. */
-const buoyColors = {
-  base: "#121212",
-  card: "#1A1A1A",
-  hover: "#242424",
-  input: "#2A2A2A",
-  border: "#333333",
-  text: "#E0E0E0",
-  textSecondary: "#A0A0A0",
-  textMuted: "#888888",
-  primary: "#20C997"
-};
-
-/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */
-const macOSColors = {
-  background: {
-    hover: "#1D1D1F"
-  },
-  border: {
-    default: "#2D2D2F"
-  },
-  text: {
-    secondary: "#A1A1A6",
-    muted: "#8E8E93"
-  },
-  semantic: {
-    success: "#34C759",
-    error: "#FF453A",
-    warning: "#FFEB3B",
-    info: "#00B8E6",
-    debug: "#BF5AF2"
-  }
-};
-
-// =============================
-// 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 CheckCircle = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M21.801 10A10 10 0 1 1 17 3.335"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "m9 11 3 3L22 4"
-  })]
-});
-const XCircle = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "m15 9-6 6"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "m9 9 6 6"
-  })]
-});
-const Clock = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/_jsx("polyline", {
-    points: "12 6 12 12 16 14"
-  })]
-});
-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 FileJson = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M14 2v4a2 2 0 0 0 2 2h4"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M4 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M8 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1"
-  })]
-});
-const FileText = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M14 2v4a2 2 0 0 0 2 2h4"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M10 9H8"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M16 13H8"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M16 17H8"
-  })]
-});
-const ImageIcon = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("rect", {
-    width: "18",
-    height: "18",
-    x: "3",
-    y: "3",
-    rx: "2",
-    ry: "2"
-  }), /*#__PURE__*/_jsx("circle", {
-    cx: "9",
-    cy: "9",
-    r: "2"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
-  })]
-});
-const Film = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("rect", {
-    width: "18",
-    height: "18",
-    x: "3",
-    y: "3",
-    rx: "2"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M7 3v18"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M3 7.5h4"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M3 12h18"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M3 16.5h4"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M17 3v18"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M17 7.5h4"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M17 16.5h4"
-  })]
-});
-const Music = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M9 18V5l12-2v13"
-  }), /*#__PURE__*/_jsx("circle", {
-    cx: "6",
-    cy: "18",
-    r: "3"
-  }), /*#__PURE__*/_jsx("circle", {
-    cx: "18",
-    cy: "16",
-    r: "3"
-  })]
-});
-const Filter = p => /*#__PURE__*/_jsx(Svg, {
-  ...p,
-  children: /*#__PURE__*/_jsx("polygon", {
-    points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"
-  })
-});
-const Plus = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M5 12h14"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M12 5v14"
-  })]
-});
-const X = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M18 6 6 18"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "m6 6 12 12"
-  })]
-});
-
-// =============================
-// Native helpers (verbatim from NetworkFilterViewV3.tsx)
-// =============================
-
-function getContentType(event) {
-  const headers = event.responseHeaders || event.requestHeaders;
-  const contentType = headers?.["content-type"] || headers?.["Content-Type"] || "";
-  if (contentType.includes("json")) return {
-    type: "JSON",
-    color: macOSColors.semantic.info
-  };
-  if (contentType.includes("xml")) return {
-    type: "XML",
-    color: macOSColors.semantic.success
-  };
-  if (contentType.includes("html")) return {
-    type: "HTML",
-    color: macOSColors.semantic.warning
-  };
-  if (contentType.includes("text")) return {
-    type: "TEXT",
-    color: macOSColors.semantic.success
-  };
-  if (contentType.includes("image")) return {
-    type: "IMAGE",
-    color: macOSColors.semantic.error
-  };
-  if (contentType.includes("video")) return {
-    type: "VIDEO",
-    color: macOSColors.semantic.error
-  };
-  if (contentType.includes("audio")) return {
-    type: "AUDIO",
-    color: macOSColors.semantic.debug
-  };
-  if (contentType.includes("form")) return {
-    type: "FORM",
-    color: macOSColors.semantic.info
-  };
-  return {
-    type: "OTHER",
-    color: macOSColors.text.muted
-  };
-}
-function getContentTypeIcon(type) {
-  switch (type) {
-    case "JSON":
-      return FileJson;
-    case "HTML":
-    case "XML":
-    case "TEXT":
-      return FileText;
-    case "IMAGE":
-      return ImageIcon;
-    case "VIDEO":
-      return Film;
-    case "AUDIO":
-      return Music;
-    default:
-      return Globe;
-  }
-}
-function getMethodColor(method) {
-  switch (method) {
-    case "GET":
-      return macOSColors.semantic.success;
-    case "POST":
-      return macOSColors.semantic.info;
-    case "PUT":
-      return macOSColors.semantic.warning;
-    case "DELETE":
-      return macOSColors.semantic.error;
-    case "PATCH":
-      return macOSColors.semantic.success;
-    default:
-      return macOSColors.text.muted;
-  }
-}
-
-// =============================
-// DOM twins of the shared-ui pieces DynamicFilterView composes
-// =============================
-
-/** SectionHeader twin — shared/src/ui/components/SectionHeader.tsx. */
-function SectionHeader({
-  icon: Icon,
-  iconColor,
-  title,
-  badgeCount,
-  badgeColor
-}) {
-  return /*#__PURE__*/_jsxs("div", {
-    style: styles.sectionHeader,
-    children: [Icon ? /*#__PURE__*/_jsx("span", {
-      style: styles.sectionHeaderIcon,
-      children: /*#__PURE__*/_jsx(Icon, {
-        size: 12,
-        color: iconColor ?? buoyColors.primary
-      })
-    }) : null, /*#__PURE__*/_jsx("span", {
-      style: styles.sectionHeaderTitle,
-      children: title
-    }), badgeCount !== undefined ? /*#__PURE__*/_jsx("span", {
-      style: {
-        ...styles.sectionHeaderBadge,
-        backgroundColor: `${badgeColor ?? buoyColors.primary}15`,
-        border: `1px solid ${badgeColor ?? buoyColors.primary}33`
-      },
-      children: /*#__PURE__*/_jsx("span", {
-        style: {
-          ...styles.sectionHeaderBadgeText,
-          color: badgeColor ?? buoyColors.primary
-        },
-        children: badgeCount
-      })
-    }) : null]
-  });
-}
-
-/** AddFilterButton twin — shared/src/ui/components/FilterComponents.tsx. */
-function AddFilterButton({
-  onPress,
-  color,
-  label
-}) {
-  return /*#__PURE__*/_jsxs("button", {
-    type: "button",
-    onClick: onPress,
-    style: {
-      ...styles.addButton,
-      borderColor: `${color}40`
-    },
-    children: [/*#__PURE__*/_jsx(Plus, {
-      size: 14,
-      color: color
-    }), /*#__PURE__*/_jsx("span", {
-      style: {
-        ...styles.addButtonText,
-        color
-      },
-      children: label
-    })]
-  });
-}
-
-/** AddFilterInput twin — shared/src/ui/components/FilterComponents.tsx. */
-function AddFilterInput({
-  value,
-  onChange,
-  onSubmit,
-  onCancel,
-  placeholder,
-  color
-}) {
-  return /*#__PURE__*/_jsxs("div", {
-    style: {
-      ...styles.inputContainer,
-      borderColor: `${color}40`
-    },
-    children: [/*#__PURE__*/_jsx("input", {
-      value: value,
-      onChange: e => onChange(e.target.value),
-      onKeyDown: e => {
-        if (e.key === "Enter") onSubmit();
-      },
-      placeholder: placeholder,
-      style: {
-        ...styles.input,
-        color
-      },
-      autoFocus: true,
-      autoCorrect: "off",
-      autoCapitalize: "none",
-      autoComplete: "off",
-      spellCheck: false
-    }), /*#__PURE__*/_jsxs("div", {
-      style: styles.inputButtons,
-      children: [value.trim() ? /*#__PURE__*/_jsx("button", {
-        type: "button",
-        onClick: onSubmit,
-        style: {
-          ...styles.inlineAddButton,
-          backgroundColor: `${color}15`,
-          borderColor: `${color}40`
-        },
-        children: /*#__PURE__*/_jsx("span", {
-          style: {
-            ...styles.inlineAddButtonText,
-            color
-          },
-          children: "Add"
-        })
-      }) : null, /*#__PURE__*/_jsx("button", {
-        type: "button",
-        onClick: onCancel,
-        style: styles.cancelButton,
-        children: /*#__PURE__*/_jsx(X, {
-          size: 16,
-          color: `${color}60`
-        })
-      })]
-    })]
-  });
-}
-
-/**
- * Control panel for filtering captured network events by status, method, and
- * content type, plus ignored-pattern management — same surface as native.
- */
-export function NetworkFilterViewV3({
-  events,
-  filter,
-  onFilterChange,
-  ignoredPatterns = [],
-  onRemovePattern = () => {},
-  onAddPattern = () => {},
-  onTogglePatternMode = () => {}
-}) {
-  // Mode applied when the user submits the "Add pattern" input. Defaults to
-  // `contains` so behavior matches the previous implementation until the user
-  // opts into `exact`. (Native state, verbatim.)
-  const [nextPatternMode, setNextPatternMode] = useState("contains");
-
-  // DynamicFilterView's `useFilterManager` input UI state — the subset this
-  // config exercises (show/hide the add input + the draft value).
-  const [showAddInput, setShowAddInput] = useState(false);
-  const [newFilter, setNewFilter] = useState("");
-  const patternModes = useMemo(() => {
-    const map = new Map();
-    for (const p of ignoredPatterns) map.set(p.value, p.mode);
-    return map;
-  }, [ignoredPatterns]);
-  const activePatterns = useMemo(() => ignoredPatterns.map(p => p.value), [ignoredPatterns]);
-  const handlePatternAdd = useCallback(pattern => {
-    onAddPattern({
-      value: pattern,
-      mode: nextPatternMode
-    });
-  }, [onAddPattern, nextPatternMode]);
-
-  // DynamicFilterView.handleAddPattern: forward the trimmed draft, then reset
-  // the input UI (its filterManager.addFilter side effect).
-  const submitDraftPattern = useCallback(() => {
-    const trimmed = newFilter.trim();
-    if (!trimmed) return;
-    handlePatternAdd(trimmed);
-    setNewFilter("");
-    setShowAddInput(false);
-  }, [newFilter, handlePatternAdd]);
-  const statusCounts = useMemo(() => {
-    const counts = {
-      all: events.length,
-      success: 0,
-      error: 0,
-      pending: 0
-    };
-    events.forEach(event => {
-      if (event.error || event.status && event.status >= 400) {
-        counts.error += 1;
-        return;
-      }
-      if (event.status && event.status >= 200 && event.status < 300) {
-        counts.success += 1;
-        return;
-      }
-      if (!event.status && !event.error) {
-        counts.pending += 1;
-      }
-    });
-    return counts;
-  }, [events]);
-  const methodCounts = useMemo(() => {
-    return events.reduce((acc, event) => {
-      if (!event.method) return acc;
-      acc[event.method] = (acc[event.method] || 0) + 1;
-      return acc;
-    }, {});
-  }, [events]);
-  const contentTypeCounts = useMemo(() => {
-    return events.reduce((acc, event) => {
-      const {
-        type
-      } = getContentType(event);
-      acc[type] = (acc[type] || 0) + 1;
-      return acc;
-    }, {});
-  }, [events]);
-  const availableDomains = useMemo(() => {
-    const domains = new Set();
-    events.forEach(event => {
-      if (event.host) {
-        domains.add(event.host);
-        return;
-      }
-      try {
-        if (event.url) {
-          const parsed = new URL(event.url);
-          const host = String(parsed.host || "");
-          if (host) domains.add(host);
-        }
-      } catch {
-        // Ignore relative URLs
-      }
-    });
-    return Array.from(domains).filter(domain => domain && domain !== "").sort((a, b) => a.localeCompare(b));
-  }, [events]);
-  const availableUrls = useMemo(() => {
-    const urls = new Set();
-    events.forEach(event => {
-      if (!event.url) return;
-      try {
-        const parsed = new URL(event.url);
-        const origin = String(parsed.origin || "");
-        const pathname = String(parsed.pathname || "");
-        const normalized = `${origin}${pathname}`;
-        urls.add(normalized);
-      } catch {
-        // URL constructor fails for relative paths - fall back to raw value
-        urls.add(event.url);
-      }
-    });
-    return Array.from(urls).filter(url => url && url !== "").sort((a, b) => a.localeCompare(b));
-  }, [events]);
-  const suggestionItems = useMemo(() => {
-    const maxItemsPerGroup = 30;
-    const domainSuggestions = availableDomains.slice(0, maxItemsPerGroup);
-    const urlSuggestions = availableUrls.slice(0, maxItemsPerGroup);
-    return [...domainSuggestions, ...urlSuggestions];
-  }, [availableDomains, availableUrls]);
-
-  // DynamicFilterView.suggestedItems: hide suggestions any active pattern
-  // already covers (substring test, native verbatim).
-  const suggestedItems = useMemo(() => suggestionItems.filter(item => !activePatterns.some(pattern => item.includes(pattern))), [suggestionItems, activePatterns]);
-  const handleDynamicFilterChange = useCallback((optionId, value) => {
-    const [group] = optionId.split("::");
-    if (group === "status") {
-      const nextStatus = value === "all" ? undefined : value;
-      onFilterChange({
-        ...filter,
-        status: nextStatus
-      });
-      return;
-    }
-    if (group === "method") {
-      const methodValue = String(value);
-      const currentMethods = filter.method || [];
-      const hasMethod = currentMethods.includes(methodValue);
-      const updatedMethods = hasMethod ? currentMethods.filter(method => method !== methodValue) : [methodValue];
-      onFilterChange({
-        ...filter,
-        method: updatedMethods.length > 0 ? updatedMethods : undefined
-      });
-      return;
-    }
-    if (group === "contentType") {
-      const typeValue = String(value);
-      const currentTypes = filter.contentType || [];
-      const hasType = currentTypes.includes(typeValue);
-      const updatedTypes = hasType ? currentTypes.filter(type => type !== typeValue) : [typeValue];
-      onFilterChange({
-        ...filter,
-        contentType: updatedTypes.length > 0 ? updatedTypes : undefined
-      });
-    }
-  }, [filter, onFilterChange]);
-
-  // =============================
-  // Renderers (DynamicFilterView subtree for this config)
-  // =============================
-
-  const renderFilterCard = option => {
-    const countIsZero = option.count === 0;
-    // Native: showLabel = section.type !== "method" || option.icon
-    const showLabel = !option.isMethod || option.icon;
-    return /*#__PURE__*/_jsxs("button", {
-      type: "button",
-      onClick: () => handleDynamicFilterChange(option.id, option.value),
-      style: {
-        ...styles.filterCard,
-        ...(option.isActive ? styles.activeFilterCard : null)
-      },
-      children: [option.icon ? /*#__PURE__*/_jsx(option.icon, {
-        size: 24,
-        color: option.color
-      }) : option.isMethod ? /*#__PURE__*/_jsx("span", {
-        style: {
-          ...styles.methodBadgeCompact,
-          backgroundColor: `${option.color}20`
-        },
-        children: /*#__PURE__*/_jsx("span", {
-          style: {
-            ...styles.methodTextCompact,
-            color: option.color
-          },
-          children: option.label
-        })
-      }) : null, /*#__PURE__*/_jsx("span", {
-        style: countIsZero ? styles.filterCountZero : styles.filterCountActive,
-        children: option.count
-      }), showLabel ? /*#__PURE__*/_jsx("span", {
-        style: styles.filterLabelCompact,
-        children: option.label
-      }) : null]
-    }, option.id);
-  };
-  const statusOptions = ["all", "success", "error", "pending"].map(status => ({
-    id: `status::${status}`,
-    label: status.charAt(0).toUpperCase() + status.slice(1),
-    count: statusCounts[status],
-    icon: status === "success" ? CheckCircle : status === "error" ? XCircle : status === "pending" ? Clock : Globe,
-    color: status === "success" ? macOSColors.semantic.success : status === "error" ? macOSColors.semantic.error : status === "pending" ? macOSColors.semantic.warning : macOSColors.semantic.info,
-    isActive: filter.status === status || !filter.status && status === "all",
-    value: status
-  }));
-  const methodEntries = Object.entries(methodCounts);
-  const contentTypeEntries = Object.entries(contentTypeCounts);
-
-  // Native renderAddFilterExtra — the Match: Contains/Exact toggle shown
-  // above the pattern input.
-  const renderAddFilterExtra = () => {
-    const options = [{
-      label: "Contains",
-      value: "contains",
-      hint: "substring"
-    }, {
-      label: "Exact",
-      value: "exact",
-      hint: "whole path/host/url"
-    }];
-    return /*#__PURE__*/_jsxs("div", {
-      style: styles.modeToggleRow,
-      children: [/*#__PURE__*/_jsx("span", {
-        style: styles.modeToggleLabel,
-        children: "Match:"
-      }), /*#__PURE__*/_jsx("div", {
-        style: styles.modeToggleGroup,
-        children: options.map(opt => {
-          const isActive = nextPatternMode === opt.value;
-          return /*#__PURE__*/_jsxs("button", {
-            type: "button",
-            onClick: () => setNextPatternMode(opt.value),
-            "aria-pressed": isActive,
-            style: {
-              ...styles.modeToggleButton,
-              ...(isActive ? styles.modeToggleButtonActive : null)
-            },
-            children: [/*#__PURE__*/_jsx("span", {
-              style: {
-                ...styles.modeToggleButtonText,
-                ...(isActive ? styles.modeToggleButtonTextActive : null)
-              },
-              children: opt.label
-            }), /*#__PURE__*/_jsx("span", {
-              style: styles.modeToggleButtonHint,
-              children: opt.hint
-            })]
-          }, opt.value);
-        })
-      })]
-    });
-  };
-
-  // Native renderPatternMeta — the CONTAINS/EXACT badge on each pattern row.
-  const renderPatternMeta = pattern => {
-    const mode = patternModes.get(pattern) ?? "contains";
-    const isExact = mode === "exact";
-    const color = isExact ? macOSColors.semantic.warning : macOSColors.semantic.info;
-    return /*#__PURE__*/_jsx("button", {
-      type: "button",
-      "aria-label": `Match mode: ${mode}. Tap to toggle.`,
-      onClick: e => {
-        // DEVIATION (logged): RN's nested Touchable swallows the press; DOM
-        // must stop it reaching the row's remove handler.
-        e.stopPropagation();
-        onTogglePatternMode(pattern);
-      },
-      style: {
-        ...styles.modeBadge,
-        borderColor: `${color}60`,
-        backgroundColor: `${color}15`
-      },
-      children: /*#__PURE__*/_jsx("span", {
-        style: {
-          ...styles.modeBadgeText,
-          color
-        },
-        children: isExact ? "EXACT" : "CONTAINS"
-      })
-    });
-  };
-  return /*#__PURE__*/_jsx("div", {
-    style: styles.container,
-    children: /*#__PURE__*/_jsxs("div", {
-      style: styles.content,
-      children: [/*#__PURE__*/_jsxs("div", {
-        style: styles.section,
-        children: [/*#__PURE__*/_jsx(SectionHeader, {
-          title: "Status"
-        }), /*#__PURE__*/_jsx("div", {
-          style: styles.filterGrid,
-          children: statusOptions.map(renderFilterCard)
-        })]
-      }), methodEntries.length > 0 ? /*#__PURE__*/_jsxs("div", {
-        style: styles.section,
-        children: [/*#__PURE__*/_jsx(SectionHeader, {
-          title: "Method"
-        }), /*#__PURE__*/_jsx("div", {
-          style: styles.filterGrid,
-          children: methodEntries.map(([method, count]) => renderFilterCard({
-            id: `method::${method}`,
-            label: method,
-            count,
-            color: getMethodColor(method),
-            isActive: filter.method?.includes(method) ?? false,
-            value: method,
-            isMethod: true
-          }))
-        })]
-      }) : null, contentTypeEntries.length > 0 ? /*#__PURE__*/_jsxs("div", {
-        style: styles.section,
-        children: [/*#__PURE__*/_jsx(SectionHeader, {
-          title: "Content Type"
-        }), /*#__PURE__*/_jsx("div", {
-          style: styles.filterGrid,
-          children: contentTypeEntries.map(([type, count]) => {
-            const representativeEvent = events.find(event => getContentType(event).type === type);
-            const {
-              color
-            } = representativeEvent ? getContentType(representativeEvent) : {
-              color: macOSColors.text.muted
-            };
-            return renderFilterCard({
-              id: `contentType::${type}`,
-              label: type,
-              count,
-              icon: getContentTypeIcon(type),
-              color,
-              isActive: filter.contentType?.includes(type) ?? false,
-              value: type
-            });
-          })
-        })]
-      }) : null, /*#__PURE__*/_jsxs("div", {
-        style: styles.excludeFiltersSection,
-        children: [/*#__PURE__*/_jsx(SectionHeader, {
-          icon: Filter,
-          iconColor: buoyColors.primary,
-          title: "ACTIVE FILTERS",
-          badgeCount: activePatterns.length > 0 ? activePatterns.length : undefined,
-          badgeColor: buoyColors.primary
-        }), /*#__PURE__*/_jsx("div", {
-          style: styles.excludeFiltersDescription,
-          children: "Hide queries matching these patterns from the list."
-        }), /*#__PURE__*/_jsx("div", {
-          style: styles.excludeFiltersInputWrapper,
-          children: !showAddInput ? /*#__PURE__*/_jsx(AddFilterButton, {
-            onPress: () => setShowAddInput(true),
-            color: buoyColors.primary,
-            label: "Add exclude pattern"
-          }) : /*#__PURE__*/_jsxs(_Fragment, {
-            children: [renderAddFilterExtra(), /*#__PURE__*/_jsx(AddFilterInput, {
-              value: newFilter,
-              onChange: setNewFilter,
-              onSubmit: submitDraftPattern,
-              onCancel: () => {
-                setShowAddInput(false);
-                setNewFilter("");
-              },
-              placeholder: "Enter domain or URL pattern...",
-              color: buoyColors.primary
-            })]
-          })
-        }), activePatterns.length > 0 ? /*#__PURE__*/_jsx("div", {
-          style: styles.excludeFiltersContent,
-          children: /*#__PURE__*/_jsx("div", {
-            style: styles.filterListColumn,
-            children: activePatterns.map(pattern => /*#__PURE__*/_jsxs("button", {
-              type: "button",
-              onClick: () => onRemovePattern(pattern),
-              style: styles.filterItemRow,
-              children: [/*#__PURE__*/_jsx("span", {
-                style: {
-                  ...styles.filterItemText,
-                  color: buoyColors.primary
-                },
-                children: pattern
-              }), /*#__PURE__*/_jsx("span", {
-                style: styles.filterItemMeta,
-                children: renderPatternMeta(pattern)
-              }), /*#__PURE__*/_jsx(X, {
-                size: 12,
-                color: `${buoyColors.primary}80`
-              })]
-            }, pattern))
-          })
-        }) : null]
-      }), /*#__PURE__*/_jsxs("div", {
-        style: styles.availableKeysSection,
-        children: [/*#__PURE__*/_jsx(SectionHeader, {
-          icon: Plus,
-          iconColor: buoyColors.primary,
-          title: "AVAILABLE DOMAINS & URLS",
-          badgeCount: suggestedItems.length,
-          badgeColor: buoyColors.primary
-        }), /*#__PURE__*/_jsx("div", {
-          style: styles.availableKeysScroll,
-          children: suggestedItems.length > 0 ? suggestedItems.map(item => /*#__PURE__*/_jsxs("button", {
-            type: "button",
-            onClick: () => handlePatternAdd(item),
-            style: styles.availableKeyItem,
-            children: [/*#__PURE__*/_jsx("span", {
-              style: styles.availableKeyText,
-              children: item
-            }), /*#__PURE__*/_jsx(Plus, {
-              size: 12,
-              color: buoyColors.primary
-            })]
-          }, item)) : /*#__PURE__*/_jsx("div", {
-            style: styles.emptyStateText,
-            children: "No network events captured yet. Domains and URLs will appear here."
-          })
-        })]
-      }), /*#__PURE__*/_jsxs("div", {
-        style: styles.howItWorksSection,
-        children: [/*#__PURE__*/_jsx(SectionHeader, {
-          icon: Filter,
-          iconColor: buoyColors.textSecondary,
-          title: "HOW NETWORK FILTERS WORK"
-        }), /*#__PURE__*/_jsx("div", {
-          style: styles.howItWorksText,
-          children: "Patterns hide matching requests from the network event list. Each pattern has a match mode you can toggle on its badge: CONTAINS hides any URL containing the text; EXACT hides only an exact path/host/url match."
-        }), /*#__PURE__*/_jsxs("div", {
-          style: styles.examplesContainer,
-          children: [/*#__PURE__*/_jsx("div", {
-            style: styles.examplesTitle,
-            children: "EXAMPLES:"
-          }), ["• example.com (CONTAINS) → any request whose URL contains example.com", "• example.com (EXACT) → only requests served by that exact host", "• /v1 (CONTAINS) → any URL containing /v1 (e.g. /v1, /v1/users)", "• /v1 (EXACT) → only requests whose pathname is exactly /v1"].map(example => /*#__PURE__*/_jsx("div", {
-            style: styles.exampleItem,
-            children: example
-          }, example))]
-        })]
-      })]
-    })
-  });
-}
-
-// Values mirror the native StyleSheet blocks 1:1 (DynamicFilterView.tsx,
-// SectionHeader.tsx, FilterComponents.tsx, NetworkFilterViewV3.tsx).
-const styles = {
-  container: {
-    display: "flex",
-    flexDirection: "column",
-    flex: 1,
-    minHeight: 0,
-    backgroundColor: buoyColors.base
-  },
-  content: {
-    flex: 1,
-    minHeight: 0,
-    overflowY: "auto",
-    padding: "16px 16px 24px 16px"
-  },
-  section: {
-    marginBottom: 8
-  },
-  // SectionHeader.tsx container/title/badge
-  sectionHeader: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    padding: "8px 16px",
-    backgroundColor: buoyColors.base,
-    minHeight: 40,
-    boxSizing: "border-box"
-  },
-  sectionHeaderIcon: {
-    display: "inline-flex",
-    marginRight: 8
-  },
-  sectionHeaderTitle: {
-    flex: 1,
-    fontSize: 14,
-    fontWeight: 600,
-    color: buoyColors.text,
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis"
-  },
-  sectionHeaderBadge: {
-    display: "inline-flex",
-    alignItems: "center",
-    padding: "3px 8px",
-    borderRadius: 12,
-    marginLeft: 8
-  },
-  sectionHeaderBadgeText: {
-    fontSize: 12,
-    fontWeight: 600
-  },
-  filterGrid: {
-    display: "flex",
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 8,
-    marginTop: 8
-  },
-  filterCard: {
-    display: "flex",
-    backgroundColor: buoyColors.card,
-    borderRadius: 12,
-    padding: "10px 8px",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    border: `1px solid ${buoyColors.border}`,
-    width: 72,
-    minHeight: 68,
-    boxSizing: "border-box",
-    cursor: "pointer",
-    margin: 0
-  },
-  activeFilterCard: {
-    backgroundColor: `${buoyColors.primary}33`,
-    border: `2px solid ${buoyColors.primary}`,
-    // Native: shadowColor primary, offset 0/0, opacity 0.3, radius 8.
-    boxShadow: `0 0 8px ${buoyColors.primary}4D`
-  },
-  filterCountActive: {
-    fontSize: 14,
-    fontWeight: 700,
-    color: buoyColors.text,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    marginTop: 3,
-    marginBottom: 1,
-    textShadow: "0 0.5px 1px rgba(0, 0, 0, 0.2)"
-  },
-  filterCountZero: {
-    fontSize: 11,
-    fontWeight: 500,
-    color: buoyColors.textMuted,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    marginTop: 3,
-    marginBottom: 1
-  },
-  filterLabelCompact: {
-    fontSize: 10,
-    color: buoyColors.text,
-    fontWeight: 600,
-    textAlign: "center",
-    textTransform: "capitalize",
-    textShadow: "0 0.5px 1px rgba(0, 0, 0, 0.3)"
-  },
-  methodBadgeCompact: {
-    display: "inline-flex",
-    padding: "4px 8px",
-    borderRadius: 5,
-    minWidth: 48,
-    maxWidth: 60,
-    boxSizing: "border-box",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  methodTextCompact: {
-    fontSize: 13,
-    fontWeight: 700,
-    letterSpacing: 0.3,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis"
-  },
-  excludeFiltersSection: {
-    backgroundColor: buoyColors.card,
-    borderRadius: 16,
-    border: `1px solid ${buoyColors.border}`,
-    marginTop: 16,
-    overflow: "hidden"
-  },
-  excludeFiltersDescription: {
-    fontSize: 10,
-    color: buoyColors.textSecondary,
-    padding: "8px 16px 0 16px",
-    lineHeight: "14px"
-  },
-  excludeFiltersInputWrapper: {
-    padding: "8px 16px"
-  },
-  excludeFiltersContent: {
-    padding: "0 16px 16px 16px",
-    maxHeight: 150,
-    overflowY: "auto"
-  },
-  filterListColumn: {
-    display: "flex",
-    flexDirection: "column",
-    gap: 8
-  },
-  filterItemRow: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: "10px 12px",
-    backgroundColor: buoyColors.hover,
-    borderRadius: 8,
-    border: `1px solid ${buoyColors.border}`,
-    cursor: "pointer",
-    margin: 0,
-    width: "100%",
-    boxSizing: "border-box",
-    textAlign: "left"
-  },
-  filterItemText: {
-    flex: 1,
-    fontSize: 12,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    marginRight: 8,
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    minWidth: 0
-  },
-  filterItemMeta: {
-    display: "inline-flex",
-    marginRight: 8
-  },
-  // NetworkFilterViewV3.tsx modeBadge / modeToggle styles
-  modeBadge: {
-    display: "inline-flex",
-    padding: "3px 8px",
-    borderRadius: 6,
-    borderWidth: 1,
-    borderStyle: "solid",
-    background: "none",
-    cursor: "pointer",
-    margin: 0
-  },
-  modeBadgeText: {
-    fontSize: 9,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    fontWeight: 700,
-    letterSpacing: 0.5
-  },
-  modeToggleRow: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginBottom: 8
-  },
-  modeToggleLabel: {
-    fontSize: 11,
-    fontWeight: 600,
-    color: macOSColors.text.secondary,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    letterSpacing: 0.3
-  },
-  modeToggleGroup: {
-    display: "flex",
-    flexDirection: "row",
-    gap: 6,
-    flex: 1
-  },
-  modeToggleButton: {
-    flex: 1,
-    display: "flex",
-    flexDirection: "column",
-    padding: "6px 10px",
-    borderRadius: 8,
-    border: `1px solid ${macOSColors.border.default}`,
-    backgroundColor: macOSColors.background.hover,
-    alignItems: "center",
-    cursor: "pointer",
-    margin: 0
-  },
-  modeToggleButtonActive: {
-    border: `1px solid ${macOSColors.semantic.info}`,
-    backgroundColor: `${macOSColors.semantic.info}22`
-  },
-  modeToggleButtonText: {
-    fontSize: 11,
-    fontWeight: 700,
-    color: macOSColors.text.secondary,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    letterSpacing: 0.3
-  },
-  modeToggleButtonTextActive: {
-    color: macOSColors.semantic.info
-  },
-  modeToggleButtonHint: {
-    fontSize: 9,
-    color: macOSColors.text.muted,
-    marginTop: 1
-  },
-  // FilterComponents.tsx add button/input
-  addButton: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: "10px 14px",
-    borderRadius: 10,
-    borderWidth: 1,
-    borderStyle: "dashed",
-    backgroundColor: buoyColors.input,
-    cursor: "pointer",
-    margin: 0,
-    width: "100%",
-    boxSizing: "border-box"
-  },
-  addButtonText: {
-    fontSize: 13,
-    fontWeight: 500,
-    marginLeft: 6
-  },
-  inputContainer: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: buoyColors.input,
-    borderRadius: 10,
-    borderWidth: 1,
-    borderStyle: "solid",
-    padding: "10px 14px",
-    marginBottom: 8,
-    boxSizing: "border-box"
-  },
-  input: {
-    flex: 1,
-    fontSize: 13,
-    padding: 0,
-    border: "none",
-    outline: "none",
-    background: "transparent",
-    fontFamily: "inherit",
-    minWidth: 0
-  },
-  inputButtons: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  cancelButton: {
-    display: "inline-flex",
-    padding: 4,
-    borderRadius: 6,
-    backgroundColor: buoyColors.hover,
-    border: "none",
-    cursor: "pointer",
-    margin: 0
-  },
-  inlineAddButton: {
-    display: "inline-flex",
-    padding: "6px 12px",
-    borderRadius: 6,
-    borderWidth: 1,
-    borderStyle: "solid",
-    cursor: "pointer",
-    margin: 0
-  },
-  inlineAddButtonText: {
-    fontSize: 12,
-    fontWeight: 600
-  },
-  availableKeysSection: {
-    backgroundColor: buoyColors.card,
-    borderRadius: 16,
-    border: `1px solid ${buoyColors.border}`,
-    marginTop: 16,
-    overflow: "hidden"
-  },
-  availableKeysScroll: {
-    maxHeight: 150,
-    overflowY: "auto",
-    padding: "8px 16px 16px 16px"
-  },
-  availableKeyItem: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: "10px 12px",
-    backgroundColor: buoyColors.hover,
-    borderRadius: 8,
-    border: `1px solid ${buoyColors.border}`,
-    marginBottom: 8,
-    cursor: "pointer",
-    width: "100%",
-    boxSizing: "border-box",
-    textAlign: "left"
-  },
-  availableKeyText: {
-    flex: 1,
-    fontSize: 11,
-    color: buoyColors.text,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    marginRight: 8,
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    minWidth: 0
-  },
-  emptyStateText: {
-    fontSize: 11,
-    color: buoyColors.textMuted,
-    fontStyle: "italic",
-    textAlign: "center",
-    padding: "12px 0"
-  },
-  howItWorksSection: {
-    backgroundColor: buoyColors.card,
-    borderRadius: 16,
-    border: `1px solid ${buoyColors.border}`,
-    marginTop: 16,
-    overflow: "hidden"
-  },
-  howItWorksText: {
-    fontSize: 11,
-    color: buoyColors.textSecondary,
-    lineHeight: "16px",
-    margin: "8px 0 12px 0",
-    padding: "0 16px",
-    fontFamily: "ui-monospace, Menlo, monospace"
-  },
-  examplesContainer: {
-    padding: "8px 16px 16px 16px",
-    borderTop: `1px solid ${buoyColors.border}`
-  },
-  examplesTitle: {
-    fontSize: 10,
-    fontWeight: 600,
-    color: buoyColors.textMuted,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    letterSpacing: 0.5,
-    marginBottom: 6
-  },
-  exampleItem: {
-    fontSize: 10,
-    color: buoyColors.textMuted,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    lineHeight: "16px"
-  }
-};
+"use strict";import{useCallback as E,useMemo as x,useState as R}from"react";import{jsx as t,jsxs as d,Fragment as ee}from"react/jsx-runtime";const i={base:"#121212",card:"#1A1A1A",hover:"#242424",input:"#2A2A2A",border:"#333333",text:"#E0E0E0",textSecondary:"#A0A0A0",textMuted:"#888888",primary:"#20C997"};const l={background:{hover:"#1D1D1F"},border:{default:"#2D2D2F"},text:{secondary:"#A1A1A6",muted:"#8E8E93"},semantic:{success:"#34C759",error:"#FF453A",warning:"#FFEB3B",info:"#00B8E6",debug:"#BF5AF2"}};function u({size:r=14,color:c="currentColor",children:s}){return t("svg",{width:r,height:r,viewBox:"0 0 24 24",fill:"none",stroke:c,strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0,display:"block"},children:s})}const te=r=>d(u,{...r,children:[t("path",{d:"M21.801 10A10 10 0 1 1 17 3.335"}),t("path",{d:"m9 11 3 3L22 4"})]});const oe=r=>d(u,{...r,children:[t("circle",{cx:"12",cy:"12",r:"10"}),t("path",{d:"m15 9-6 6"}),t("path",{d:"m9 9 6 6"})]});const ne=r=>d(u,{...r,children:[t("circle",{cx:"12",cy:"12",r:"10"}),t("polyline",{points:"12 6 12 12 16 14"})]});const N=r=>d(u,{...r,children:[t("circle",{cx:"12",cy:"12",r:"10"}),t("path",{d:"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"}),t("path",{d:"M2 12h20"})]});const re=r=>d(u,{...r,children:[t("path",{d:"M14 2v4a2 2 0 0 0 2 2h4"}),t("path",{d:"M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4"}),t("path",{d:"M4 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1"}),t("path",{d:"M8 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1"})]});const ie=r=>d(u,{...r,children:[t("path",{d:"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"}),t("path",{d:"M14 2v4a2 2 0 0 0 2 2h4"}),t("path",{d:"M10 9H8"}),t("path",{d:"M16 13H8"}),t("path",{d:"M16 17H8"})]});const le=r=>d(u,{...r,children:[t("rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2"}),t("circle",{cx:"9",cy:"9",r:"2"}),t("path",{d:"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"})]});const ae=r=>d(u,{...r,children:[t("rect",{width:"18",height:"18",x:"3",y:"3",rx:"2"}),t("path",{d:"M7 3v18"}),t("path",{d:"M3 7.5h4"}),t("path",{d:"M3 12h18"}),t("path",{d:"M3 16.5h4"}),t("path",{d:"M17 3v18"}),t("path",{d:"M17 7.5h4"}),t("path",{d:"M17 16.5h4"})]});const de=r=>d(u,{...r,children:[t("path",{d:"M9 18V5l12-2v13"}),t("circle",{cx:"6",cy:"18",r:"3"}),t("circle",{cx:"18",cy:"16",r:"3"})]});const j=r=>t(u,{...r,children:t("polygon",{points:"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"})});const z=r=>d(u,{...r,children:[t("path",{d:"M5 12h14"}),t("path",{d:"M12 5v14"})]});const U=r=>d(u,{...r,children:[t("path",{d:"M18 6 6 18"}),t("path",{d:"m6 6 12 12"})]});function H(r){const c=r.responseHeaders||r.requestHeaders;const s=c?.["content-type"]||c?.["Content-Type"]||"";if(s.includes("json"))return{type:"JSON",color:l.semantic.info};if(s.includes("xml"))return{type:"XML",color:l.semantic.success};if(s.includes("html"))return{type:"HTML",color:l.semantic.warning};if(s.includes("text"))return{type:"TEXT",color:l.semantic.success};if(s.includes("image"))return{type:"IMAGE",color:l.semantic.error};if(s.includes("video"))return{type:"VIDEO",color:l.semantic.error};if(s.includes("audio"))return{type:"AUDIO",color:l.semantic.debug};if(s.includes("form"))return{type:"FORM",color:l.semantic.info};return{type:"OTHER",color:l.text.muted}}function ce(r){switch(r){case"JSON":return re;case"HTML":case"XML":case"TEXT":return ie;case"IMAGE":return le;case"VIDEO":return ae;case"AUDIO":return de;default:return N}}function se(r){switch(r){case"GET":return l.semantic.success;case"POST":return l.semantic.info;case"PUT":return l.semantic.warning;case"DELETE":return l.semantic.error;case"PATCH":return l.semantic.success;default:return l.text.muted}}function b({icon:r,iconColor:c,title:s,badgeCount:h,badgeColor:f}){return d("div",{style:n.sectionHeader,children:[r?t("span",{style:n.sectionHeaderIcon,children:t(r,{size:12,color:c??i.primary})}):null,t("span",{style:n.sectionHeaderTitle,children:s}),h!==void 0?t("span",{style:{...n.sectionHeaderBadge,backgroundColor:`${f??i.primary}15`,border:`1px solid ${f??i.primary}33`},children:t("span",{style:{...n.sectionHeaderBadgeText,color:f??i.primary},children:h})}):null]})}function pe({onPress:r,color:c,label:s}){return d("button",{type:"button",onClick:r,style:{...n.addButton,borderColor:`${c}40`},children:[t(z,{size:14,color:c}),t("span",{style:{...n.addButtonText,color:c},children:s})]})}function ue({value:r,onChange:c,onSubmit:s,onCancel:h,placeholder:f,color:g}){return d("div",{style:{...n.inputContainer,borderColor:`${g}40`},children:[t("input",{value:r,onChange:C=>c(C.target.value),onKeyDown:C=>{if(C.key==="Enter")s()},placeholder:f,style:{...n.input,color:g},autoFocus:true,autoCorrect:"off",autoCapitalize:"none",autoComplete:"off",spellCheck:false}),d("div",{style:n.inputButtons,children:[r.trim()?t("button",{type:"button",onClick:s,style:{...n.inlineAddButton,backgroundColor:`${g}15`,borderColor:`${g}40`},children:t("span",{style:{...n.inlineAddButtonText,color:g},children:"Add"})}):null,t("button",{type:"button",onClick:h,style:n.cancelButton,children:t(U,{size:16,color:`${g}60`})})]})]})}export function NetworkFilterViewV3({events:r,filter:c,onFilterChange:s,ignoredPatterns:h=[],onRemovePattern:f=()=>{},onAddPattern:g=()=>{},onTogglePatternMode:C=()=>{}}){const[v,G]=R("contains");const[K,w]=R(false);const[M,A]=R("");const P=x(()=>{const e=new Map;for(const o of h)e.set(o.value,o.mode);return e},[h]);const y=x(()=>h.map(e=>e.value),[h]);const I=E(e=>{g({value:e,mode:v})},[g,v]);const V=E(()=>{const e=M.trim();if(!e)return;I(e);A("");w(false)},[M,I]);const X=x(()=>{const e={all:r.length,success:0,error:0,pending:0};r.forEach(o=>{if(o.error||o.status&&o.status>=400){e.error+=1;return}if(o.status&&o.status>=200&&o.status<300){e.success+=1;return}if(!o.status&&!o.error){e.pending+=1}});return e},[r]);const q=x(()=>{return r.reduce((e,o)=>{if(!o.method)return e;e[o.method]=(e[o.method]||0)+1;return e},{})},[r]);const Z=x(()=>{return r.reduce((e,o)=>{const{type:a}=H(o);e[a]=(e[a]||0)+1;return e},{})},[r]);const W=x(()=>{const e=new Set;r.forEach(o=>{if(o.host){e.add(o.host);return}try{if(o.url){const a=new URL(o.url);const p=String(a.host||"");if(p)e.add(p)}}catch{}});return Array.from(e).filter(o=>o&&o!=="").sort((o,a)=>o.localeCompare(a))},[r]);const D=x(()=>{const e=new Set;r.forEach(o=>{if(!o.url)return;try{const a=new URL(o.url);const p=String(a.origin||"");const m=String(a.pathname||"");const T=`${p}${m}`;e.add(T)}catch{e.add(o.url)}});return Array.from(e).filter(o=>o&&o!=="").sort((o,a)=>o.localeCompare(a))},[r]);const L=x(()=>{const e=30;const o=W.slice(0,e);const a=D.slice(0,e);return[...o,...a]},[W,D]);const k=x(()=>L.filter(e=>!y.some(o=>e.includes(o))),[L,y]);const J=E((e,o)=>{const[a]=e.split("::");if(a==="status"){const p=o==="all"?void 0:o;s({...c,status:p});return}if(a==="method"){const p=String(o);const m=c.method||[];const T=m.includes(p);const S=T?m.filter(F=>F!==p):[p];s({...c,method:S.length>0?S:void 0});return}if(a==="contentType"){const p=String(o);const m=c.contentType||[];const T=m.includes(p);const S=T?m.filter(F=>F!==p):[p];s({...c,contentType:S.length>0?S:void 0})}},[c,s]);const B=e=>{const o=e.count===0;const a=!e.isMethod||e.icon;return d("button",{type:"button",onClick:()=>J(e.id,e.value),style:{...n.filterCard,...e.isActive?n.activeFilterCard:null},children:[e.icon?t(e.icon,{size:24,color:e.color}):e.isMethod?t("span",{style:{...n.methodBadgeCompact,backgroundColor:`${e.color}20`},children:t("span",{style:{...n.methodTextCompact,color:e.color},children:e.label})}):null,t("span",{style:o?n.filterCountZero:n.filterCountActive,children:e.count}),a?t("span",{style:n.filterLabelCompact,children:e.label}):null]},e.id)};const Y=["all","success","error","pending"].map(e=>({id:`status::${e}`,label:e.charAt(0).toUpperCase()+e.slice(1),count:X[e],icon:e==="success"?te:e==="error"?oe:e==="pending"?ne:N,color:e==="success"?l.semantic.success:e==="error"?l.semantic.error:e==="pending"?l.semantic.warning:l.semantic.info,isActive:c.status===e||!c.status&&e==="all",value:e}));const $=Object.entries(q);const O=Object.entries(Z);const _=()=>{const e=[{label:"Contains",value:"contains",hint:"substring"},{label:"Exact",value:"exact",hint:"whole path/host/url"}];return d("div",{style:n.modeToggleRow,children:[t("span",{style:n.modeToggleLabel,children:"Match:"}),t("div",{style:n.modeToggleGroup,children:e.map(o=>{const a=v===o.value;return d("button",{type:"button",onClick:()=>G(o.value),"aria-pressed":a,style:{...n.modeToggleButton,...a?n.modeToggleButtonActive:null},children:[t("span",{style:{...n.modeToggleButtonText,...a?n.modeToggleButtonTextActive:null},children:o.label}),t("span",{style:n.modeToggleButtonHint,children:o.hint})]},o.value)})})]})};const Q=e=>{const o=P.get(e)??"contains";const a=o==="exact";const p=a?l.semantic.warning:l.semantic.info;return t("button",{type:"button","aria-label":`Match mode: ${o}. Tap to toggle.`,onClick:m=>{m.stopPropagation();C(e)},style:{...n.modeBadge,borderColor:`${p}60`,backgroundColor:`${p}15`},children:t("span",{style:{...n.modeBadgeText,color:p},children:a?"EXACT":"CONTAINS"})})};return t("div",{style:n.container,children:d("div",{style:n.content,children:[d("div",{style:n.section,children:[t(b,{title:"Status"}),t("div",{style:n.filterGrid,children:Y.map(B)})]}),$.length>0?d("div",{style:n.section,children:[t(b,{title:"Method"}),t("div",{style:n.filterGrid,children:$.map(([e,o])=>B({id:`method::${e}`,label:e,count:o,color:se(e),isActive:c.method?.includes(e)??false,value:e,isMethod:true}))})]}):null,O.length>0?d("div",{style:n.section,children:[t(b,{title:"Content Type"}),t("div",{style:n.filterGrid,children:O.map(([e,o])=>{const a=r.find(m=>H(m).type===e);const{color:p}=a?H(a):{color:l.text.muted};return B({id:`contentType::${e}`,label:e,count:o,icon:ce(e),color:p,isActive:c.contentType?.includes(e)??false,value:e})})})]}):null,d("div",{style:n.excludeFiltersSection,children:[t(b,{icon:j,iconColor:i.primary,title:"ACTIVE FILTERS",badgeCount:y.length>0?y.length:void 0,badgeColor:i.primary}),t("div",{style:n.excludeFiltersDescription,children:"Hide queries matching these patterns from the list."}),t("div",{style:n.excludeFiltersInputWrapper,children:!K?t(pe,{onPress:()=>w(true),color:i.primary,label:"Add exclude pattern"}):d(ee,{children:[_(),t(ue,{value:M,onChange:A,onSubmit:V,onCancel:()=>{w(false);A("")},placeholder:"Enter domain or URL pattern...",color:i.primary})]})}),y.length>0?t("div",{style:n.excludeFiltersContent,children:t("div",{style:n.filterListColumn,children:y.map(e=>d("button",{type:"button",onClick:()=>f(e),style:n.filterItemRow,children:[t("span",{style:{...n.filterItemText,color:i.primary},children:e}),t("span",{style:n.filterItemMeta,children:Q(e)}),t(U,{size:12,color:`${i.primary}80`})]},e))})}):null]}),d("div",{style:n.availableKeysSection,children:[t(b,{icon:z,iconColor:i.primary,title:"AVAILABLE DOMAINS & URLS",badgeCount:k.length,badgeColor:i.primary}),t("div",{style:n.availableKeysScroll,children:k.length>0?k.map(e=>d("button",{type:"button",onClick:()=>I(e),style:n.availableKeyItem,children:[t("span",{style:n.availableKeyText,children:e}),t(z,{size:12,color:i.primary})]},e)):t("div",{style:n.emptyStateText,children:"No network events captured yet. Domains and URLs will appear here."})})]}),d("div",{style:n.howItWorksSection,children:[t(b,{icon:j,iconColor:i.textSecondary,title:"HOW NETWORK FILTERS WORK"}),t("div",{style:n.howItWorksText,children:"Patterns hide matching requests from the network event list. Each pattern has a match mode you can toggle on its badge: CONTAINS hides any URL containing the text; EXACT hides only an exact path/host/url match."}),d("div",{style:n.examplesContainer,children:[t("div",{style:n.examplesTitle,children:"EXAMPLES:"}),["\u2022 example.com (CONTAINS) \u2192 any request whose URL contains example.com","\u2022 example.com (EXACT) \u2192 only requests served by that exact host","\u2022 /v1 (CONTAINS) \u2192 any URL containing /v1 (e.g. /v1, /v1/users)","\u2022 /v1 (EXACT) \u2192 only requests whose pathname is exactly /v1"].map(e=>t("div",{style:n.exampleItem,children:e},e))]})]})]})})}const n={container:{display:"flex",flexDirection:"column",flex:1,minHeight:0,backgroundColor:i.base},content:{flex:1,minHeight:0,overflowY:"auto",padding:"16px 16px 24px 16px"},section:{marginBottom:8},sectionHeader:{display:"flex",flexDirection:"row",alignItems:"center",padding:"8px 16px",backgroundColor:i.base,minHeight:40,boxSizing:"border-box"},sectionHeaderIcon:{display:"inline-flex",marginRight:8},sectionHeaderTitle:{flex:1,fontSize:14,fontWeight:600,color:i.text,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},sectionHeaderBadge:{display:"inline-flex",alignItems:"center",padding:"3px 8px",borderRadius:12,marginLeft:8},sectionHeaderBadgeText:{fontSize:12,fontWeight:600},filterGrid:{display:"flex",flexDirection:"row",flexWrap:"wrap",gap:8,marginTop:8},filterCard:{display:"flex",backgroundColor:i.card,borderRadius:12,padding:"10px 8px",flexDirection:"column",alignItems:"center",justifyContent:"center",border:`1px solid ${i.border}`,width:72,minHeight:68,boxSizing:"border-box",cursor:"pointer",margin:0},activeFilterCard:{backgroundColor:`${i.primary}33`,border:`2px solid ${i.primary}`,boxShadow:`0 0 8px ${i.primary}4D`},filterCountActive:{fontSize:14,fontWeight:700,color:i.text,fontFamily:"ui-monospace, Menlo, monospace",marginTop:3,marginBottom:1,textShadow:"0 0.5px 1px rgba(0, 0, 0, 0.2)"},filterCountZero:{fontSize:11,fontWeight:500,color:i.textMuted,fontFamily:"ui-monospace, Menlo, monospace",marginTop:3,marginBottom:1},filterLabelCompact:{fontSize:10,color:i.text,fontWeight:600,textAlign:"center",textTransform:"capitalize",textShadow:"0 0.5px 1px rgba(0, 0, 0, 0.3)"},methodBadgeCompact:{display:"inline-flex",padding:"4px 8px",borderRadius:5,minWidth:48,maxWidth:60,boxSizing:"border-box",alignItems:"center",justifyContent:"center"},methodTextCompact:{fontSize:13,fontWeight:700,letterSpacing:.3,fontFamily:"ui-monospace, Menlo, monospace",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},excludeFiltersSection:{backgroundColor:i.card,borderRadius:16,border:`1px solid ${i.border}`,marginTop:16,overflow:"hidden"},excludeFiltersDescription:{fontSize:10,color:i.textSecondary,padding:"8px 16px 0 16px",lineHeight:"14px"},excludeFiltersInputWrapper:{padding:"8px 16px"},excludeFiltersContent:{padding:"0 16px 16px 16px",maxHeight:150,overflowY:"auto"},filterListColumn:{display:"flex",flexDirection:"column",gap:8},filterItemRow:{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"space-between",padding:"10px 12px",backgroundColor:i.hover,borderRadius:8,border:`1px solid ${i.border}`,cursor:"pointer",margin:0,width:"100%",boxSizing:"border-box",textAlign:"left"},filterItemText:{flex:1,fontSize:12,fontFamily:"ui-monospace, Menlo, monospace",marginRight:8,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",minWidth:0},filterItemMeta:{display:"inline-flex",marginRight:8},modeBadge:{display:"inline-flex",padding:"3px 8px",borderRadius:6,borderWidth:1,borderStyle:"solid",background:"none",cursor:"pointer",margin:0},modeBadgeText:{fontSize:9,fontFamily:"ui-monospace, Menlo, monospace",fontWeight:700,letterSpacing:.5},modeToggleRow:{display:"flex",flexDirection:"row",alignItems:"center",gap:8,marginBottom:8},modeToggleLabel:{fontSize:11,fontWeight:600,color:l.text.secondary,fontFamily:"ui-monospace, Menlo, monospace",letterSpacing:.3},modeToggleGroup:{display:"flex",flexDirection:"row",gap:6,flex:1},modeToggleButton:{flex:1,display:"flex",flexDirection:"column",padding:"6px 10px",borderRadius:8,border:`1px solid ${l.border.default}`,backgroundColor:l.background.hover,alignItems:"center",cursor:"pointer",margin:0},modeToggleButtonActive:{border:`1px solid ${l.semantic.info}`,backgroundColor:`${l.semantic.info}22`},modeToggleButtonText:{fontSize:11,fontWeight:700,color:l.text.secondary,fontFamily:"ui-monospace, Menlo, monospace",letterSpacing:.3},modeToggleButtonTextActive:{color:l.semantic.info},modeToggleButtonHint:{fontSize:9,color:l.text.muted,marginTop:1},addButton:{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"center",padding:"10px 14px",borderRadius:10,borderWidth:1,borderStyle:"dashed",backgroundColor:i.input,cursor:"pointer",margin:0,width:"100%",boxSizing:"border-box"},addButtonText:{fontSize:13,fontWeight:500,marginLeft:6},inputContainer:{display:"flex",flexDirection:"row",alignItems:"center",backgroundColor:i.input,borderRadius:10,borderWidth:1,borderStyle:"solid",padding:"10px 14px",marginBottom:8,boxSizing:"border-box"},input:{flex:1,fontSize:13,padding:0,border:"none",outline:"none",background:"transparent",fontFamily:"inherit",minWidth:0},inputButtons:{display:"flex",flexDirection:"row",alignItems:"center",gap:8},cancelButton:{display:"inline-flex",padding:4,borderRadius:6,backgroundColor:i.hover,border:"none",cursor:"pointer",margin:0},inlineAddButton:{display:"inline-flex",padding:"6px 12px",borderRadius:6,borderWidth:1,borderStyle:"solid",cursor:"pointer",margin:0},inlineAddButtonText:{fontSize:12,fontWeight:600},availableKeysSection:{backgroundColor:i.card,borderRadius:16,border:`1px solid ${i.border}`,marginTop:16,overflow:"hidden"},availableKeysScroll:{maxHeight:150,overflowY:"auto",padding:"8px 16px 16px 16px"},availableKeyItem:{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"space-between",padding:"10px 12px",backgroundColor:i.hover,borderRadius:8,border:`1px solid ${i.border}`,marginBottom:8,cursor:"pointer",width:"100%",boxSizing:"border-box",textAlign:"left"},availableKeyText:{flex:1,fontSize:11,color:i.text,fontFamily:"ui-monospace, Menlo, monospace",marginRight:8,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",minWidth:0},emptyStateText:{fontSize:11,color:i.textMuted,fontStyle:"italic",textAlign:"center",padding:"12px 0"},howItWorksSection:{backgroundColor:i.card,borderRadius:16,border:`1px solid ${i.border}`,marginTop:16,overflow:"hidden"},howItWorksText:{fontSize:11,color:i.textSecondary,lineHeight:"16px",margin:"8px 0 12px 0",padding:"0 16px",fontFamily:"ui-monospace, Menlo, monospace"},examplesContainer:{padding:"8px 16px 16px 16px",borderTop:`1px solid ${i.border}`},examplesTitle:{fontSize:10,fontWeight:600,color:i.textMuted,fontFamily:"ui-monospace, Menlo, monospace",letterSpacing:.5,marginBottom:6},exampleItem:{fontSize:10,color:i.textMuted,fontFamily:"ui-monospace, Menlo, monospace",lineHeight:"16px"}};