@buoy-gg/network 7.0.15 → 7.0.17

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

@@ -0,0 +1,1306 @@
+"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"
+  }
+};