@buoy-gg/events 2.1.1

package/lib/module/components/EventsModal.js

@@ -0,0 +1,259 @@
+"use strict";
+
+/**
+ * EventsModal
+ *
+ * Modal wrapper for the unified events timeline.
+ * Uses JsModal for consistent bottom sheet behavior.
+ */
+
+import { View, StyleSheet, TouchableOpacity, Text, Alert } from "react-native";
+import { useState, useCallback } from "react";
+import { useRouter } from "expo-router";
+import { JsModal, ModalHeader, buoyColors, Trash2, Power, Copy, devToolsStorageKeys, ToolbarCopyButton, UpgradeModal } from "@buoy-gg/shared-ui";
+import { useUnifiedEvents } from "../hooks/useUnifiedEvents";
+import { UnifiedEventFilters } from "./UnifiedEventFilters";
+import { UnifiedEventList } from "./UnifiedEventList";
+import { UnifiedEventDetail } from "./UnifiedEventDetail";
+import { EventsCopySettingsView } from "./EventsCopySettingsView";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Try to load TickProvider from network package for time refresh
+let TickProvider = null;
+try {
+  // @ts-ignore - Dynamic import that may not exist
+  const network = require("@buoy-gg/network");
+  TickProvider = network.TickProvider;
+} catch {
+  // Network package not installed, times won't auto-refresh
+}
+export function EventsModal({
+  visible,
+  onClose,
+  onBack,
+  onMinimize,
+  enableSharedModalDimensions = false
+}) {
+  const router = useRouter();
+  const {
+    filteredEvents,
+    availableSources,
+    toggleSource,
+    clearEvents,
+    totalCount,
+    filteredCount,
+    isCapturing,
+    toggleCapturing,
+    hiddenEventsCount
+  } = useUnifiedEvents();
+  const [currentView, setCurrentView] = useState("list");
+  const [selectedEvent, setSelectedEvent] = useState(null);
+  const [expandedEventId, setExpandedEventId] = useState(null);
+  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+
+  // Navigation handler for route events
+  const handleNavigate = useCallback(pathname => {
+    try {
+      router.push(pathname);
+    } catch (error) {
+      Alert.alert("Navigation Error", String(error));
+    }
+  }, [router]);
+  const handleEventPress = useCallback(event => {
+    // Route events expand in-place instead of navigating to detail
+    if (event.source === "route") {
+      setExpandedEventId(prev => prev === event.id ? null : event.id);
+      return;
+    }
+    setSelectedEvent(event);
+    setCurrentView("detail");
+  }, []);
+  const handleBack = useCallback(() => {
+    if (currentView === "detail") {
+      setSelectedEvent(null);
+      setCurrentView("list");
+    } else if (currentView === "copySettings") {
+      setCurrentView("list");
+    }
+  }, [currentView]);
+  const handleOpenCopySettings = useCallback(() => {
+    setCurrentView("copySettings");
+  }, []);
+  const handleModeChange = useCallback(_mode => {
+    // Mode changes handled by JsModal
+  }, []);
+  const persistenceKey = enableSharedModalDimensions ? devToolsStorageKeys.modal.root() : "buoy-events-modal";
+  if (!visible) return null;
+  const renderHeaderContent = () => {
+    // Detail view header
+    if (currentView === "detail" && selectedEvent) {
+      const copyData = {
+        source: selectedEvent.source,
+        title: selectedEvent.title,
+        subtitle: selectedEvent.subtitle,
+        status: selectedEvent.status,
+        timestamp: new Date(selectedEvent.timestamp).toISOString(),
+        data: selectedEvent.originalEvent
+      };
+      return /*#__PURE__*/_jsxs(ModalHeader, {
+        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+          onBack: handleBack
+        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: selectedEvent.title
+        }), /*#__PURE__*/_jsx(ModalHeader.Actions, {
+          children: /*#__PURE__*/_jsx(ToolbarCopyButton, {
+            value: copyData
+          })
+        })]
+      });
+    }
+
+    // Copy settings view header
+    if (currentView === "copySettings") {
+      return /*#__PURE__*/_jsxs(ModalHeader, {
+        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+          onBack: handleBack
+        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: "Copy Settings"
+        })]
+      });
+    }
+
+    // List view header (default)
+    return /*#__PURE__*/_jsxs(ModalHeader, {
+      children: [onBack && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
+        onBack: onBack
+      }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+        title: "",
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.headerTitleContainer,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.headerTitle,
+            children: "Events"
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: styles.headerSubtitle,
+            children: [totalCount, " captured"]
+          })]
+        })
+      }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: handleOpenCopySettings,
+          style: [styles.headerActionButton, totalCount === 0 && styles.headerActionButtonDisabled],
+          disabled: totalCount === 0,
+          children: /*#__PURE__*/_jsx(Copy, {
+            size: 14,
+            color: totalCount > 0 ? buoyColors.textMuted : buoyColors.textMuted + "50"
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: toggleCapturing,
+          style: [styles.headerActionButton, isCapturing ? styles.startButton : styles.stopButton],
+          children: /*#__PURE__*/_jsx(Power, {
+            size: 14,
+            color: isCapturing ? buoyColors.success : buoyColors.error
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: clearEvents,
+          style: [styles.headerActionButton, totalCount === 0 && styles.headerActionButtonDisabled],
+          disabled: totalCount === 0,
+          children: /*#__PURE__*/_jsx(Trash2, {
+            size: 14,
+            color: totalCount > 0 ? buoyColors.textMuted : buoyColors.textMuted + "50"
+          })
+        })]
+      })]
+    });
+  };
+  const content = /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: currentView === "copySettings" ? /*#__PURE__*/_jsx(EventsCopySettingsView, {
+      events: filteredEvents
+    }) : currentView === "detail" && selectedEvent ? /*#__PURE__*/_jsx(UnifiedEventDetail, {
+      event: selectedEvent,
+      onBack: handleBack
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(UnifiedEventFilters, {
+        availableSources: availableSources,
+        onToggleSource: toggleSource,
+        totalCount: totalCount,
+        filteredCount: filteredCount
+      }), /*#__PURE__*/_jsx(UnifiedEventList, {
+        events: filteredEvents,
+        selectedEventId: undefined,
+        expandedEventId: expandedEventId,
+        onEventPress: handleEventPress,
+        onNavigate: handleNavigate,
+        isCapturing: isCapturing,
+        hiddenEventsCount: hiddenEventsCount,
+        onUpgradePress: () => setShowUpgradeModal(true)
+      })]
+    })
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(JsModal, {
+      visible: visible,
+      onClose: onClose,
+      onMinimize: onMinimize,
+      persistenceKey: persistenceKey,
+      header: {
+        showToggleButton: true,
+        customContent: renderHeaderContent()
+      },
+      onModeChange: handleModeChange,
+      enablePersistence: true,
+      initialMode: "bottomSheet",
+      enableGlitchEffects: true,
+      styles: {},
+      disableScrollWrapper: true,
+      children: TickProvider ? /*#__PURE__*/_jsx(TickProvider, {
+        children: content
+      }) : content
+    }), /*#__PURE__*/_jsx(UpgradeModal, {
+      visible: showUpgradeModal,
+      onClose: () => setShowUpgradeModal(false),
+      featureName: "Unlimited Events",
+      description: "View your complete event history to debug complex flows and track down issues.",
+      benefits: ["Unlimited event history (vs 25 events)", "Export events to Markdown, JSON, or plain text", "Share event flows with teammates", "Feed event context directly to AI assistants"]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: buoyColors.base
+  },
+  headerTitleContainer: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: 8
+  },
+  headerTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: buoyColors.text
+  },
+  headerSubtitle: {
+    fontSize: 12,
+    color: buoyColors.textMuted
+  },
+  headerActionButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: buoyColors.card,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  headerActionButtonDisabled: {
+    opacity: 0.55
+  },
+  startButton: {
+    backgroundColor: buoyColors.success + "20",
+    borderColor: buoyColors.success + "40"
+  },
+  stopButton: {
+    backgroundColor: buoyColors.error + "20",
+    borderColor: buoyColors.error + "40"
+  }
+});
+//# sourceMappingURL=EventsModal.js.map

package/lib/module/components/ReactQueryEventDetail.js

@@ -0,0 +1,424 @@
+"use strict";
+
+/**
+ * ReactQueryEventDetail
+ *
+ * Detail view for React Query events in the Events DevTools.
+ * Styled similarly to the React Query DevTools detail view.
+ *
+ * Uses local type definitions to avoid hard dependency on @buoy-gg/react-query.
+ */
+
+import { memo, useMemo } from "react";
+import { View, Text, StyleSheet, ScrollView } from "react-native";
+import { buoyColors, displayValue } from "@buoy-gg/shared-ui";
+import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
+
+/**
+ * Extended React Query event with additional data fields
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Event type display configuration
+ */
+const EVENT_TYPE_CONFIG = {
+  "query-fetch-start": {
+    label: "Query Fetching",
+    color: buoyColors.primary,
+    icon: "hourglass"
+  },
+  "query-fetch-success": {
+    label: "Query Success",
+    color: buoyColors.success,
+    icon: "checkmark"
+  },
+  "query-fetch-error": {
+    label: "Query Error",
+    color: buoyColors.error,
+    icon: "close"
+  },
+  "query-invalidated": {
+    label: "Query Invalidated",
+    color: buoyColors.warning,
+    icon: "refresh"
+  },
+  "mutation-start": {
+    label: "Mutation Started",
+    color: buoyColors.primary,
+    icon: "hourglass"
+  },
+  "mutation-success": {
+    label: "Mutation Success",
+    color: buoyColors.success,
+    icon: "checkmark"
+  },
+  "mutation-error": {
+    label: "Mutation Error",
+    color: buoyColors.error,
+    icon: "close"
+  }
+};
+export const ReactQueryEventDetail = /*#__PURE__*/memo(function ReactQueryEventDetail({
+  event
+}) {
+  const reactQueryEvent = event.originalEvent;
+  const eventConfig = EVENT_TYPE_CONFIG[reactQueryEvent.type] || {
+    label: reactQueryEvent.type,
+    color: buoyColors.textMuted,
+    icon: "help"
+  };
+  const isQuery = reactQueryEvent.type.startsWith("query-");
+  const isMutation = reactQueryEvent.type.startsWith("mutation-");
+
+  // Format query/mutation key for display
+  const keyDisplay = useMemo(() => {
+    const key = isQuery ? reactQueryEvent.queryKey : reactQueryEvent.mutationKey;
+    if (!key) {
+      // For mutations without a key, show the mutation ID
+      if (isMutation && reactQueryEvent.mutationId !== undefined) {
+        return `Mutation #${reactQueryEvent.mutationId}`;
+      }
+      return "No key";
+    }
+    return displayValue(key, true);
+  }, [reactQueryEvent, isQuery, isMutation]);
+
+  // Format timestamp
+  const timestamp = new Date(reactQueryEvent.timestamp);
+  const timeString = timestamp.toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: true
+  });
+
+  // Determine what data to show
+  const hasData = isQuery ? !!reactQueryEvent.queryData : !!reactQueryEvent.mutationData;
+  const hasError = isQuery ? !!reactQueryEvent.queryError : !!reactQueryEvent.mutationError;
+  const hasVariables = isMutation && !!reactQueryEvent.mutationVariables;
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    style: styles.container,
+    contentContainerStyle: styles.contentContainer,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.section,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [styles.eventTypeContainer, {
+          borderColor: eventConfig.color + "4D"
+        }],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.eventTypeHeader, {
+            backgroundColor: eventConfig.color + "15",
+            color: eventConfig.color
+          }],
+          children: eventConfig.label
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.eventTypeContent,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.keyRow,
+            children: [/*#__PURE__*/_jsx(ScrollView, {
+              horizontal: true,
+              style: styles.keyScrollView,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.keyText,
+                children: keyDisplay
+              })
+            }), /*#__PURE__*/_jsx(EventStatusChip, {
+              type: reactQueryEvent.type,
+              color: eventConfig.color
+            })]
+          }), reactQueryEvent.duration !== undefined && /*#__PURE__*/_jsxs(View, {
+            style: styles.row,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.labelText,
+              children: "Duration:"
+            }), /*#__PURE__*/_jsxs(Text, {
+              style: styles.valueText,
+              children: [reactQueryEvent.duration.toFixed(0), "ms"]
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.row,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.labelText,
+              children: "Timestamp:"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.valueText,
+              children: timeString
+            })]
+          }), isQuery && reactQueryEvent.queryHash && /*#__PURE__*/_jsxs(View, {
+            style: styles.row,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.labelText,
+              children: "Query Hash:"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.valueText, styles.hashText],
+              numberOfLines: 1,
+              children: reactQueryEvent.queryHash
+            })]
+          }), isMutation && reactQueryEvent.mutationId !== undefined && /*#__PURE__*/_jsxs(View, {
+            style: styles.row,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.labelText,
+              children: "Mutation ID:"
+            }), /*#__PURE__*/_jsxs(Text, {
+              style: styles.valueText,
+              children: ["#", reactQueryEvent.mutationId]
+            })]
+          })]
+        })]
+      })
+    }), hasVariables && /*#__PURE__*/_jsx(View, {
+      style: styles.section,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.dataContainer,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.dataHeader, {
+            color: buoyColors.warning
+          }],
+          children: "Variables"
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.dataContent,
+          children: /*#__PURE__*/_jsx(DataViewer, {
+            title: "",
+            data: reactQueryEvent.mutationVariables,
+            showTypeFilter: false,
+            initialExpanded: true
+          })
+        })]
+      })
+    }), hasData && /*#__PURE__*/_jsx(View, {
+      style: styles.section,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.dataContainer,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.dataHeader, {
+            color: buoyColors.success
+          }],
+          children: isQuery ? "Query Data" : "Mutation Result"
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.dataContent,
+          children: /*#__PURE__*/_jsx(DataViewer, {
+            title: "",
+            data: isQuery ? reactQueryEvent.queryData : reactQueryEvent.mutationData,
+            showTypeFilter: false,
+            initialExpanded: true
+          })
+        })]
+      })
+    }), hasError && /*#__PURE__*/_jsx(View, {
+      style: styles.section,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [styles.dataContainer, styles.errorContainer],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.dataHeader, styles.errorHeader],
+          children: "Error"
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.dataContent,
+          children: /*#__PURE__*/_jsx(DataViewer, {
+            title: "",
+            data: isQuery ? reactQueryEvent.queryError : reactQueryEvent.mutationError,
+            showTypeFilter: false,
+            initialExpanded: true
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.section,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.dataContainer,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.dataHeader,
+          children: "Event Details"
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.dataContent,
+          children: /*#__PURE__*/_jsx(DataViewer, {
+            title: "",
+            data: reactQueryEvent,
+            showTypeFilter: true,
+            initialExpanded: false
+          })
+        })]
+      })
+    })]
+  });
+});
+
+/**
+ * Status chip component for event type
+ */
+function EventStatusChip({
+  type,
+  color
+}) {
+  const getStatusLabel = () => {
+    if (type.includes("start")) return "PENDING";
+    if (type.includes("success")) return "SUCCESS";
+    if (type.includes("error")) return "ERROR";
+    if (type.includes("invalidated")) return "INVALIDATED";
+    return type.toUpperCase();
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.statusChip, {
+      backgroundColor: color + "15",
+      borderColor: color + "33"
+    }],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [styles.statusChipText, {
+        color
+      }],
+      children: getStatusLabel()
+    })
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: buoyColors.base
+  },
+  contentContainer: {
+    padding: 8,
+    paddingBottom: 24
+  },
+  section: {
+    marginBottom: 12
+  },
+  // Event type container (like QueryDetails)
+  eventTypeContainer: {
+    minWidth: 200,
+    backgroundColor: buoyColors.card,
+    borderRadius: 6,
+    borderWidth: 1,
+    overflow: "hidden",
+    shadowColor: buoyColors.primary,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 6
+  },
+  eventTypeHeader: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontWeight: "600",
+    fontSize: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.primary + "33",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: "monospace"
+  },
+  eventTypeContent: {
+    padding: 0
+  },
+  keyRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.textMuted + "66"
+  },
+  keyScrollView: {
+    flex: 1,
+    marginRight: 8
+  },
+  keyText: {
+    fontSize: 12,
+    color: buoyColors.text,
+    fontFamily: "monospace",
+    lineHeight: 18,
+    backgroundColor: buoyColors.primary + "15",
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: buoyColors.primary + "4D"
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.textMuted + "66"
+  },
+  labelText: {
+    fontSize: 10,
+    color: buoyColors.textSecondary,
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: "monospace"
+  },
+  valueText: {
+    fontSize: 12,
+    color: buoyColors.text,
+    fontWeight: "500",
+    fontVariant: ["tabular-nums"],
+    fontFamily: "monospace"
+  },
+  hashText: {
+    flex: 1,
+    textAlign: "right",
+    marginLeft: 8
+  },
+  // Status chip
+  statusChip: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderWidth: 1,
+    borderRadius: 6,
+    alignSelf: "flex-start"
+  },
+  statusChipText: {
+    fontSize: 11,
+    fontWeight: "600",
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+    fontFamily: "monospace"
+  },
+  // Data containers
+  dataContainer: {
+    minWidth: 200,
+    backgroundColor: buoyColors.card,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: buoyColors.primary + "4D",
+    overflow: "hidden",
+    shadowColor: buoyColors.primary,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 6
+  },
+  dataHeader: {
+    backgroundColor: buoyColors.primary + "1A",
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontWeight: "600",
+    fontSize: 12,
+    color: buoyColors.primary,
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.primary + "33",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: "monospace"
+  },
+  dataContent: {
+    padding: 8
+  },
+  // Error container
+  errorContainer: {
+    borderColor: buoyColors.error + "4D"
+  },
+  errorHeader: {
+    backgroundColor: buoyColors.error + "1A",
+    color: buoyColors.error,
+    borderBottomColor: buoyColors.error + "33"
+  }
+});
+//# sourceMappingURL=ReactQueryEventDetail.js.map