@buoy-gg/network 7.0.15 → 7.0.17

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

@@ -0,0 +1,1237 @@
+"use strict";
+
+/**
+ * NetworkCopySettingsView.web — DOM twin of NetworkCopySettingsView.tsx.
+ *
+ * The COPY tab's configurator: quick presets (URLs / LLM / JSON / Full /
+ * Custom), the Include toggles, the output-format pick, and the collapsible
+ * live preview with its size warnings and copy action. Same preset configs,
+ * preset detection, option-change routing (`group::key` ids), mock-request
+ * fallback, size estimation and preview/copy text generation as the native
+ * file — all copied verbatim.
+ *
+ * Natively the chrome is shared-ui's `DynamicFilterView`; the web shim
+ * doesn't ship it, so this twin renders the exact subtree DynamicFilterView
+ * produces FOR THIS CONFIG (no tabs, no filter-summary, no pattern sections —
+ * those config branches are unused here), same precedent as
+ * NetworkFilterViewV3.web:
+ *  1. Facet-card sections — Presets (icon + label), Include (label-only
+ *     toggles), Format (icon + label); single active-card treatment
+ *     (primary fill + 2px ring + glow).
+ *  2. PREVIEW section — SectionHeader (Eye icon, title, header actions =
+ *     status label + toolbar copy button) over the recessed content box;
+ *     collapsed by default behind the Show Preview summary (request count +
+ *     estimated size + large-payload warnings), exactly like native.
+ *
+ * shared-ui RN chrome replicated as DOM with provenance:
+ *  - `buoyColors` / `macOSColors` — inlined verbatim subsets from
+ *    shared/src/ui/gameUI/constants/ (DynamicFilterView + SectionHeader use
+ *    buoyColors; the preview widgets use macOSColors directly).
+ *  - Icons — inline lucide SVGs (shared-ui's icons are lucide re-exports).
+ *  - `ToolbarCopyButton` — the DataViewer.web `CopyButton` twin at size 14
+ *    (the native preset is exactly `CopyButton size={14}` with default
+ *    colors); copies via navigator.clipboard with the same 1500ms feedback.
+ *  - `DataViewer` (JSON-format preview) — the DataViewer.web twin.
+ *  - `formatRelativeTime` — copied verbatim from
+ *    shared/src/utils/time/formatRelativeTime.ts.
+ *  - Native card glow (`shadowColor` primary, opacity 0.3, radius 8) → an
+ *    equivalent CSS box-shadow.
+ *
+ * Intentional deviations (all logged):
+ *  - License gating isn't part of the web port: native reads
+ *    `useFeatureGate()` and wraps the view in a `ProFeatureBanner` for free
+ *    users; here `isPro` is a constant true, so that branch never renders and
+ *    is not ported. Copy is likewise ungated (native's CopyButton shows a
+ *    Pro modal via @buoy-gg/license).
+ *  - `useTickEveryMinute` (shared TickProvider context, 5s cadence as mounted
+ *    by NetworkModal) → the same module-level shared 5s interval hook the
+ *    compact row twin uses.
+ *  - Native's `previewData` memo is dead code (computed, never read) and is
+ *    dropped here — the host tsconfig runs `noUnusedLocals`.
+ *  - `selectable={isPro}` on the preview text → `userSelect: "text"` (isPro
+ *    is constant-true on web).
+ *  - `CopySettings` / `DEFAULT_COPY_SETTINGS` are re-declared against the
+ *    platform-free type in `generateNetworkCopyText` (the native module would
+ *    drag react-native in); the shape is byte-identical.
+ *
+ * @platform React DOM Web
+ */
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { CopyButton, DataViewer } from "./DataViewer.web";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** NetworkCopySettingsView.tsx `DEFAULT_COPY_SETTINGS`, verbatim. */
+export const DEFAULT_COPY_SETTINGS = {
+  includeMethod: true,
+  includeStatus: true,
+  includeDuration: true,
+  includeTimestamp: true,
+  includeClient: true,
+  includeSizes: true,
+  includeErrors: true,
+  includeRequestHeaders: true,
+  includeResponseHeaders: true,
+  includeRequestBody: true,
+  includeResponseBody: true,
+  bodySizeThreshold: 10,
+  format: "markdown",
+  filterMode: "all"
+};
+
+// =============================
+// Native palettes (provenance)
+// =============================
+
+/** buoyColors subset — shared/src/ui/gameUI/constants/gameUIColors.ts, verbatim. */
+const buoyColors = {
+  base: "#121212",
+  card: "#1A1A1A",
+  hover: "#242424",
+  border: "#333333",
+  borderStrong: "#444444",
+  text: "#E0E0E0",
+  primary: "#20C997"
+};
+
+/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */
+const macOSColors = {
+  background: {
+    input: "#26262A",
+    hover: "#1D1D1F"
+  },
+  border: {
+    default: "#2D2D2F"
+  },
+  text: {
+    primary: "#F5F5F7",
+    secondary: "#A1A1A6",
+    muted: "#8E8E93"
+  },
+  semantic: {
+    success: "#34C759",
+    error: "#FF453A",
+    errorBackground: "rgba(255, 69, 58, 0.15)",
+    warning: "#FFEB3B",
+    warningBackground: "rgba(255, 235, 59, 0.15)",
+    info: "#00B8E6"
+  }
+};
+
+// =============================
+// 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 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 FileCode = 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 12.5 8 15l2 2.5"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "m14 12.5 2 2.5-2 2.5"
+  })]
+});
+const Link = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+  })]
+});
+const Zap = p => /*#__PURE__*/_jsx(Svg, {
+  ...p,
+  children: /*#__PURE__*/_jsx("polygon", {
+    points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2"
+  })
+});
+const Settings = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
+  }), /*#__PURE__*/_jsx("circle", {
+    cx: "12",
+    cy: "12",
+    r: "3"
+  })]
+});
+const Hash = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("line", {
+    x1: "4",
+    x2: "20",
+    y1: "9",
+    y2: "9"
+  }), /*#__PURE__*/_jsx("line", {
+    x1: "4",
+    x2: "20",
+    y1: "15",
+    y2: "15"
+  }), /*#__PURE__*/_jsx("line", {
+    x1: "10",
+    x2: "8",
+    y1: "3",
+    y2: "21"
+  }), /*#__PURE__*/_jsx("line", {
+    x1: "16",
+    x2: "14",
+    y1: "3",
+    y2: "21"
+  })]
+});
+const Eye = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+  }), /*#__PURE__*/_jsx("circle", {
+    cx: "12",
+    cy: "12",
+    r: "3"
+  })]
+});
+const ChevronDown = p => /*#__PURE__*/_jsx(Svg, {
+  ...p,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "m6 9 6 6 6-6"
+  })
+});
+const ChevronUp = p => /*#__PURE__*/_jsx(Svg, {
+  ...p,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "m18 15-6-6-6 6"
+  })
+});
+const AlertTriangle = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M12 9v4"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M12 17h.01"
+  })]
+});
+
+// =============================
+// Shared tick (DEVIATION: replaces shared-ui TickProvider/useTickEveryMinute)
+// =============================
+
+/**
+ * One module-level 5s clock — the cadence NetworkModal's `TickProvider` gives
+ * the native view (default `intervalMs` 5_000). Runs only while a consumer is
+ * mounted. Same pattern as NetworkEventItemCompact.web.
+ */
+const tickListeners = new Set();
+let tickInterval = null;
+function subscribeTick(listener) {
+  tickListeners.add(listener);
+  if (tickInterval == null) {
+    tickInterval = setInterval(() => {
+      const now = Date.now();
+      tickListeners.forEach(l => l(now));
+    }, 5_000);
+  }
+  return () => {
+    tickListeners.delete(listener);
+    if (tickListeners.size === 0 && tickInterval != null) {
+      clearInterval(tickInterval);
+      tickInterval = null;
+    }
+  };
+}
+function useSharedTick() {
+  const [tick, setTick] = useState(() => Date.now());
+  useEffect(() => subscribeTick(setTick), []);
+  return tick;
+}
+
+/** shared/src/utils/time/formatRelativeTime.ts — verbatim. */
+function formatRelativeTime(timestamp, currentTime = Date.now()) {
+  const timestampMs = timestamp instanceof Date ? timestamp.getTime() : timestamp;
+  const seconds = Math.floor((currentTime - timestampMs) / 1000);
+  if (seconds < 0) {
+    return "just now";
+  }
+  if (seconds < 60) {
+    return seconds === 0 ? "just now" : `${seconds}s ago`;
+  }
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) {
+    return `${minutes}m ago`;
+  }
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) {
+    return `${hours}h ago`;
+  }
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+// =============================
+// Config + pure helpers (copied verbatim from the native file)
+// =============================
+
+// Preset configurations for comparison
+const PRESET_CONFIGS = {
+  urls: {
+    includeMethod: true,
+    includeStatus: false,
+    includeDuration: false,
+    includeTimestamp: false,
+    includeClient: false,
+    includeSizes: false,
+    includeErrors: false,
+    includeRequestHeaders: false,
+    includeResponseHeaders: false,
+    includeRequestBody: false,
+    includeResponseBody: false,
+    bodySizeThreshold: 10,
+    format: "plaintext",
+    filterMode: "all"
+  },
+  llm: {
+    includeMethod: true,
+    includeStatus: true,
+    includeDuration: true,
+    includeTimestamp: true,
+    includeClient: true,
+    includeSizes: true,
+    includeErrors: true,
+    includeRequestHeaders: true,
+    includeResponseHeaders: true,
+    includeRequestBody: true,
+    includeResponseBody: true,
+    bodySizeThreshold: 10,
+    format: "markdown",
+    filterMode: "all"
+  },
+  json: {
+    includeMethod: true,
+    includeStatus: true,
+    includeDuration: true,
+    includeTimestamp: true,
+    includeClient: true,
+    includeSizes: true,
+    includeErrors: true,
+    includeRequestHeaders: true,
+    includeResponseHeaders: true,
+    includeRequestBody: true,
+    includeResponseBody: true,
+    bodySizeThreshold: -1,
+    format: "json",
+    filterMode: "all"
+  },
+  full: {
+    includeMethod: true,
+    includeStatus: true,
+    includeDuration: true,
+    includeTimestamp: true,
+    includeClient: true,
+    includeSizes: true,
+    includeErrors: true,
+    includeRequestHeaders: true,
+    includeResponseHeaders: true,
+    includeRequestBody: true,
+    includeResponseBody: true,
+    bodySizeThreshold: -1,
+    format: "markdown",
+    filterMode: "all"
+  }
+};
+// Detect which preset matches current settings
+function detectActivePreset(settings) {
+  for (const [presetName, presetConfig] of Object.entries(PRESET_CONFIGS)) {
+    const matches = Object.keys(presetConfig).every(key => presetConfig[key] === settings[key]);
+    if (matches) return presetName;
+  }
+  return null; // No preset matches = Custom
+}
+
+// Size thresholds for warnings
+const SIZE_WARNING_THRESHOLD = 100 * 1024; // 100KB - show warning
+const SIZE_DANGER_THRESHOLD = 500 * 1024; // 500KB - show danger warning
+
+// Helper to format bytes for display
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// =============================
+// DynamicFilterView chrome twins for this config (provenance:
+// shared/src/ui/components/DynamicFilterView.tsx + SectionHeader.tsx)
+// =============================
+
+/** SectionHeader DOM twin — container row, 16/8 padding, minHeight 40. */
+function SectionHeaderRow({
+  icon: Icon,
+  iconColor,
+  title,
+  actions
+}) {
+  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
+    }), actions ? /*#__PURE__*/_jsx("span", {
+      style: styles.sectionHeaderActions,
+      children: actions
+    }) : null]
+  });
+}
+
+/** DynamicFilterView's facet-card grid section for a `custom` section. */
+function FilterCardSection({
+  title,
+  options,
+  onOptionPress
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    style: styles.section,
+    children: [/*#__PURE__*/_jsx(SectionHeaderRow, {
+      title: title
+    }), /*#__PURE__*/_jsx("div", {
+      style: styles.filterGrid,
+      children: options.map(option => {
+        const Icon = option.icon;
+        return /*#__PURE__*/_jsxs("button", {
+          type: "button",
+          onClick: () => onOptionPress(option.id, option.value),
+          style: {
+            ...styles.filterCard,
+            ...(option.isActive ? styles.activeFilterCard : null)
+          },
+          children: [Icon ? /*#__PURE__*/_jsx(Icon, {
+            size: 24,
+            color: option.color
+          }) : null, /*#__PURE__*/_jsx("span", {
+            style: styles.filterLabelCompact,
+            children: option.label
+          })]
+        }, option.id);
+      })
+    })]
+  });
+}
+
+// =============================
+// View (structure + logic mirror the native file 1:1)
+// =============================
+
+export function NetworkCopySettingsView({
+  settings,
+  onSettingsChange,
+  events = []
+}) {
+  // DEVIATION: native reads `useFeatureGate()`; license gating isn't part of
+  // the web port, so the free-user ProFeatureBanner branch never renders.
+  const isPro = true;
+
+  // Use tick for updating relative time
+  const tick = useSharedTick();
+
+  // State for preview expansion - collapsed by default to prevent crashes
+  const [isPreviewExpanded, setIsPreviewExpanded] = useState(false);
+
+  // Auto-detect if we have live data
+  const hasLiveData = events.length > 0;
+
+  // Get the most recent event timestamp for "last updated" display
+  const lastEventTimestamp = useMemo(() => {
+    if (!hasLiveData) return null;
+    const timestamps = events.map(e => typeof e.timestamp === "number" ? e.timestamp : new Date(e.timestamp).getTime());
+    return Math.max(...timestamps);
+  }, [events, hasLiveData]);
+
+  // Detect active preset
+  const activePreset = useMemo(() => detectActivePreset(settings), [settings]);
+
+  // Quick preset handlers
+  const applyUrlsPreset = useCallback(() => {
+    onSettingsChange(PRESET_CONFIGS.urls);
+  }, [onSettingsChange]);
+  const applyLLMPreset = useCallback(() => {
+    onSettingsChange(PRESET_CONFIGS.llm);
+  }, [onSettingsChange]);
+  const applyJSONPreset = useCallback(() => {
+    onSettingsChange(PRESET_CONFIGS.json);
+  }, [onSettingsChange]);
+  const applyFullPreset = useCallback(() => {
+    onSettingsChange(PRESET_CONFIGS.full);
+  }, [onSettingsChange]);
+
+  // Handle individual option changes
+  const handleOptionChange = useCallback((optionId, value) => {
+    const [group, key] = optionId.split("::");
+    if (group === "preset") {
+      switch (key) {
+        case "urls":
+          applyUrlsPreset();
+          break;
+        case "llm":
+          applyLLMPreset();
+          break;
+        case "json":
+          applyJSONPreset();
+          break;
+        case "full":
+          applyFullPreset();
+          break;
+      }
+      return;
+    }
+    if (group === "requestInfo") {
+      // Toggle boolean value
+      onSettingsChange({
+        ...settings,
+        [key]: !settings[key]
+      });
+      return;
+    }
+    if (group === "headers") {
+      // Toggle boolean value
+      onSettingsChange({
+        ...settings,
+        [key]: !settings[key]
+      });
+      return;
+    }
+    if (group === "body") {
+      if (key === "bodySizeThreshold") {
+        onSettingsChange({
+          ...settings,
+          bodySizeThreshold: value
+        });
+      } else {
+        // Toggle boolean value
+        onSettingsChange({
+          ...settings,
+          [key]: !settings[key]
+        });
+      }
+      return;
+    }
+    if (group === "format") {
+      onSettingsChange({
+        ...settings,
+        format: value
+      });
+      return;
+    }
+    if (group === "filter") {
+      onSettingsChange({
+        ...settings,
+        filterMode: value
+      });
+    }
+  }, [settings, onSettingsChange, applyUrlsPreset, applyLLMPreset, applyJSONPreset, applyFullPreset]);
+
+  // Mock data for preview
+  const mockRequestData = useMemo(() => ({
+    method: "POST",
+    url: "https://api.example.com/v1/users",
+    status: 201,
+    duration: 342,
+    timestamp: new Date().toISOString(),
+    requestHeaders: {
+      "Content-Type": "application/json",
+      Authorization: "Bearer ***"
+    },
+    responseHeaders: {
+      "Content-Type": "application/json",
+      "X-Request-ID": "abc123"
+    },
+    requestBody: {
+      name: "John Doe",
+      email: "john@example.com"
+    },
+    responseBody: {
+      id: "user_123",
+      name: "John Doe",
+      email: "john@example.com",
+      createdAt: "2025-01-10T12:00:00Z"
+    }
+  }), []);
+
+  // Estimate the size of the preview content to warn users about large payloads
+  const estimatedSize = useMemo(() => {
+    const dataSource = hasLiveData ? events : [mockRequestData];
+    let totalSize = 0;
+    for (const eventData of dataSource) {
+      // Estimate based on what's included
+      if (settings.includeMethod) {
+        totalSize += (eventData.url?.length || 0) + 10;
+      }
+      if (settings.includeStatus) {
+        totalSize += 30;
+      }
+      if (settings.includeTimestamp) {
+        totalSize += 30;
+      }
+      if (settings.includeRequestHeaders) {
+        try {
+          totalSize += JSON.stringify(eventData.requestHeaders || {}).length;
+        } catch {
+          totalSize += 100;
+        }
+      }
+      if (settings.includeRequestBody) {
+        const body = "requestBody" in eventData ? eventData.requestBody : eventData.requestData;
+        try {
+          totalSize += JSON.stringify(body || {}).length;
+        } catch {
+          totalSize += 100;
+        }
+      }
+      if (settings.includeResponseBody) {
+        const body = "responseBody" in eventData ? eventData.responseBody : eventData.responseData;
+        try {
+          totalSize += JSON.stringify(body || {}).length;
+        } catch {
+          totalSize += 100;
+        }
+      }
+    }
+    return totalSize;
+  }, [hasLiveData, events, mockRequestData, settings]);
+
+  // Determine warning level based on estimated size
+  const sizeWarningLevel = useMemo(() => {
+    if (estimatedSize >= SIZE_DANGER_THRESHOLD) return "danger";
+    if (estimatedSize >= SIZE_WARNING_THRESHOLD) return "warning";
+    return "none";
+  }, [estimatedSize]);
+
+  // Generate copy text - should match preview content exactly
+  const generateCopyText = useCallback(() => {
+    const dataSource = hasLiveData ? events : [mockRequestData];
+    const {
+      format,
+      includeMethod,
+      includeStatus,
+      includeTimestamp,
+      includeRequestHeaders,
+      includeRequestBody,
+      includeResponseBody
+    } = settings;
+
+    // Build filtered data for a single event
+    const buildFilteredData = eventData => {
+      const data = {};
+      if (includeMethod) {
+        data.method = eventData.method;
+        data.url = eventData.url;
+      }
+      if (includeStatus) {
+        data.status = eventData.status;
+        data.duration = eventData.duration;
+      }
+      if (includeTimestamp) {
+        data.timestamp = eventData.timestamp;
+      }
+      if (includeRequestHeaders) {
+        data.requestHeaders = eventData.requestHeaders;
+      }
+      if (includeRequestBody) {
+        data.requestBody = "requestBody" in eventData ? eventData.requestBody : eventData.requestData;
+      }
+      if (includeResponseBody) {
+        data.responseBody = "responseBody" in eventData ? eventData.responseBody : eventData.responseData;
+      }
+      return data;
+    };
+    if (format === "json") {
+      const allFilteredData = dataSource.map(buildFilteredData);
+      return JSON.stringify(allFilteredData, null, 2);
+    }
+    if (format === "markdown") {
+      const allRequests = dataSource.map((eventData, index) => {
+        const sections = [];
+        sections.push(`# Request ${index + 1}`);
+        if (includeMethod) {
+          sections.push(`\n**${eventData.method}** ${eventData.url}`);
+        }
+        const metaInfo = [];
+        if (includeStatus) {
+          metaInfo.push(`**Status:** ${eventData.status}`);
+          metaInfo.push(`**Duration:** ${eventData.duration}ms`);
+        }
+        if (includeTimestamp) {
+          metaInfo.push(`**Timestamp:** ${eventData.timestamp}`);
+        }
+        if (metaInfo.length > 0) {
+          sections.push("\n" + metaInfo.join("\n"));
+        }
+        if (includeRequestHeaders) {
+          const headers = eventData.requestHeaders || {};
+          sections.push(`\n## Request Headers\n\`\`\`json\n${JSON.stringify(headers, null, 2)}\n\`\`\``);
+        }
+        if (includeRequestBody) {
+          const body = "requestBody" in eventData ? eventData.requestBody : eventData.requestData;
+          sections.push(`\n## Request Body\n\`\`\`json\n${JSON.stringify(body || {}, null, 2)}\n\`\`\``);
+        }
+        if (includeResponseBody) {
+          const body = "responseBody" in eventData ? eventData.responseBody : eventData.responseData;
+          sections.push(`\n## Response Body\n\`\`\`json\n${JSON.stringify(body || {}, null, 2)}\n\`\`\``);
+        }
+        return sections.join("\n");
+      });
+      return allRequests.join("\n\n---\n\n") || "No data included";
+    }
+
+    // Plaintext
+    const allRequests = dataSource.map((eventData, index) => {
+      const lines = [];
+      lines.push(`Request ${index + 1}:`);
+      if (includeMethod) {
+        lines.push(`${eventData.method} ${eventData.url}`);
+      }
+      if (includeStatus) {
+        lines.push(`Status: ${eventData.status}`);
+        lines.push(`Duration: ${eventData.duration}ms`);
+      }
+      if (includeTimestamp) {
+        lines.push(`Timestamp: ${eventData.timestamp}`);
+      }
+      if (includeRequestBody) {
+        const body = "requestBody" in eventData ? eventData.requestBody : eventData.requestData;
+        lines.push("\nRequest:");
+        lines.push(JSON.stringify(body || {}, null, 2));
+      }
+      if (includeResponseBody) {
+        const body = "responseBody" in eventData ? eventData.responseBody : eventData.responseData;
+        lines.push("\nResponse:");
+        lines.push(JSON.stringify(body || {}, null, 2));
+      }
+      return lines.join("\n");
+    });
+    return allRequests.join("\n\n---\n\n") || "No data included";
+  }, [hasLiveData, events, mockRequestData, settings]);
+
+  // Generate the expanded preview content (only called when expanded)
+  const generateExpandedPreviewContent = useCallback(() => {
+    if (settings.format === "json") {
+      const dataSource = hasLiveData ? events : [mockRequestData];
+      const buildFilteredData = eventData => {
+        const data = {};
+        if (settings.includeMethod) {
+          data.method = eventData.method;
+          data.url = eventData.url;
+        }
+        if (settings.includeStatus) {
+          data.status = eventData.status;
+          data.duration = eventData.duration;
+        }
+        if (settings.includeTimestamp) {
+          data.timestamp = eventData.timestamp;
+        }
+        if (settings.includeRequestHeaders) {
+          data.requestHeaders = eventData.requestHeaders;
+        }
+        if (settings.includeRequestBody) {
+          data.requestBody = "requestBody" in eventData ? eventData.requestBody : eventData.requestData;
+        }
+        if (settings.includeResponseBody) {
+          data.responseBody = "responseBody" in eventData ? eventData.responseBody : eventData.responseData;
+        }
+        return data;
+      };
+      const allFilteredData = dataSource.map(buildFilteredData);
+      return /*#__PURE__*/_jsx(DataViewer, {
+        data: allFilteredData,
+        title: "",
+        showTypeFilter: false
+      });
+    }
+
+    // Markdown / plaintext share the same monospace scroll box; the STRING is
+    // exactly what `generateCopyText` produces for these formats (native
+    // duplicates the builders — the outputs are identical, so the twin feeds
+    // the preview from the one builder rather than carrying a second copy).
+    const text = generateCopyText();
+    return /*#__PURE__*/_jsx("div", {
+      style: styles.previewScroll,
+      children: /*#__PURE__*/_jsx("div", {
+        style: {
+          ...(settings.format === "markdown" ? styles.markdownText : styles.plaintextText),
+          // Native `selectable={isPro}` — constant-true on web (deviations).
+          userSelect: isPro ? "text" : "none"
+        },
+        children: text || "No data included"
+      })
+    });
+  }, [settings, hasLiveData, events, mockRequestData, generateCopyText, isPro]);
+
+  // Generate formatted output for copying/preview - with collapsible support
+  const renderPreviewContent = () => {
+    const dataSource = hasLiveData ? events : [mockRequestData];
+    const requestCount = dataSource.length;
+
+    // Collapsed state - show summary with expand button
+    if (!isPreviewExpanded) {
+      const warningColor = sizeWarningLevel === "danger" ? macOSColors.semantic.error : sizeWarningLevel === "warning" ? macOSColors.semantic.warning : macOSColors.text.secondary;
+      return /*#__PURE__*/_jsxs("div", {
+        style: styles.collapsedPreview,
+        children: [/*#__PURE__*/_jsx("button", {
+          type: "button",
+          style: styles.expandButton,
+          onClick: () => setIsPreviewExpanded(true),
+          children: /*#__PURE__*/_jsxs("span", {
+            style: styles.expandButtonContent,
+            children: [/*#__PURE__*/_jsx(Eye, {
+              size: 16,
+              color: macOSColors.semantic.info
+            }), /*#__PURE__*/_jsxs("span", {
+              style: styles.expandButtonTextContainer,
+              children: [/*#__PURE__*/_jsx("span", {
+                style: styles.expandButtonTitle,
+                children: "Show Preview"
+              }), /*#__PURE__*/_jsxs("span", {
+                style: styles.expandButtonSubtitle,
+                children: [requestCount, " request", requestCount !== 1 ? "s" : "", " \u2022 ~", formatBytes(estimatedSize)]
+              })]
+            }), /*#__PURE__*/_jsx(ChevronDown, {
+              size: 16,
+              color: macOSColors.text.muted
+            })]
+          })
+        }), sizeWarningLevel !== "none" && /*#__PURE__*/_jsxs("div", {
+          style: {
+            ...styles.sizeWarning,
+            ...(sizeWarningLevel === "danger" ? styles.sizeWarningDanger : null)
+          },
+          children: [/*#__PURE__*/_jsx(AlertTriangle, {
+            size: 12,
+            color: warningColor
+          }), /*#__PURE__*/_jsx("span", {
+            style: {
+              ...styles.sizeWarningText,
+              color: warningColor
+            },
+            children: sizeWarningLevel === "danger" ? "Very large payload - may cause performance issues" : "Large payload - preview may be slow"
+          })]
+        })]
+      });
+    }
+
+    // Expanded state - show collapse button + actual content
+    return /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsxs("button", {
+        type: "button",
+        style: styles.collapseButton,
+        onClick: () => setIsPreviewExpanded(false),
+        children: [/*#__PURE__*/_jsx("span", {
+          style: styles.collapseButtonText,
+          children: "Hide Preview"
+        }), /*#__PURE__*/_jsx(ChevronUp, {
+          size: 14,
+          color: macOSColors.text.secondary
+        })]
+      }), generateExpandedPreviewContent()]
+    });
+  };
+
+  // Preview header actions (status label and Copy button)
+  const statusLabel = hasLiveData && lastEventTimestamp ? `Live data • Updated ${formatRelativeTime(lastEventTimestamp, tick)}` : "Mock data (no events captured)";
+
+  // Section configs — ids/labels/icons/colors verbatim from the native
+  // `dynamicFilterConfig` memo.
+  const presetOptions = [{
+    id: "preset::urls",
+    label: "URLs",
+    icon: Link,
+    color: macOSColors.semantic.info,
+    value: "urls",
+    isActive: activePreset === "urls"
+  }, {
+    id: "preset::llm",
+    label: "LLM",
+    icon: Zap,
+    color: macOSColors.semantic.success,
+    value: "llm",
+    isActive: activePreset === "llm"
+  }, {
+    id: "preset::json",
+    label: "JSON",
+    icon: FileCode,
+    color: macOSColors.semantic.warning,
+    value: "json",
+    isActive: activePreset === "json"
+  }, {
+    id: "preset::full",
+    label: "Full",
+    icon: FileText,
+    color: macOSColors.semantic.info,
+    value: "full",
+    isActive: activePreset === "full"
+  }, {
+    id: "preset::custom",
+    label: "Custom",
+    icon: Settings,
+    color: macOSColors.text.secondary,
+    value: "custom",
+    isActive: activePreset === null
+  }];
+  const includeOptions = [{
+    id: "requestInfo::includeMethod",
+    label: "URL",
+    value: "includeMethod",
+    isActive: settings.includeMethod
+  }, {
+    id: "requestInfo::includeStatus",
+    label: "Status",
+    value: "includeStatus",
+    isActive: settings.includeStatus
+  }, {
+    id: "requestInfo::includeTimestamp",
+    label: "Time",
+    value: "includeTimestamp",
+    isActive: settings.includeTimestamp
+  }, {
+    id: "headers::includeRequestHeaders",
+    label: "Headers",
+    value: "includeRequestHeaders",
+    isActive: settings.includeRequestHeaders
+  }, {
+    id: "body::includeRequestBody",
+    label: "Req Body",
+    value: "includeRequestBody",
+    isActive: settings.includeRequestBody
+  }, {
+    id: "body::includeResponseBody",
+    label: "Res Body",
+    value: "includeResponseBody",
+    isActive: settings.includeResponseBody
+  }, {
+    id: "requestInfo::includeErrors",
+    label: "Errors",
+    value: "includeErrors",
+    isActive: settings.includeErrors
+  }];
+  const formatOptions = [{
+    id: "format::markdown",
+    label: "Markdown",
+    icon: FileText,
+    color: macOSColors.semantic.info,
+    value: "markdown",
+    isActive: settings.format === "markdown"
+  }, {
+    id: "format::json",
+    label: "JSON",
+    icon: FileCode,
+    color: macOSColors.semantic.warning,
+    value: "json",
+    isActive: settings.format === "json"
+  }, {
+    id: "format::plaintext",
+    label: "Text",
+    icon: Hash,
+    color: macOSColors.text.secondary,
+    value: "plaintext",
+    isActive: settings.format === "plaintext"
+  }];
+
+  // The DynamicFilterView subtree for this config: sections, then PREVIEW.
+  return /*#__PURE__*/_jsx("div", {
+    style: styles.container,
+    children: /*#__PURE__*/_jsxs("div", {
+      style: styles.scrollContent,
+      children: [/*#__PURE__*/_jsx(FilterCardSection, {
+        title: "Presets",
+        options: presetOptions,
+        onOptionPress: handleOptionChange
+      }), /*#__PURE__*/_jsx(FilterCardSection, {
+        title: "Include",
+        options: includeOptions,
+        onOptionPress: handleOptionChange
+      }), /*#__PURE__*/_jsx(FilterCardSection, {
+        title: "Format",
+        options: formatOptions,
+        onOptionPress: handleOptionChange
+      }), /*#__PURE__*/_jsxs("div", {
+        style: styles.previewSection,
+        children: [/*#__PURE__*/_jsx(SectionHeaderRow, {
+          icon: Eye,
+          title: "PREVIEW",
+          actions: /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx("span", {
+              style: styles.statusLabel,
+              children: statusLabel
+            }), /*#__PURE__*/_jsx(CopyButton, {
+              value: generateCopyText(),
+              size: 14,
+              "aria-label": "Copy preview"
+            })]
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          style: styles.previewContent,
+          children: renderPreviewContent()
+        })]
+      })]
+    })
+  });
+}
+
+// Values mirror the native StyleSheet blocks (NetworkCopySettingsView.tsx +
+// DynamicFilterView.tsx + SectionHeader.tsx) 1:1.
+const styles = {
+  // DynamicFilterView `container` + `scrollContent`.
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    minHeight: 0,
+    backgroundColor: buoyColors.base,
+    overflowY: "auto"
+  },
+  scrollContent: {
+    padding: "16px 16px 24px"
+  },
+  // DynamicFilterView `section` + `filterGrid` + cards.
+  section: {
+    marginBottom: 8
+  },
+  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,
+    fontFamily: "inherit",
+    gap: 0
+  },
+  activeFilterCard: {
+    backgroundColor: `${buoyColors.primary}33`,
+    border: `2px solid ${buoyColors.primary}`,
+    // Native: shadowColor primary, opacity 0.3, radius 8.
+    boxShadow: `0 0 8px ${buoyColors.primary}4D`
+  },
+  filterLabelCompact: {
+    fontSize: 10,
+    color: buoyColors.text,
+    fontWeight: 600,
+    textAlign: "center",
+    textTransform: "capitalize",
+    // Native textShadow 0/0.5/1 @ 0.3 black.
+    textShadow: "0 0.5px 1px rgba(0, 0, 0, 0.3)",
+    marginTop: 3
+  },
+  // SectionHeader.tsx values.
+  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,
+    minWidth: 0,
+    fontSize: 14,
+    fontWeight: 600,
+    color: buoyColors.text,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    textAlign: "left"
+  },
+  sectionHeaderActions: {
+    display: "inline-flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginLeft: "auto"
+  },
+  // DynamicFilterView `previewSection`/`previewContent`.
+  previewSection: {
+    backgroundColor: buoyColors.hover,
+    borderRadius: 16,
+    border: `1px solid ${buoyColors.borderStrong}`,
+    marginTop: 16,
+    overflow: "hidden"
+  },
+  previewContent: {
+    padding: "12px 16px 16px",
+    backgroundColor: buoyColors.base,
+    margin: "0 12px 12px",
+    borderRadius: 8,
+    border: `1px solid ${buoyColors.border}`
+  },
+  // NetworkCopySettingsView.tsx values.
+  previewScroll: {
+    maxHeight: 300,
+    overflowY: "auto"
+  },
+  markdownText: {
+    fontFamily: "ui-monospace, Menlo, monospace",
+    fontSize: 11,
+    color: macOSColors.text.primary,
+    lineHeight: "18px",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+    userSelect: "text"
+  },
+  plaintextText: {
+    fontFamily: "ui-monospace, Menlo, monospace",
+    fontSize: 11,
+    color: macOSColors.text.primary,
+    lineHeight: "18px",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+    userSelect: "text"
+  },
+  statusLabel: {
+    fontSize: 11,
+    fontWeight: 600,
+    color: macOSColors.text.muted,
+    marginRight: 8
+  },
+  // Collapsible preview styles
+  collapsedPreview: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 8
+  },
+  expandButton: {
+    display: "block",
+    width: "100%",
+    boxSizing: "border-box",
+    backgroundColor: macOSColors.background.input,
+    borderRadius: 8,
+    border: `1px solid ${macOSColors.border.default}`,
+    padding: 12,
+    cursor: "pointer",
+    margin: 0,
+    fontFamily: "inherit",
+    textAlign: "left"
+  },
+  expandButtonContent: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10
+  },
+  expandButtonTextContainer: {
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    minWidth: 0
+  },
+  expandButtonTitle: {
+    fontSize: 13,
+    fontWeight: 600,
+    color: macOSColors.text.primary
+  },
+  expandButtonSubtitle: {
+    fontSize: 11,
+    color: macOSColors.text.secondary,
+    marginTop: 2
+  },
+  collapseButton: {
+    display: "flex",
+    width: "100%",
+    boxSizing: "border-box",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    padding: "8px 0",
+    margin: "0 0 8px",
+    backgroundColor: macOSColors.background.hover,
+    borderRadius: 6,
+    border: `1px solid ${macOSColors.border.default}`,
+    cursor: "pointer",
+    fontFamily: "inherit"
+  },
+  collapseButtonText: {
+    fontSize: 12,
+    fontWeight: 500,
+    color: macOSColors.text.secondary
+  },
+  sizeWarning: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    padding: "6px 10px",
+    backgroundColor: macOSColors.semantic.warningBackground,
+    borderRadius: 6,
+    border: `1px solid ${macOSColors.semantic.warning}30`
+  },
+  sizeWarningDanger: {
+    backgroundColor: macOSColors.semantic.errorBackground,
+    border: `1px solid ${macOSColors.semantic.error}30`
+  },
+  sizeWarningText: {
+    fontSize: 11,
+    fontWeight: 500,
+    flex: 1,
+    textAlign: "left"
+  }
+};