@buoy-gg/events 2.1.1

package/src/components/EventsCopySettingsView.tsx

@@ -0,0 +1,742 @@
+/**
+ * EventsCopySettingsView
+ *
+ * Settings UI for configuring event export format and content.
+ * Based on NetworkCopySettingsView pattern.
+ */
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Text, StyleSheet, ScrollView, View, TouchableOpacity } from "react-native";
+import {
+  DynamicFilterView,
+  type DynamicFilterConfig,
+  macOSColors,
+  FileText,
+  FileCode,
+  Hash,
+  Zap,
+  AlertTriangle,
+  Settings,
+  Eye,
+  ChevronDown,
+  ChevronUp,
+  XCircle,
+  ToolbarCopyButton,
+  useFeatureGate,
+  ProFeatureBanner,
+} from "@buoy-gg/shared-ui";
+import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
+import type { UnifiedEvent } from "../types";
+import {
+  type EventsCopySettings,
+  DEFAULT_COPY_SETTINGS,
+  COPY_PRESETS,
+  PRESET_METADATA,
+  detectActivePreset,
+  type CopyPresetName,
+} from "../types/copySettings";
+import {
+  generateExport,
+  estimateExportSize,
+  getExportSummary,
+} from "../utils/eventExportFormatter";
+import {
+  loadCopySettings,
+  saveCopySettings,
+} from "../utils/copySettingsStorage";
+
+interface EventsCopySettingsViewProps {
+  events?: UnifiedEvent[];
+  initialSettings?: EventsCopySettings;
+  onSettingsChange?: (settings: EventsCopySettings) => void;
+}
+
+// Size thresholds for warnings
+const SIZE_WARNING_THRESHOLD = 50 * 1024; // 50KB
+const SIZE_DANGER_THRESHOLD = 200 * 1024; // 200KB
+
+// Helper to format bytes
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// Mock events for preview when no real events exist
+function createMockEvents(): UnifiedEvent[] {
+  const now = Date.now();
+  return [
+    {
+      id: "mock-1",
+      source: "storage-async",
+      timestamp: now - 2000,
+      title: "Set Item",
+      subtitle: "user_cart",
+      status: "success",
+      originalEvent: { action: "setItem", key: "user_cart", value: { items: 2 } },
+    },
+    {
+      id: "mock-2",
+      source: "react-query-query",
+      timestamp: now - 1500,
+      title: "cart \u203A items",
+      subtitle: "Fetching...",
+      status: "pending",
+      originalEvent: { type: "query-fetch-start", queryKey: ["cart", "items"] },
+      correlationId: "rq-query-cart",
+      sequenceInGroup: 1,
+    },
+    {
+      id: "mock-3",
+      source: "react-query-query",
+      timestamp: now - 1000,
+      title: "cart \u203A items",
+      subtitle: "Success \u00B7 500ms",
+      status: "success",
+      originalEvent: { type: "query-fetch-success", queryKey: ["cart", "items"], data: { items: [] } },
+      correlationId: "rq-query-cart",
+      sequenceInGroup: 2,
+    },
+    {
+      id: "mock-4",
+      source: "network",
+      timestamp: now - 500,
+      title: "POST /api/checkout",
+      subtitle: "402 \u00B7 450ms",
+      status: "error",
+      originalEvent: { method: "POST", url: "/api/checkout", status: 402, error: "Payment required" },
+    },
+  ];
+}
+
+export function EventsCopySettingsView({
+  events = [],
+  initialSettings = DEFAULT_COPY_SETTINGS,
+  onSettingsChange,
+}: EventsCopySettingsViewProps) {
+  const { isPro } = useFeatureGate();
+  const [settings, setSettings] = useState<EventsCopySettings>(initialSettings);
+  const [isPreviewExpanded, setIsPreviewExpanded] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  // Load persisted settings on mount
+  useEffect(() => {
+    let mounted = true;
+    loadCopySettings().then((savedSettings) => {
+      if (mounted && savedSettings) {
+        setSettings(savedSettings);
+        onSettingsChange?.(savedSettings);
+      }
+      if (mounted) {
+        setIsLoaded(true);
+      }
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [onSettingsChange]);
+
+  // Update internal state, notify parent, and persist
+  const updateSettings = useCallback(
+    (newSettings: EventsCopySettings) => {
+      setSettings(newSettings);
+      onSettingsChange?.(newSettings);
+      // Persist to storage
+      saveCopySettings(newSettings);
+    },
+    [onSettingsChange]
+  );
+
+  // Use mock events if no real events
+  const hasLiveData = events.length > 0;
+  const previewEvents = hasLiveData ? events : createMockEvents();
+
+  // Detect active preset
+  const activePreset = useMemo(() => detectActivePreset(settings), [settings]);
+
+  // Estimate size
+  const estimatedSize = useMemo(
+    () => estimateExportSize(previewEvents, settings),
+    [previewEvents, settings]
+  );
+
+  // Size warning level
+  const sizeWarningLevel = useMemo(() => {
+    if (estimatedSize >= SIZE_DANGER_THRESHOLD) return "danger";
+    if (estimatedSize >= SIZE_WARNING_THRESHOLD) return "warning";
+    return "none";
+  }, [estimatedSize]);
+
+  // Generate copy text
+  const generateCopyText = useCallback(() => {
+    return generateExport(previewEvents, settings);
+  }, [previewEvents, settings]);
+
+  // Handle preset selection
+  const applyPreset = useCallback(
+    (presetName: CopyPresetName) => {
+      const preset = COPY_PRESETS[presetName];
+      updateSettings({
+        ...preset,
+        // Convert readonly array to mutable array
+        filterSources: [...preset.filterSources],
+      });
+    },
+    [updateSettings]
+  );
+
+  // Handle option changes
+  const handleOptionChange = useCallback(
+    (optionId: string, value: unknown) => {
+      const [group, key] = optionId.split("::");
+
+      if (group === "preset") {
+        applyPreset(key as CopyPresetName);
+        return;
+      }
+
+      if (group === "include") {
+        updateSettings({
+          ...settings,
+          [key]: !settings[key as keyof EventsCopySettings],
+        });
+        return;
+      }
+
+      if (group === "format") {
+        updateSettings({
+          ...settings,
+          format: value as EventsCopySettings["format"],
+        });
+        return;
+      }
+
+      if (group === "timestamp") {
+        updateSettings({
+          ...settings,
+          timestampFormat: value as EventsCopySettings["timestampFormat"],
+        });
+        return;
+      }
+
+      if (group === "filter") {
+        updateSettings({
+          ...settings,
+          filterMode: value as EventsCopySettings["filterMode"],
+        });
+        return;
+      }
+
+      if (group === "threshold") {
+        updateSettings({
+          ...settings,
+          dataSizeThreshold: value as EventsCopySettings["dataSizeThreshold"],
+        });
+        return;
+      }
+    },
+    [settings, updateSettings, applyPreset]
+  );
+
+  // Render preview content
+  const renderPreviewContent = useCallback(() => {
+    const eventCount = previewEvents.length;
+
+    // Collapsed state
+    if (!isPreviewExpanded) {
+      const warningColor =
+        sizeWarningLevel === "danger"
+          ? macOSColors.semantic.error
+          : sizeWarningLevel === "warning"
+          ? macOSColors.semantic.warning
+          : macOSColors.text.secondary;
+
+      return (
+        <View style={styles.collapsedPreview}>
+          <TouchableOpacity
+            style={styles.expandButton}
+            onPress={() => setIsPreviewExpanded(true)}
+          >
+            <View style={styles.expandButtonContent}>
+              <Eye size={16} color={macOSColors.semantic.info} />
+              <View style={styles.expandButtonTextContainer}>
+                <Text style={styles.expandButtonTitle}>Show Preview</Text>
+                <Text style={styles.expandButtonSubtitle}>
+                  {eventCount} event{eventCount !== 1 ? "s" : ""} \u00B7 ~
+                  {formatBytes(estimatedSize)}
+                  {!hasLiveData ? " (mock data)" : ""}
+                </Text>
+              </View>
+              <ChevronDown size={16} color={macOSColors.text.muted} />
+            </View>
+          </TouchableOpacity>
+
+          {sizeWarningLevel !== "none" && (
+            <View
+              style={[
+                styles.sizeWarning,
+                sizeWarningLevel === "danger" && styles.sizeWarningDanger,
+              ]}
+            >
+              <AlertTriangle size={12} color={warningColor} />
+              <Text style={[styles.sizeWarningText, { color: warningColor }]}>
+                {sizeWarningLevel === "danger"
+                  ? "Very large payload - may cause performance issues"
+                  : "Large payload - preview may be slow"}
+              </Text>
+            </View>
+          )}
+        </View>
+      );
+    }
+
+    // Expanded state
+    const exportText = generateCopyText();
+
+    return (
+      <View>
+        <TouchableOpacity
+          style={styles.collapseButton}
+          onPress={() => setIsPreviewExpanded(false)}
+        >
+          <Text style={styles.collapseButtonText}>Hide Preview</Text>
+          <ChevronUp size={14} color={macOSColors.text.secondary} />
+        </TouchableOpacity>
+
+        {settings.format === "json" ? (
+          <DataViewer
+            data={JSON.parse(exportText)}
+            title=""
+            showTypeFilter={false}
+          />
+        ) : (
+          <ScrollView style={styles.previewScroll} nestedScrollEnabled>
+            <Text style={styles.previewText} selectable={isPro}>
+              {exportText}
+            </Text>
+          </ScrollView>
+        )}
+      </View>
+    );
+  }, [
+    isPreviewExpanded,
+    previewEvents,
+    settings,
+    estimatedSize,
+    sizeWarningLevel,
+    hasLiveData,
+    generateCopyText,
+    isPro,
+  ]);
+
+  // Render preview header actions
+  const renderPreviewHeaderActions = useCallback(() => {
+    const summary = getExportSummary(previewEvents);
+    const statusLabel = hasLiveData
+      ? `${summary.totalEvents} events`
+      : "Mock data (no events captured)";
+
+    return (
+      <>
+        <Text style={styles.statusLabel}>{statusLabel}</Text>
+        <ToolbarCopyButton value={generateCopyText()} />
+      </>
+    );
+  }, [hasLiveData, previewEvents, generateCopyText]);
+
+  // Build filter config
+  const dynamicFilterConfig = useMemo<DynamicFilterConfig>(
+    () => ({
+      sections: [
+        // Presets Section
+        {
+          id: "presets",
+          title: "Presets",
+          type: "custom" as const,
+          data: [
+            {
+              id: "preset::llm",
+              label: PRESET_METADATA.llm.label,
+              icon: Zap,
+              color: PRESET_METADATA.llm.color,
+              value: "llm",
+              isActive: activePreset === "llm",
+              description: PRESET_METADATA.llm.description,
+            },
+            {
+              id: "preset::bugReport",
+              label: PRESET_METADATA.bugReport.label,
+              icon: AlertTriangle,
+              color: PRESET_METADATA.bugReport.color,
+              value: "bugReport",
+              isActive: activePreset === "bugReport",
+              description: PRESET_METADATA.bugReport.description,
+            },
+            {
+              id: "preset::json",
+              label: PRESET_METADATA.json.label,
+              icon: FileCode,
+              color: PRESET_METADATA.json.color,
+              value: "json",
+              isActive: activePreset === "json",
+              description: PRESET_METADATA.json.description,
+            },
+            {
+              id: "preset::errors",
+              label: PRESET_METADATA.errors.label,
+              icon: XCircle,
+              color: PRESET_METADATA.errors.color,
+              value: "errors",
+              isActive: activePreset === "errors",
+              description: PRESET_METADATA.errors.description,
+            },
+            {
+              id: "preset::minimal",
+              label: PRESET_METADATA.minimal.label,
+              icon: FileText,
+              color: PRESET_METADATA.minimal.color,
+              value: "minimal",
+              isActive: activePreset === "minimal",
+              description: PRESET_METADATA.minimal.description,
+            },
+            {
+              id: "preset::custom",
+              label: "Custom",
+              icon: Settings,
+              color: macOSColors.text.secondary,
+              value: "custom",
+              isActive: activePreset === null,
+              description: "User-configured",
+            },
+          ],
+        },
+
+        // Include Section
+        {
+          id: "include",
+          title: "Include",
+          type: "custom" as const,
+          data: [
+            {
+              id: "include::includeSource",
+              label: "Source",
+              value: "includeSource",
+              isActive: settings.includeSource,
+            },
+            {
+              id: "include::includeStatus",
+              label: "Status",
+              value: "includeStatus",
+              isActive: settings.includeStatus,
+            },
+            {
+              id: "include::includeTitle",
+              label: "Title",
+              value: "includeTitle",
+              isActive: settings.includeTitle,
+            },
+            {
+              id: "include::includeSubtitle",
+              label: "Subtitle",
+              value: "includeSubtitle",
+              isActive: settings.includeSubtitle,
+            },
+            {
+              id: "include::includeCorrelation",
+              label: "Correlation",
+              value: "includeCorrelation",
+              isActive: settings.includeCorrelation,
+            },
+            {
+              id: "include::includeDuration",
+              label: "Duration",
+              value: "includeDuration",
+              isActive: settings.includeDuration,
+            },
+            {
+              id: "include::includeSummaryHeader",
+              label: "Summary",
+              value: "includeSummaryHeader",
+              isActive: settings.includeSummaryHeader,
+            },
+            {
+              id: "include::includeEventData",
+              label: "Data",
+              value: "includeEventData",
+              isActive: settings.includeEventData,
+            },
+          ],
+        },
+
+        // Format Section
+        {
+          id: "format",
+          title: "Format",
+          type: "custom" as const,
+          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",
+            },
+          ],
+        },
+
+        // Timestamp Section
+        {
+          id: "timestamp",
+          title: "Timestamps",
+          type: "custom" as const,
+          data: [
+            {
+              id: "timestamp::relative",
+              label: "Relative",
+              value: "relative",
+              isActive: settings.timestampFormat === "relative",
+              description: "+0ms, +150ms",
+            },
+            {
+              id: "timestamp::absolute",
+              label: "Absolute",
+              value: "absolute",
+              isActive: settings.timestampFormat === "absolute",
+              description: "ISO format",
+            },
+            {
+              id: "timestamp::both",
+              label: "Both",
+              value: "both",
+              isActive: settings.timestampFormat === "both",
+              description: "Both formats",
+            },
+          ],
+        },
+
+        // Filter Section
+        {
+          id: "filter",
+          title: "Filter Events",
+          type: "custom" as const,
+          data: [
+            {
+              id: "filter::all",
+              label: "All",
+              value: "all",
+              isActive: settings.filterMode === "all",
+            },
+            {
+              id: "filter::errors",
+              label: "Errors",
+              icon: XCircle,
+              color: macOSColors.semantic.error,
+              value: "errors",
+              isActive: settings.filterMode === "errors",
+            },
+            {
+              id: "filter::success",
+              label: "Success",
+              color: macOSColors.semantic.success,
+              value: "success",
+              isActive: settings.filterMode === "success",
+            },
+            {
+              id: "filter::pending",
+              label: "Pending",
+              color: macOSColors.semantic.warning,
+              value: "pending",
+              isActive: settings.filterMode === "pending",
+            },
+          ],
+        },
+
+        // LLM Optimization Section
+        {
+          id: "llmOptimization",
+          title: "LLM Optimization",
+          type: "custom" as const,
+          data: [
+            {
+              id: "include::compactMode",
+              label: "Compact",
+              value: "compactMode",
+              isActive: settings.compactMode,
+              description: "One line per event",
+            },
+            {
+              id: "include::smartJsonParsing",
+              label: "Smart JSON",
+              value: "smartJsonParsing",
+              isActive: settings.smartJsonParsing,
+              description: "Parse nested JSON",
+            },
+            {
+              id: "include::reduxChangedOnly",
+              label: "Redux Diff",
+              value: "reduxChangedOnly",
+              isActive: settings.reduxChangedOnly,
+              description: "Only show changes",
+            },
+            {
+              id: "include::showStorageDiff",
+              label: "Storage Diff",
+              value: "showStorageDiff",
+              isActive: settings.showStorageDiff,
+              description: "Show what changed",
+            },
+            {
+              id: "include::stripVerboseFields",
+              label: "Strip Noise",
+              value: "stripVerboseFields",
+              isActive: settings.stripVerboseFields,
+              description: "Remove images/descriptions",
+            },
+          ],
+        },
+      ],
+      previewSection: {
+        enabled: true,
+        title: "PREVIEW",
+        icon: Eye,
+        content: renderPreviewContent,
+        headerActions: renderPreviewHeaderActions,
+      },
+      onFilterChange: handleOptionChange,
+    }),
+    [settings, activePreset, handleOptionChange, renderPreviewContent, renderPreviewHeaderActions]
+  );
+
+  // Pro gating - show banner at top with preview below (no floating)
+  if (!isPro) {
+    return (
+      <ScrollView style={styles.gatedContainer} contentContainerStyle={styles.gatedContent}>
+        <ProFeatureBanner
+          featureName="Events Export"
+          description="Export event flows to share with your team, debug issues, or feed into AI tools."
+          benefits={[
+            "Export to Markdown, JSON, or plain text",
+            "Customizable presets (LLM-ready, Bug Report, JSON)",
+            "Share event flows with teammates",
+            "Feed event context directly to AI assistants",
+          ]}
+        />
+        <View style={styles.gatedPreview}>
+          <DynamicFilterView {...dynamicFilterConfig} />
+        </View>
+      </ScrollView>
+    );
+  }
+
+  return <DynamicFilterView {...dynamicFilterConfig} />;
+}
+
+const styles = StyleSheet.create({
+  collapsedPreview: {
+    gap: 8,
+  },
+  expandButton: {
+    backgroundColor: macOSColors.background.input,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    padding: 12,
+  },
+  expandButtonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+  },
+  expandButtonTextContainer: {
+    flex: 1,
+  },
+  expandButtonTitle: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: macOSColors.text.primary,
+  },
+  expandButtonSubtitle: {
+    fontSize: 11,
+    color: macOSColors.text.secondary,
+    marginTop: 2,
+  },
+  collapseButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 8,
+    marginBottom: 8,
+    backgroundColor: macOSColors.background.hover,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+  },
+  collapseButtonText: {
+    fontSize: 12,
+    fontWeight: "500",
+    color: macOSColors.text.secondary,
+  },
+  sizeWarning: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    backgroundColor: macOSColors.semantic.warningBackground,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: macOSColors.semantic.warning + "30",
+  },
+  sizeWarningDanger: {
+    backgroundColor: macOSColors.semantic.errorBackground,
+    borderColor: macOSColors.semantic.error + "30",
+  },
+  sizeWarningText: {
+    fontSize: 11,
+    fontWeight: "500",
+    flex: 1,
+  },
+  previewScroll: {
+    maxHeight: 300,
+  },
+  previewText: {
+    fontFamily: "monospace",
+    fontSize: 11,
+    color: macOSColors.text.primary,
+    lineHeight: 18,
+  },
+  statusLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: macOSColors.text.muted,
+    marginRight: 8,
+  },
+  gatedContainer: {
+    flex: 1,
+  },
+  gatedContent: {
+    padding: 12,
+    gap: 12,
+  },
+  gatedPreview: {
+    // No flex: 1 so it doesn't try to fill remaining space
+  },
+});