@buoy-gg/network 7.0.41 → 7.0.42

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

@@ -1,1237 +1,14 @@
-"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"
-  }
-};
+"use strict";import{useCallback as R,useEffect as ne,useMemo as z,useState as _}from"react";import{CopyButton as ie,DataViewer as le}from"./DataViewer.web";import{jsx as r,jsxs as c,Fragment as se}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 m={base:"#121212",card:"#1A1A1A",hover:"#242424",border:"#333333",borderStrong:"#444444",text:"#E0E0E0",primary:"#20C997"};const n={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"}};function S({size:e=14,color:t="currentColor",children:a}){return r("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:t,strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0,display:"block"},children:a})}const V=e=>c(S,{...e,children:[r("path",{d:"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"}),r("path",{d:"M14 2v4a2 2 0 0 0 2 2h4"}),r("path",{d:"M10 9H8"}),r("path",{d:"M16 13H8"}),r("path",{d:"M16 17H8"})]});const G=e=>c(S,{...e,children:[r("path",{d:"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"}),r("path",{d:"M14 2v4a2 2 0 0 0 2 2h4"}),r("path",{d:"M10 12.5 8 15l2 2.5"}),r("path",{d:"m14 12.5 2 2.5-2 2.5"})]});const de=e=>c(S,{...e,children:[r("path",{d:"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}),r("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 ae=e=>r(S,{...e,children:r("polygon",{points:"13 2 3 14 12 14 11 22 21 10 12 10 13 2"})});const ue=e=>c(S,{...e,children:[r("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"}),r("circle",{cx:"12",cy:"12",r:"3"})]});const ce=e=>c(S,{...e,children:[r("line",{x1:"4",x2:"20",y1:"9",y2:"9"}),r("line",{x1:"4",x2:"20",y1:"15",y2:"15"}),r("line",{x1:"10",x2:"8",y1:"3",y2:"21"}),r("line",{x1:"16",x2:"14",y1:"3",y2:"21"})]});const U=e=>c(S,{...e,children:[r("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"}),r("circle",{cx:"12",cy:"12",r:"3"})]});const pe=e=>r(S,{...e,children:r("path",{d:"m6 9 6 6 6-6"})});const fe=e=>r(S,{...e,children:r("path",{d:"m18 15-6-6-6 6"})});const me=e=>c(S,{...e,children:[r("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"}),r("path",{d:"M12 9v4"}),r("path",{d:"M12 17h.01"})]});const E=new Set;let C=null;function he(e){E.add(e);if(C==null){C=setInterval(()=>{const t=Date.now();E.forEach(a=>a(t))},5e3)}return()=>{E.delete(e);if(E.size===0&&C!=null){clearInterval(C);C=null}}}function ye(){const[e,t]=_(()=>Date.now());ne(()=>he(t),[]);return e}function xe(e,t=Date.now()){const a=e instanceof Date?e.getTime():e;const u=Math.floor((t-a)/1e3);if(u<0){return"just now"}if(u<60){return u===0?"just now":`${u}s ago`}const b=Math.floor(u/60);if(b<60){return`${b}m ago`}const q=Math.floor(b/60);if(q<24){return`${q}h ago`}const A=Math.floor(q/24);return`${A}d ago`}const M={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 be(e){for(const[t,a]of Object.entries(M)){const u=Object.keys(a).every(b=>a[b]===e[b]);if(u)return t}return null}const we=100*1024;const Be=500*1024;function Se(e){if(e<1024)return`${e} B`;if(e<1024*1024)return`${(e/1024).toFixed(1)} KB`;return`${(e/(1024*1024)).toFixed(1)} MB`}function Z({icon:e,iconColor:t,title:a,actions:u}){return c("div",{style:i.sectionHeader,children:[e?r("span",{style:i.sectionHeaderIcon,children:r(e,{size:12,color:t??m.primary})}):null,r("span",{style:i.sectionHeaderTitle,children:a}),u?r("span",{style:i.sectionHeaderActions,children:u}):null]})}function L({title:e,options:t,onOptionPress:a}){return c("div",{style:i.section,children:[r(Z,{title:e}),r("div",{style:i.filterGrid,children:t.map(u=>{const b=u.icon;return c("button",{type:"button",onClick:()=>a(u.id,u.value),style:{...i.filterCard,...u.isActive?i.activeFilterCard:null},children:[b?r(b,{size:24,color:u.color}):null,r("span",{style:i.filterLabelCompact,children:u.label})]},u.id)})})]})}export function NetworkCopySettingsView({settings:e,onSettingsChange:t,events:a=[]}){const u=true;const b=ye();const[q,A]=_(false);const B=a.length>0;const P=z(()=>{if(!B)return null;const h=a.map(l=>typeof l.timestamp==="number"?l.timestamp:new Date(l.timestamp).getTime());return Math.max(...h)},[a,B]);const T=z(()=>be(e),[e]);const N=R(()=>{t(M.urls)},[t]);const W=R(()=>{t(M.llm)},[t]);const J=R(()=>{t(M.json)},[t]);const D=R(()=>{t(M.full)},[t]);const F=R((h,l)=>{const[s,p]=h.split("::");if(s==="preset"){switch(p){case"urls":N();break;case"llm":W();break;case"json":J();break;case"full":D();break}return}if(s==="requestInfo"){t({...e,[p]:!e[p]});return}if(s==="headers"){t({...e,[p]:!e[p]});return}if(s==="body"){if(p==="bodySizeThreshold"){t({...e,bodySizeThreshold:l})}else{t({...e,[p]:!e[p]})}return}if(s==="format"){t({...e,format:l});return}if(s==="filter"){t({...e,filterMode:l})}},[e,t,N,W,J,D]);const g=z(()=>({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 j=z(()=>{const h=B?a:[g];let l=0;for(const s of h){if(e.includeMethod){l+=(s.url?.length||0)+10}if(e.includeStatus){l+=30}if(e.includeTimestamp){l+=30}if(e.includeRequestHeaders){try{l+=JSON.stringify(s.requestHeaders||{}).length}catch{l+=100}}if(e.includeRequestBody){const p="requestBody"in s?s.requestBody:s.requestData;try{l+=JSON.stringify(p||{}).length}catch{l+=100}}if(e.includeResponseBody){const p="responseBody"in s?s.responseBody:s.responseData;try{l+=JSON.stringify(p||{}).length}catch{l+=100}}}return l},[B,a,g,e]);const k=z(()=>{if(j>=Be)return"danger";if(j>=we)return"warning";return"none"},[j]);const $=R(()=>{const h=B?a:[g];const{format:l,includeMethod:s,includeStatus:p,includeTimestamp:f,includeRequestHeaders:y,includeRequestBody:O,includeResponseBody:I}=e;const te=o=>{const d={};if(s){d.method=o.method;d.url=o.url}if(p){d.status=o.status;d.duration=o.duration}if(f){d.timestamp=o.timestamp}if(y){d.requestHeaders=o.requestHeaders}if(O){d.requestBody="requestBody"in o?o.requestBody:o.requestData}if(I){d.responseBody="responseBody"in o?o.responseBody:o.responseData}return d};if(l==="json"){const o=h.map(te);return JSON.stringify(o,null,2)}if(l==="markdown"){const o=h.map((d,x)=>{const w=[];w.push(`# Request ${x+1}`);if(s){w.push(`
+**${d.method}** ${d.url}`)}const H=[];if(p){H.push(`**Status:** ${d.status}`);H.push(`**Duration:** ${d.duration}ms`)}if(f){H.push(`**Timestamp:** ${d.timestamp}`)}if(H.length>0){w.push("\n"+H.join("\n"))}if(y){const v=d.requestHeaders||{};w.push(`
+## Request Headers
+\`\`\`json
+${JSON.stringify(v,null,2)}
+\`\`\``)}if(O){const v="requestBody"in d?d.requestBody:d.requestData;w.push(`
+## Request Body
+\`\`\`json
+${JSON.stringify(v||{},null,2)}
+\`\`\``)}if(I){const v="responseBody"in d?d.responseBody:d.responseData;w.push(`
+## Response Body
+\`\`\`json
+${JSON.stringify(v||{},null,2)}
+\`\`\``)}return w.join("\n")});return o.join("\n\n---\n\n")||"No data included"}const oe=h.map((o,d)=>{const x=[];x.push(`Request ${d+1}:`);if(s){x.push(`${o.method} ${o.url}`)}if(p){x.push(`Status: ${o.status}`);x.push(`Duration: ${o.duration}ms`)}if(f){x.push(`Timestamp: ${o.timestamp}`)}if(O){const w="requestBody"in o?o.requestBody:o.requestData;x.push("\nRequest:");x.push(JSON.stringify(w||{},null,2))}if(I){const w="responseBody"in o?o.responseBody:o.responseData;x.push("\nResponse:");x.push(JSON.stringify(w||{},null,2))}return x.join("\n")});return oe.join("\n\n---\n\n")||"No data included"},[B,a,g,e]);const Y=R(()=>{if(e.format==="json"){const l=B?a:[g];const s=f=>{const y={};if(e.includeMethod){y.method=f.method;y.url=f.url}if(e.includeStatus){y.status=f.status;y.duration=f.duration}if(e.includeTimestamp){y.timestamp=f.timestamp}if(e.includeRequestHeaders){y.requestHeaders=f.requestHeaders}if(e.includeRequestBody){y.requestBody="requestBody"in f?f.requestBody:f.requestData}if(e.includeResponseBody){y.responseBody="responseBody"in f?f.responseBody:f.responseData}return y};const p=l.map(s);return r(le,{data:p,title:"",showTypeFilter:false})}const h=$();return r("div",{style:i.previewScroll,children:r("div",{style:{...e.format==="markdown"?i.markdownText:i.plaintextText,userSelect:u?"text":"none"},children:h||"No data included"})})},[e,B,a,g,$,u]);const K=()=>{const h=B?a:[g];const l=h.length;if(!q){const s=k==="danger"?n.semantic.error:k==="warning"?n.semantic.warning:n.text.secondary;return c("div",{style:i.collapsedPreview,children:[r("button",{type:"button",style:i.expandButton,onClick:()=>A(true),children:c("span",{style:i.expandButtonContent,children:[r(U,{size:16,color:n.semantic.info}),c("span",{style:i.expandButtonTextContainer,children:[r("span",{style:i.expandButtonTitle,children:"Show Preview"}),c("span",{style:i.expandButtonSubtitle,children:[l," request",l!==1?"s":""," \u2022 ~",Se(j)]})]}),r(pe,{size:16,color:n.text.muted})]})}),k!=="none"&&c("div",{style:{...i.sizeWarning,...k==="danger"?i.sizeWarningDanger:null},children:[r(me,{size:12,color:s}),r("span",{style:{...i.sizeWarningText,color:s},children:k==="danger"?"Very large payload - may cause performance issues":"Large payload - preview may be slow"})]})]})}return c("div",{children:[c("button",{type:"button",style:i.collapseButton,onClick:()=>A(false),children:[r("span",{style:i.collapseButtonText,children:"Hide Preview"}),r(fe,{size:14,color:n.text.secondary})]}),Y()]})};const X=B&&P?`Live data \u2022 Updated ${xe(P,b)}`:"Mock data (no events captured)";const Q=[{id:"preset::urls",label:"URLs",icon:de,color:n.semantic.info,value:"urls",isActive:T==="urls"},{id:"preset::llm",label:"LLM",icon:ae,color:n.semantic.success,value:"llm",isActive:T==="llm"},{id:"preset::json",label:"JSON",icon:G,color:n.semantic.warning,value:"json",isActive:T==="json"},{id:"preset::full",label:"Full",icon:V,color:n.semantic.info,value:"full",isActive:T==="full"},{id:"preset::custom",label:"Custom",icon:ue,color:n.text.secondary,value:"custom",isActive:T===null}];const ee=[{id:"requestInfo::includeMethod",label:"URL",value:"includeMethod",isActive:e.includeMethod},{id:"requestInfo::includeStatus",label:"Status",value:"includeStatus",isActive:e.includeStatus},{id:"requestInfo::includeTimestamp",label:"Time",value:"includeTimestamp",isActive:e.includeTimestamp},{id:"headers::includeRequestHeaders",label:"Headers",value:"includeRequestHeaders",isActive:e.includeRequestHeaders},{id:"body::includeRequestBody",label:"Req Body",value:"includeRequestBody",isActive:e.includeRequestBody},{id:"body::includeResponseBody",label:"Res Body",value:"includeResponseBody",isActive:e.includeResponseBody},{id:"requestInfo::includeErrors",label:"Errors",value:"includeErrors",isActive:e.includeErrors}];const re=[{id:"format::markdown",label:"Markdown",icon:V,color:n.semantic.info,value:"markdown",isActive:e.format==="markdown"},{id:"format::json",label:"JSON",icon:G,color:n.semantic.warning,value:"json",isActive:e.format==="json"},{id:"format::plaintext",label:"Text",icon:ce,color:n.text.secondary,value:"plaintext",isActive:e.format==="plaintext"}];return r("div",{style:i.container,children:c("div",{style:i.scrollContent,children:[r(L,{title:"Presets",options:Q,onOptionPress:F}),r(L,{title:"Include",options:ee,onOptionPress:F}),r(L,{title:"Format",options:re,onOptionPress:F}),c("div",{style:i.previewSection,children:[r(Z,{icon:U,title:"PREVIEW",actions:c(se,{children:[r("span",{style:i.statusLabel,children:X}),r(ie,{value:$(),size:14,"aria-label":"Copy preview"})]})}),r("div",{style:i.previewContent,children:K()})]})]})})}const i={container:{display:"flex",flexDirection:"column",flex:1,minHeight:0,backgroundColor:m.base,overflowY:"auto"},scrollContent:{padding:"16px 16px 24px"},section:{marginBottom:8},filterGrid:{display:"flex",flexDirection:"row",flexWrap:"wrap",gap:8,marginTop:8},filterCard:{display:"flex",backgroundColor:m.card,borderRadius:12,padding:"10px 8px",flexDirection:"column",alignItems:"center",justifyContent:"center",border:`1px solid ${m.border}`,width:72,minHeight:68,boxSizing:"border-box",cursor:"pointer",margin:0,fontFamily:"inherit",gap:0},activeFilterCard:{backgroundColor:`${m.primary}33`,border:`2px solid ${m.primary}`,boxShadow:`0 0 8px ${m.primary}4D`},filterLabelCompact:{fontSize:10,color:m.text,fontWeight:600,textAlign:"center",textTransform:"capitalize",textShadow:"0 0.5px 1px rgba(0, 0, 0, 0.3)",marginTop:3},sectionHeader:{display:"flex",flexDirection:"row",alignItems:"center",padding:"8px 16px",backgroundColor:m.base,minHeight:40,boxSizing:"border-box"},sectionHeaderIcon:{display:"inline-flex",marginRight:8},sectionHeaderTitle:{flex:1,minWidth:0,fontSize:14,fontWeight:600,color:m.text,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",textAlign:"left"},sectionHeaderActions:{display:"inline-flex",flexDirection:"row",alignItems:"center",gap:8,marginLeft:"auto"},previewSection:{backgroundColor:m.hover,borderRadius:16,border:`1px solid ${m.borderStrong}`,marginTop:16,overflow:"hidden"},previewContent:{padding:"12px 16px 16px",backgroundColor:m.base,margin:"0 12px 12px",borderRadius:8,border:`1px solid ${m.border}`},previewScroll:{maxHeight:300,overflowY:"auto"},markdownText:{fontFamily:"ui-monospace, Menlo, monospace",fontSize:11,color:n.text.primary,lineHeight:"18px",whiteSpace:"pre-wrap",wordBreak:"break-word",userSelect:"text"},plaintextText:{fontFamily:"ui-monospace, Menlo, monospace",fontSize:11,color:n.text.primary,lineHeight:"18px",whiteSpace:"pre-wrap",wordBreak:"break-word",userSelect:"text"},statusLabel:{fontSize:11,fontWeight:600,color:n.text.muted,marginRight:8},collapsedPreview:{display:"flex",flexDirection:"column",gap:8},expandButton:{display:"block",width:"100%",boxSizing:"border-box",backgroundColor:n.background.input,borderRadius:8,border:`1px solid ${n.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:n.text.primary},expandButtonSubtitle:{fontSize:11,color:n.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:n.background.hover,borderRadius:6,border:`1px solid ${n.border.default}`,cursor:"pointer",fontFamily:"inherit"},collapseButtonText:{fontSize:12,fontWeight:500,color:n.text.secondary},sizeWarning:{display:"flex",flexDirection:"row",alignItems:"center",gap:6,padding:"6px 10px",backgroundColor:n.semantic.warningBackground,borderRadius:6,border:`1px solid ${n.semantic.warning}30`},sizeWarningDanger:{backgroundColor:n.semantic.errorBackground,border:`1px solid ${n.semantic.error}30`},sizeWarningText:{fontSize:11,fontWeight:500,flex:1,textAlign:"left"}};