@buoy-gg/network 7.0.40 → 7.0.42

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

@@ -1,750 +1,27 @@
-"use strict";
-
-import { DynamicFilterView, macOSColors, FileText, FileCode, Link, Zap, Settings, Hash, Eye, ToolbarCopyButton, formatRelativeTime, useFeatureGate, ProFeatureBanner, ExportPreview, monoFont } from "@buoy-gg/shared-ui";
-import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
-import { useCallback, useMemo, useState } from "react";
-import { Text, StyleSheet, ScrollView, View } from "react-native";
-import { useTickEveryMinute } from "../hooks/useTickEveryMinute";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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;
-    return /*#__PURE__*/_jsx(ExportPreview, {
-      expanded: isPreviewExpanded,
-      onExpandedChange: setIsPreviewExpanded,
-      summary: `${requestCount} request${requestCount !== 1 ? "s" : ""} • ~${formatBytes(estimatedSize)}`,
-      warningLevel: sizeWarningLevel,
-      warningText: {
-        warning: "Large payload - preview may be slow",
-        danger: "Very large payload - may cause performance issues"
-      },
-      renderBody: 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()
-      })]
-    });
-  }, [hasLiveData, lastEventTimestamp, tick, generateCopyText]);
-
-  // 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: monoFont,
-    fontSize: 11,
-    color: macOSColors.text.primary,
-    lineHeight: 18
-  },
-  plaintextText: {
-    fontFamily: monoFont,
-    fontSize: 11,
-    color: macOSColors.text.primary,
-    lineHeight: 18
-  },
-  statusLabel: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: macOSColors.text.muted,
-    marginRight: 8
-  },
-  // Collapsible preview styles
-  // Gated container styles for free users
-  gatedContainer: {
-    flex: 1,
-    padding: 12
-  },
-  gatedPreview: {
-    flex: 1
-  }
-});
+"use strict";import{DynamicFilterView as X,macOSColors as y,FileText as Y,FileCode as Q,Link as se,Zap as te,Settings as oe,Hash as ie,Eye as ue,ToolbarCopyButton as ne,formatRelativeTime as le,useFeatureGate as de,ProFeatureBanner as ce,ExportPreview as ae,monoFont as g}from"@buoy-gg/shared-ui";import{DataViewer as pe}from"@buoy-gg/shared-ui/dataViewer";import{useCallback as q,useMemo as b,useState as me}from"react";import{Text as F,StyleSheet as fe,ScrollView as v,View as D}from"react-native";import{useTickEveryMinute as ye}from"../hooks/useTickEveryMinute";import{jsx as m,Fragment as he,jsxs as ee}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"};const k={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"}};function qe(r){for(const[l,c]of Object.entries(k)){const T=Object.keys(c).every(j=>c[j]===r[j]);if(T)return l}return null}const Re=100*1024;const Be=500*1024;function Se(r){if(r<1024)return`${r} B`;if(r<1024*1024)return`${(r/1024).toFixed(1)} KB`;return`${(r/(1024*1024)).toFixed(1)} MB`}export function NetworkCopySettingsView({settings:r,onSettingsChange:l,events:c=[]}){const{isPro:T}=de();const j=ye();const[P,re]=me(false);const a=c.length>0;const O=b(()=>{if(!a)return null;const d=c.map(o=>typeof o.timestamp==="number"?o.timestamp:new Date(o.timestamp).getTime());return Math.max(...d)},[c,a]);const x=b(()=>qe(r),[r]);const L=q(()=>{l(k.urls)},[l]);const z=q(()=>{l(k.llm)},[l]);const I=q(()=>{l(k.json)},[l]);const J=q(()=>{l(k.full)},[l]);const C=q((d,o)=>{const[u,n]=d.split("::");if(u==="preset"){switch(n){case"urls":L();break;case"llm":z();break;case"json":I();break;case"full":J();break}return}if(u==="requestInfo"){l({...r,[n]:!r[n]});return}if(u==="headers"){l({...r,[n]:!r[n]});return}if(u==="body"){if(n==="bodySizeThreshold"){l({...r,bodySizeThreshold:o})}else{l({...r,[n]:!r[n]})}return}if(u==="format"){l({...r,format:o});return}if(u==="filter"){l({...r,filterMode:o})}},[r,l,L,z,I,J]);const h=b(()=>({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"}}),[]);const be=b(()=>{if(a){return c}return[h]},[a,c,h]);const H=b(()=>{const d=a?c:[h];let o=0;for(const u of d){if(r.includeMethod){o+=(u.url?.length||0)+10}if(r.includeStatus){o+=30}if(r.includeTimestamp){o+=30}if(r.includeRequestHeaders){try{o+=JSON.stringify(u.requestHeaders||{}).length}catch{o+=100}}if(r.includeRequestBody){const n="requestBody"in u?u.requestBody:u.requestData;try{o+=JSON.stringify(n||{}).length}catch{o+=100}}if(r.includeResponseBody){const n="responseBody"in u?u.responseBody:u.responseData;try{o+=JSON.stringify(n||{}).length}catch{o+=100}}}return o},[a,c,h,r]);const _=b(()=>{if(H>=Be)return"danger";if(H>=Re)return"warning";return"none"},[H]);const V=q(()=>{const d=a?c:[h];const{format:o,includeMethod:u,includeStatus:n,includeTimestamp:R,includeRequestHeaders:$,includeRequestBody:B,includeResponseBody:S}=r;const M=t=>{const e={};if(u){e.method=t.method;e.url=t.url}if(n){e.status=t.status;e.duration=t.duration}if(R){e.timestamp=t.timestamp}if($){e.requestHeaders=t.requestHeaders}if(B){e.requestBody="requestBody"in t?t.requestBody:t.requestData}if(S){e.responseBody="responseBody"in t?t.responseBody:t.responseData}return e};if(o==="json"){const t=d.map(M);return JSON.stringify(t,null,2)}if(o==="markdown"){const t=d.map((e,i)=>{const s=[];s.push(`# Request ${i+1}`);if(u){s.push(`
+**${e.method}** ${e.url}`)}const f=[];if(n){f.push(`**Status:** ${e.status}`);f.push(`**Duration:** ${e.duration}ms`)}if(R){f.push(`**Timestamp:** ${e.timestamp}`)}if(f.length>0){s.push("\n"+f.join("\n"))}if($){const p=e.requestHeaders||{};s.push(`
+## Request Headers
+\`\`\`json
+${JSON.stringify(p,null,2)}
+\`\`\``)}if(B){const p="requestBody"in e?e.requestBody:e.requestData;s.push(`
+## Request Body
+\`\`\`json
+${JSON.stringify(p||{},null,2)}
+\`\`\``)}if(S){const p="responseBody"in e?e.responseBody:e.responseData;s.push(`
+## Response Body
+\`\`\`json
+${JSON.stringify(p||{},null,2)}
+\`\`\``)}return s.join("\n")});return t.join("\n\n---\n\n")||"No data included"}const A=d.map((t,e)=>{const i=[];i.push(`Request ${e+1}:`);if(u){i.push(`${t.method} ${t.url}`)}if(n){i.push(`Status: ${t.status}`);i.push(`Duration: ${t.duration}ms`)}if(R){i.push(`Timestamp: ${t.timestamp}`)}if(B){const s="requestBody"in t?t.requestBody:t.requestData;i.push("\nRequest:");i.push(JSON.stringify(s||{},null,2))}if(S){const s="responseBody"in t?t.responseBody:t.responseData;i.push("\nResponse:");i.push(JSON.stringify(s||{},null,2))}return i.join("\n")});return A.join("\n\n---\n\n")||"No data included"},[a,c,h,r]);const U=q(()=>{const d=a?c:[h];const{format:o,includeMethod:u,includeStatus:n,includeTimestamp:R,includeRequestHeaders:$,includeRequestBody:B,includeResponseBody:S}=r;const M=e=>{const i={};if(u){i.method=e.method;i.url=e.url}if(n){i.status=e.status;i.duration=e.duration}if(R){i.timestamp=e.timestamp}if($){i.requestHeaders=e.requestHeaders}if(B){i.requestBody="requestBody"in e?e.requestBody:e.requestData}if(S){i.responseBody="responseBody"in e?e.responseBody:e.responseData}return i};if(o==="json"){const e=d.map(M);return m(pe,{data:e,title:"",showTypeFilter:false})}if(o==="markdown"){const e=d.map((s,f)=>{const p=[];p.push(`# Request ${f+1}`);if(u){p.push(`
+**${s.method}** ${s.url}`)}const E=[];if(n){E.push(`**Status:** ${s.status}`);E.push(`**Duration:** ${s.duration}ms`)}if(R){E.push(`**Timestamp:** ${s.timestamp}`)}if(E.length>0){p.push("\n"+E.join("\n"))}if($){const N=s.requestHeaders||{};p.push(`
+## Request Headers
+\`\`\`json
+${JSON.stringify(N,null,2)}
+\`\`\``)}if(B){const N="requestBody"in s?s.requestBody:s.requestData;p.push(`
+## Request Body
+\`\`\`json
+${JSON.stringify(N||{},null,2)}
+\`\`\``)}if(S){const N="responseBody"in s?s.responseBody:s.responseData;p.push(`
+## Response Body
+\`\`\`json
+${JSON.stringify(N||{},null,2)}
+\`\`\``)}return p.join("\n")});const i=e.join("\n\n---\n\n");return m(v,{style:w.previewScroll,nestedScrollEnabled:true,children:m(F,{style:w.markdownText,selectable:T,children:i||"No data included"})})}const A=d.map((e,i)=>{const s=[];s.push(`Request ${i+1}:`);if(u){s.push(`${e.method} ${e.url}`)}if(n){s.push(`Status: ${e.status}`);s.push(`Duration: ${e.duration}ms`)}if(R){s.push(`Timestamp: ${e.timestamp}`)}if(B){const f="requestBody"in e?e.requestBody:e.requestData;s.push("\nRequest:");s.push(JSON.stringify(f||{},null,2))}if(S){const f="responseBody"in e?e.responseBody:e.responseData;s.push("\nResponse:");s.push(JSON.stringify(f||{},null,2))}return s.join("\n")});const t=A.join("\n\n---\n\n");return m(v,{style:w.previewScroll,nestedScrollEnabled:true,children:m(F,{style:w.plaintextText,selectable:T,children:t||"No data included"})})},[r,a,c,h,T]);const G=q(()=>{const d=a?c:[h];const o=d.length;return m(ae,{expanded:P,onExpandedChange:re,summary:`${o} request${o!==1?"s":""} \u2022 ~${Se(H)}`,warningLevel:_,warningText:{warning:"Large payload - preview may be slow",danger:"Very large payload - may cause performance issues"},renderBody:U})},[r,a,c,h,P,H,_,U]);const W=q(()=>{const d=a&&O?`Live data \u2022 Updated ${le(O,j)}`:"Mock data (no events captured)";return ee(he,{children:[m(F,{style:w.statusLabel,children:d}),m(ne,{value:V()})]})},[a,O,j,V]);const Z=q(()=>{return G()},[G]);const K=b(()=>({sections:[{id:"presets",title:"Presets",type:"custom",data:[{id:"preset::urls",label:"URLs",icon:se,color:y.semantic.info,value:"urls",isActive:x==="urls"},{id:"preset::llm",label:"LLM",icon:te,color:y.semantic.success,value:"llm",isActive:x==="llm"},{id:"preset::json",label:"JSON",icon:Q,color:y.semantic.warning,value:"json",isActive:x==="json"},{id:"preset::full",label:"Full",icon:Y,color:y.semantic.info,value:"full",isActive:x==="full"},{id:"preset::custom",label:"Custom",icon:oe,color:y.text.secondary,value:"custom",isActive:x===null}]},{id:"include",title:"Include",type:"custom",data:[{id:"requestInfo::includeMethod",label:"URL",value:"includeMethod",isActive:r.includeMethod},{id:"requestInfo::includeStatus",label:"Status",value:"includeStatus",isActive:r.includeStatus},{id:"requestInfo::includeTimestamp",label:"Time",value:"includeTimestamp",isActive:r.includeTimestamp},{id:"headers::includeRequestHeaders",label:"Headers",value:"includeRequestHeaders",isActive:r.includeRequestHeaders},{id:"body::includeRequestBody",label:"Req Body",value:"includeRequestBody",isActive:r.includeRequestBody},{id:"body::includeResponseBody",label:"Res Body",value:"includeResponseBody",isActive:r.includeResponseBody},{id:"requestInfo::includeErrors",label:"Errors",value:"includeErrors",isActive:r.includeErrors}]},{id:"format",title:"Format",type:"custom",data:[{id:"format::markdown",label:"Markdown",icon:Y,color:y.semantic.info,value:"markdown",isActive:r.format==="markdown"},{id:"format::json",label:"JSON",icon:Q,color:y.semantic.warning,value:"json",isActive:r.format==="json"},{id:"format::plaintext",label:"Text",icon:ie,color:y.text.secondary,value:"plaintext",isActive:r.format==="plaintext"}]}],previewSection:{enabled:true,title:"PREVIEW",icon:ue,content:Z,headerActions:W},onFilterChange:C}),[r,C,Z,W,x]);if(!T){return ee(D,{style:w.gatedContainer,children:[m(ce,{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"]}),m(D,{style:w.gatedPreview,children:m(X,{...K})})]})}return m(X,{...K})}const w=fe.create({previewScroll:{maxHeight:300},markdownText:{fontFamily:g,fontSize:11,color:y.text.primary,lineHeight:18},plaintextText:{fontFamily:g,fontSize:11,color:y.text.primary,lineHeight:18},statusLabel:{fontSize:11,fontWeight:"600",color:y.text.muted,marginRight:8},gatedContainer:{flex:1,padding:12},gatedPreview:{flex:1}});