@buoy-gg/network 1.7.2

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

@@ -0,0 +1,862 @@
+"use strict";
+
+import { DynamicFilterView, macOSColors, FileText, FileCode, Link, Zap, Settings, Hash, Eye, ChevronDown, ChevronUp, AlertTriangle, ToolbarCopyButton, formatRelativeTime, useFeatureGate, ProFeatureBanner } from "@buoy-gg/shared-ui";
+import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
+import { useCallback, useMemo, useState } from "react";
+import { Text, StyleSheet, ScrollView, View, TouchableOpacity } from "react-native";
+import { useTickEveryMinute } from "../hooks/useTickEveryMinute";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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"
+};
+
+// 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`;
+}
+export function NetworkCopySettingsView({
+  settings,
+  onSettingsChange,
+  events = []
+}) {
+  // Check Pro status for gating
+  const {
+    isPro
+  } = useFeatureGate();
+
+  // Use tick for updating relative time
+  const tick = useTickEveryMinute();
+
+  // 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"
+    }
+  }), []);
+
+  // Get data source - auto-detect live vs mock
+  const previewData = useMemo(() => {
+    if (hasLiveData) {
+      return events; // Show ALL events
+    }
+    // Mock data - return as array for consistency
+    return [mockRequestData];
+  }, [hasLiveData, events, mockRequestData]);
+
+  // 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(() => {
+    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 /*#__PURE__*/_jsx(DataViewer, {
+        data: allFilteredData,
+        title: "",
+        showTypeFilter: false
+      });
+    }
+    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');
+      });
+      const markdown = allRequests.join('\n\n---\n\n');
+      return /*#__PURE__*/_jsx(ScrollView, {
+        style: styles.previewScroll,
+        nestedScrollEnabled: true,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.markdownText,
+          selectable: isPro,
+          children: markdown || "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');
+    });
+    const plaintext = allRequests.join('\n\n---\n\n');
+    return /*#__PURE__*/_jsx(ScrollView, {
+      style: styles.previewScroll,
+      nestedScrollEnabled: true,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.plaintextText,
+        selectable: isPro,
+        children: plaintext || "No data included"
+      })
+    });
+  }, [settings, hasLiveData, events, mockRequestData, isPro]);
+
+  // Generate formatted output for copying/preview - with collapsible support
+  const generatePreviewContent = useCallback(() => {
+    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(View, {
+        style: styles.collapsedPreview,
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.expandButton,
+          onPress: () => setIsPreviewExpanded(true),
+          children: /*#__PURE__*/_jsxs(View, {
+            style: styles.expandButtonContent,
+            children: [/*#__PURE__*/_jsx(Eye, {
+              size: 16,
+              color: macOSColors.semantic.info
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.expandButtonTextContainer,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.expandButtonTitle,
+                children: "Show Preview"
+              }), /*#__PURE__*/_jsxs(Text, {
+                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(View, {
+          style: [styles.sizeWarning, sizeWarningLevel === 'danger' && styles.sizeWarningDanger],
+          children: [/*#__PURE__*/_jsx(AlertTriangle, {
+            size: 12,
+            color: warningColor
+          }), /*#__PURE__*/_jsx(Text, {
+            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(View, {
+      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.collapseButton,
+        onPress: () => setIsPreviewExpanded(false),
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.collapseButtonText,
+          children: "Hide Preview"
+        }), /*#__PURE__*/_jsx(ChevronUp, {
+          size: 14,
+          color: macOSColors.text.secondary
+        })]
+      }), generateExpandedPreviewContent()]
+    });
+  }, [settings, hasLiveData, events, mockRequestData, isPreviewExpanded, estimatedSize, sizeWarningLevel, generateExpandedPreviewContent]);
+
+  // Render preview header actions (status label and Copy button)
+  const renderPreviewHeaderActions = useCallback(() => {
+    const statusLabel = hasLiveData && lastEventTimestamp ? `Live data • Updated ${formatRelativeTime(lastEventTimestamp, tick)}` : "Mock data (no events captured)";
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.statusLabel,
+        children: statusLabel
+      }), /*#__PURE__*/_jsx(ToolbarCopyButton, {
+        value: generateCopyText(),
+        disabled: !isPro
+      })]
+    });
+  }, [hasLiveData, lastEventTimestamp, tick, generateCopyText, isPro]);
+
+  // Render preview content only
+  const renderPreviewContent = useCallback(() => {
+    return generatePreviewContent();
+  }, [generatePreviewContent]);
+  const dynamicFilterConfig = useMemo(() => ({
+    sections: [
+    // Quick Presets Section - Hero element
+    {
+      id: "presets",
+      title: "Presets",
+      type: "custom",
+      data: [{
+        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
+      }]
+    },
+    // Include Section - Consolidated
+    {
+      id: "include",
+      title: "Include",
+      type: "custom",
+      data: [{
+        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
+      }]
+    },
+    // Output Format
+    {
+      id: "format",
+      title: "Format",
+      type: "custom",
+      data: [{
+        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"
+      }]
+    }],
+    previewSection: {
+      enabled: true,
+      title: "PREVIEW",
+      icon: Eye,
+      content: renderPreviewContent,
+      headerActions: renderPreviewHeaderActions
+    },
+    onFilterChange: handleOptionChange
+  }), [settings, handleOptionChange, renderPreviewContent, renderPreviewHeaderActions, activePreset]);
+
+  // For free users, show banner at the top explaining this is a Pro feature
+  // Users can interact with controls but copy is blocked at the button level
+  if (!isPro) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.gatedContainer,
+      children: [/*#__PURE__*/_jsx(ProFeatureBanner, {
+        featureName: "Network Export",
+        description: "Export network requests to share with your team, debug APIs, or feed into AI tools.",
+        benefits: ["Export to JSON, Markdown, or plain text", "Customizable copy presets (URLs only, LLM-ready, full data)", "Share request details with teammates", "Feed network data directly to AI assistants"]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.gatedPreview,
+        children: /*#__PURE__*/_jsx(DynamicFilterView, {
+          ...dynamicFilterConfig
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(DynamicFilterView, {
+    ...dynamicFilterConfig
+  });
+}
+const styles = StyleSheet.create({
+  previewScroll: {
+    maxHeight: 300
+  },
+  markdownText: {
+    fontFamily: "monospace",
+    fontSize: 11,
+    color: macOSColors.text.primary,
+    lineHeight: 18
+  },
+  plaintextText: {
+    fontFamily: "monospace",
+    fontSize: 11,
+    color: macOSColors.text.primary,
+    lineHeight: 18
+  },
+  statusLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: macOSColors.text.muted,
+    marginRight: 8
+  },
+  // Collapsible preview styles
+  collapsedPreview: {
+    gap: 8
+  },
+  expandButton: {
+    backgroundColor: macOSColors.background.input,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    padding: 12
+  },
+  expandButtonContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10
+  },
+  expandButtonTextContainer: {
+    flex: 1
+  },
+  expandButtonTitle: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: macOSColors.text.primary
+  },
+  expandButtonSubtitle: {
+    fontSize: 11,
+    color: macOSColors.text.secondary,
+    marginTop: 2
+  },
+  collapseButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+    paddingVertical: 8,
+    marginBottom: 8,
+    backgroundColor: macOSColors.background.hover,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default
+  },
+  collapseButtonText: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: macOSColors.text.secondary
+  },
+  sizeWarning: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    backgroundColor: macOSColors.semantic.warningBackground,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: macOSColors.semantic.warning + '30'
+  },
+  sizeWarningDanger: {
+    backgroundColor: macOSColors.semantic.errorBackground,
+    borderColor: macOSColors.semantic.error + '30'
+  },
+  sizeWarningText: {
+    fontSize: 11,
+    fontWeight: '500',
+    flex: 1
+  },
+  // Gated container styles for free users
+  gatedContainer: {
+    flex: 1,
+    padding: 12
+  },
+  gatedPreview: {
+    flex: 1
+  }
+});