@buoy-gg/events 2.1.2 → 2.1.3

package/lib/commonjs/components/EventsCopySettingsView.js

@@ -267,14 +267,19 @@ function EventsCopySettingsView({
         data: JSON.parse(exportText),
         title: "",
         showTypeFilter: false
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-        style: styles.previewScroll,
-        nestedScrollEnabled: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.previewText,
-          selectable: isPro,
-          children: exportText
-        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        children: [settings.format === "mermaid" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.mermaidHint,
+          children: "\uD83D\uDCA1 Paste into mermaid.live to visualize"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+          style: styles.previewScroll,
+          nestedScrollEnabled: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.previewText,
+            selectable: isPro,
+            children: exportText
+          })
+        })]
       })]
     });
   }, [isPreviewExpanded, previewEvents, settings, estimatedSize, sizeWarningLevel, hasLiveData, generateCopyText, isPro]);
@@ -341,6 +346,14 @@ function EventsCopySettingsView({
         value: "minimal",
         isActive: activePreset === "minimal",
         description: _copySettings.PRESET_METADATA.minimal.description
+      }, {
+        id: "preset::mermaid",
+        label: _copySettings.PRESET_METADATA.mermaid.label,
+        icon: _sharedUi.GitBranch,
+        color: _copySettings.PRESET_METADATA.mermaid.color,
+        value: "mermaid",
+        isActive: activePreset === "mermaid",
+        description: _copySettings.PRESET_METADATA.mermaid.description
       }, {
         id: "preset::custom",
         label: "Custom",
@@ -424,6 +437,14 @@ function EventsCopySettingsView({
         color: _sharedUi.macOSColors.text.secondary,
         value: "plaintext",
         isActive: settings.format === "plaintext"
+      }, {
+        id: "format::mermaid",
+        label: "Diagram",
+        icon: _sharedUi.GitBranch,
+        color: "#A855F7",
+        value: "mermaid",
+        isActive: settings.format === "mermaid",
+        description: "Mermaid sequence diagram"
       }]
     },
     // Timestamp Section
@@ -625,6 +646,16 @@ const styles = _reactNative.StyleSheet.create({
     color: _sharedUi.macOSColors.text.primary,
     lineHeight: 18
   },
+  mermaidHint: {
+    fontSize: 11,
+    color: _sharedUi.macOSColors.text.secondary,
+    marginBottom: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    backgroundColor: "#A855F7" + "15",
+    borderRadius: 6,
+    overflow: "hidden"
+  },
   statusLabel: {
     fontSize: 11,
     fontWeight: "600",

package/lib/commonjs/components/UnifiedEventDetail.js

@@ -26,7 +26,8 @@ function tryLoadOptionalDetailComponents() {
   const components = {
     StorageEventDetailContent: null,
     ReduxActionDetailContent: null,
-    NetworkEventDetailView: null
+    NetworkEventDetailView: null,
+    RenderDetailView: null
   };
 
   // Try to load storage detail component
@@ -55,6 +56,15 @@ function tryLoadOptionalDetailComponents() {
   } catch {
     // Optional dependency not installed
   }
+
+  // Try to load render detail component
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const highlightUpdates = require("@buoy-gg/highlight-updates");
+    components.RenderDetailView = highlightUpdates.RenderDetailView;
+  } catch {
+    // Optional dependency not installed
+  }
   return components;
 }
 
@@ -100,6 +110,10 @@ const SOURCE_CONFIG = {
   route: {
     label: "Route",
     color: "#06B6D4"
+  },
+  render: {
+    label: "Render",
+    color: "#F472B6"
   }
 };
 
@@ -215,6 +229,23 @@ const UnifiedEventDetail = exports.UnifiedEventDetail = /*#__PURE__*/(0, _react.
     });
   }
 
+  // For render events, use the RenderDetailView if available
+  if (event.source === "render" && optionalComponents.RenderDetailView) {
+    const {
+      RenderDetailView
+    } = optionalComponents;
+    const renderData = event.originalEvent;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.container,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        style: styles.content,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderDetailView, {
+          render: renderData.render
+        })
+      })
+    });
+  }
+
   // Route events expand in-place in the list, so they shouldn't reach this detail view
   // If they do somehow, fall through to the generic view
 

package/lib/commonjs/components/UnifiedEventFilters.js

@@ -14,6 +14,9 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Filter bar showing toggleable badges for each available event source.
  * Badges are sorted: enabled first, disabled last.
  * Toggling a badge enables/disables event listening for that source.
+ *
+ * Badge layout (inspired by React Query DevTools):
+ * [subscriber_count] • Label [event_count]
  */
 
 const UnifiedEventFilters = exports.UnifiedEventFilters = /*#__PURE__*/(0, _react.memo)(function UnifiedEventFilters({
@@ -33,27 +36,45 @@ const UnifiedEventFilters = exports.UnifiedEventFilters = /*#__PURE__*/(0, _reac
       contentContainerStyle: styles.badgesRow,
       children: availableSources.map(source => {
         const isEnabled = source.enabled !== false;
+        const subscriberCount = source.subscriberCount;
+        const hasSubscriberTracking = subscriberCount !== undefined;
+        const eventCount = source.count || 0;
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
           style: [styles.badge, isEnabled ? {
-            backgroundColor: source.color + "20",
-            borderColor: source.color + "60"
+            backgroundColor: _sharedUi.buoyColors.card,
+            borderColor: source.color + "50"
           } : styles.badgeDisabled],
           onPress: () => onToggleSource(source.source),
           activeOpacity: 0.7,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          children: [hasSubscriberTracking && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.countBadge, {
+              backgroundColor: isEnabled ? subscriberCount > 0 ? source.color + "25" : _sharedUi.buoyColors.textMuted + "20" : _sharedUi.buoyColors.textMuted + "15"
+            }],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.countText, {
+                color: isEnabled ? subscriberCount > 0 ? source.color : _sharedUi.buoyColors.textMuted : _sharedUi.buoyColors.textMuted + "60"
+              }],
+              children: subscriberCount
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: [styles.dot, {
-              backgroundColor: isEnabled ? source.color : _sharedUi.buoyColors.textMuted + "60"
+              backgroundColor: isEnabled ? source.color : _sharedUi.buoyColors.textMuted + "40"
             }]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.badgeLabel, {
-              color: isEnabled ? source.color : _sharedUi.buoyColors.textMuted + "80"
+              color: isEnabled ? _sharedUi.buoyColors.text : _sharedUi.buoyColors.textMuted + "70"
             }],
             children: source.label
-          }), isEnabled && source.count > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.badgeCount, {
-              color: source.color
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.countBadge, {
+              backgroundColor: isEnabled ? eventCount > 0 ? source.color + "20" : _sharedUi.buoyColors.textMuted + "15" : _sharedUi.buoyColors.textMuted + "10"
             }],
-            children: source.count
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.countText, {
+                color: isEnabled ? eventCount > 0 ? source.color : _sharedUi.buoyColors.textMuted + "80" : _sharedUi.buoyColors.textMuted + "50"
+              }],
+              children: eventCount
+            })
           })]
         }, source.source);
       })
@@ -78,30 +99,38 @@ const styles = _reactNative.StyleSheet.create({
   badge: {
     flexDirection: "row",
     alignItems: "center",
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderRadius: 16,
+    paddingVertical: 5,
+    paddingHorizontal: 6,
+    borderRadius: 20,
     borderWidth: 1,
     gap: 6
   },
   badgeDisabled: {
     backgroundColor: _sharedUi.buoyColors.card,
     borderColor: _sharedUi.buoyColors.border,
-    opacity: 0.6
+    opacity: 0.5
   },
   dot: {
-    width: 6,
-    height: 6,
-    borderRadius: 3
+    width: 7,
+    height: 7,
+    borderRadius: 4
   },
   badgeLabel: {
     fontSize: 12,
-    fontWeight: "600"
+    fontWeight: "500"
   },
-  badgeCount: {
-    fontSize: 11,
-    fontWeight: "500",
-    opacity: 0.8
+  countBadge: {
+    minWidth: 18,
+    height: 18,
+    borderRadius: 9,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 5
+  },
+  countText: {
+    fontSize: 10,
+    fontWeight: "600",
+    fontVariant: ["tabular-nums"]
   },
   filterInfo: {
     marginTop: 6,

package/lib/commonjs/components/UnifiedEventItem.js

@@ -110,6 +110,10 @@ const SOURCE_CONFIG = {
   route: {
     label: "Route",
     color: "#06B6D4" // Cyan
+  },
+  render: {
+    label: "Render",
+    color: "#F472B6" // Pink
   }
 };
 
@@ -177,7 +181,8 @@ const SOURCE_BADGE_LABELS = {
   "react-query": "QUERY",
   "react-query-query": "QUERY",
   "react-query-mutation": "MUTATION",
-  route: "ROUTE"
+  route: "ROUTE",
+  render: "RENDER"
 };
 
 /**

package/lib/commonjs/hooks/useUnifiedEvents.js

@@ -22,7 +22,7 @@ const FREE_TIER_MAX_EVENTS = 25;
 /**
  * All possible sources for display
  */
-const ALL_DISPLAY_SOURCES = ["storage-async", "redux", "network", "react-query-query", "react-query-mutation", "route"];
+const ALL_DISPLAY_SOURCES = ["storage-async", "redux", "network", "react-query-query", "react-query-mutation", "route", "render"];
 
 /**
  * Map display sources to actual event sources they should match
@@ -35,7 +35,8 @@ const SOURCE_TO_EVENT_SOURCES = {
   "react-query": ["react-query", "react-query-query"],
   "react-query-query": ["react-query", "react-query-query"],
   "react-query-mutation": ["react-query-mutation"],
-  route: ["route"]
+  route: ["route"],
+  render: ["render"]
 };
 
 /**
@@ -49,7 +50,8 @@ const EVENT_SOURCE_TO_DISCOVERY_ID = {
   "react-query": "react-query",
   "react-query-query": "react-query",
   "react-query-mutation": "react-query",
-  route: "route-events"
+  route: "route-events",
+  render: "render"
 };
 function useUnifiedEvents() {
   const {
@@ -65,6 +67,14 @@ function useUnifiedEvents() {
     return (0, _unifiedEventStore.getAvailableEventSources)();
   }, []);
 
+  // Subscribe to subscriber count changes for instant UI updates (TanStack Query pattern)
+  const [subscriberCountVersion, setSubscriberCountVersion] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    return (0, _sharedUi.subscribeToSubscriberCountChanges)(() => {
+      setSubscriberCountVersion(v => v + 1);
+    });
+  }, []);
+
   // Get available display sources (only show sources for installed packages)
   const availableDisplaySources = (0, _react.useMemo)(() => {
     return ALL_DISPLAY_SOURCES.filter(displaySource => {
@@ -74,39 +84,50 @@ function useUnifiedEvents() {
     });
   }, [discoveredSources]);
 
-  // Subscribe to store changes and start capturing on mount
+  // Subscribe to store changes (always subscribe to get events when they come)
   (0, _react.useEffect)(() => {
-    // Subscribe to store updates
     const unsubscribe = (0, _unifiedEventStore.subscribe)(newEvents => {
       setEvents(newEvents);
     });
-
-    // Start capturing from all available sources
-    // These functions are now safe - they check if the source is available
-    (0, _unifiedEventStore.subscribeToStorage)();
-    (0, _unifiedEventStore.subscribeToRedux)();
-    (0, _unifiedEventStore.subscribeToNetwork)();
-    (0, _unifiedEventStore.subscribeToReactQuery)();
-    (0, _unifiedEventStore.subscribeToRoutes)();
     return unsubscribe;
   }, []);
 
-  // Restore saved badge selection state on mount
+  // Restore saved state on mount (badge selection + capturing state)
   (0, _react.useEffect)(() => {
     const restoreState = async () => {
+      // Load badge selection
       const savedSources = await (0, _badgeSelectionStorage.loadEnabledSources)();
+      let sourcesToEnable;
       if (savedSources && savedSources.length > 0) {
         // Filter to only include valid sources that still exist and are available
         const validSources = savedSources.filter(s => availableDisplaySources.includes(s));
         if (validSources.length > 0) {
-          setEnabledSources(new Set(validSources));
+          sourcesToEnable = new Set(validSources);
         } else {
           // If no saved sources are valid, enable all available sources
-          setEnabledSources(new Set(availableDisplaySources));
+          sourcesToEnable = new Set(availableDisplaySources);
         }
       } else {
         // No saved state - enable all available sources
-        setEnabledSources(new Set(availableDisplaySources));
+        sourcesToEnable = new Set(availableDisplaySources);
+      }
+      setEnabledSources(sourcesToEnable);
+
+      // Load capturing state (default to true if not saved)
+      const savedCapturing = await (0, _badgeSelectionStorage.loadCapturingState)();
+      const shouldCapture = savedCapturing !== null ? savedCapturing : true;
+      setIsCapturing(shouldCapture);
+
+      // Start capturing if enabled - only subscribe to enabled sources
+      if (shouldCapture) {
+        if (sourcesToEnable.has("storage-async")) (0, _unifiedEventStore.subscribeToStorage)();
+        if (sourcesToEnable.has("redux")) (0, _unifiedEventStore.subscribeToRedux)();
+        if (sourcesToEnable.has("network")) (0, _unifiedEventStore.subscribeToNetwork)();
+        if (sourcesToEnable.has("react-query-query") || sourcesToEnable.has("react-query-mutation")) {
+          (0, _unifiedEventStore.subscribeToReactQuery)();
+        }
+        if (sourcesToEnable.has("route")) (0, _unifiedEventStore.subscribeToRoutes)();
+        if (sourcesToEnable.has("render")) (0, _unifiedEventStore.subscribeToRender)();
       }
       isStateRestoredRef.current = true;
     };
@@ -121,6 +142,14 @@ function useUnifiedEvents() {
     (0, _badgeSelectionStorage.saveEnabledSources)(Array.from(enabledSources));
   }, [enabledSources]);
 
+  // Persist capturing state whenever it changes (after initial restoration)
+  (0, _react.useEffect)(() => {
+    if (!isStateRestoredRef.current) {
+      return;
+    }
+    (0, _badgeSelectionStorage.saveCapturingState)(isCapturing);
+  }, [isCapturing]);
+
   // Build set of all event sources that should be shown
   const allowedEventSources = (0, _react.useMemo)(() => {
     const allowed = new Set();
@@ -160,15 +189,40 @@ function useUnifiedEvents() {
   // Get all available sources with counts, sorted: enabled first, disabled last
   const availableSources = (0, _react.useMemo)(() => {
     const counts = (0, _unifiedEventStore.getSourceCounts)();
+    const subscriberCounts = (0, _unifiedEventStore.getSubscriberCounts)();
+
+    // Build a map from source ID to subscriber count
+    const subscriberCountBySourceId = {};
+    for (const source of subscriberCounts.sources) {
+      subscriberCountBySourceId[source.sourceId] = source.counts.total;
+    }
+
+    // Map display source to store source ID
+    const displaySourceToStoreId = {
+      "storage-async": "storage",
+      "storage-mmkv": "storage",
+      redux: "redux",
+      network: "network",
+      "react-query": "react-query",
+      "react-query-query": "react-query",
+      "react-query-mutation": "react-query",
+      route: "route-events",
+      render: "render"
+    };
     const sources = availableDisplaySources.map(source => {
       const eventSources = SOURCE_TO_EVENT_SOURCES[source] || [source];
       const totalCount = eventSources.reduce((sum, s) => sum + (counts[s] || 0), 0);
       const displayConfig = (0, _autoDiscoverEventSources.getSourceDisplayConfig)(source);
+      const storeId = displaySourceToStoreId[source];
+      // Only set subscriberCount if the source has subscriber tracking
+      // (undefined means no tracking, vs 0 which means tracked but no subscribers)
+      const subscriberCount = storeId && storeId in subscriberCountBySourceId ? subscriberCountBySourceId[storeId] : undefined;
       return {
         source,
         ...displayConfig,
         count: totalCount,
-        enabled: enabledSources.has(source)
+        enabled: enabledSources.has(source),
+        subscriberCount
       };
     });
 
@@ -178,18 +232,65 @@ function useUnifiedEvents() {
       if (!a.enabled && b.enabled) return 1;
       return 0;
     });
-  }, [events, enabledSources, availableDisplaySources]);
+  }, [events, enabledSources, availableDisplaySources, subscriberCountVersion]);
   const toggleSource = (0, _react.useCallback)(source => {
     setEnabledSources(prev => {
       const next = new Set(prev);
-      if (next.has(source)) {
+      const wasEnabled = next.has(source);
+      if (wasEnabled) {
         next.delete(source);
+        // Unsubscribe from the source
+        switch (source) {
+          case "storage-async":
+            (0, _unifiedEventStore.unsubscribeFromStorage)();
+            break;
+          case "redux":
+            (0, _unifiedEventStore.unsubscribeFromRedux)();
+            break;
+          case "network":
+            (0, _unifiedEventStore.unsubscribeFromNetwork)();
+            break;
+          case "react-query-query":
+          case "react-query-mutation":
+            (0, _unifiedEventStore.unsubscribeFromReactQuery)();
+            break;
+          case "route":
+            (0, _unifiedEventStore.unsubscribeFromRoutes)();
+            break;
+          case "render":
+            (0, _unifiedEventStore.unsubscribeFromRender)();
+            break;
+        }
       } else {
         next.add(source);
+        // Subscribe to the source (only if capturing is active)
+        if (isCapturing) {
+          switch (source) {
+            case "storage-async":
+              (0, _unifiedEventStore.subscribeToStorage)();
+              break;
+            case "redux":
+              (0, _unifiedEventStore.subscribeToRedux)();
+              break;
+            case "network":
+              (0, _unifiedEventStore.subscribeToNetwork)();
+              break;
+            case "react-query-query":
+            case "react-query-mutation":
+              (0, _unifiedEventStore.subscribeToReactQuery)();
+              break;
+            case "route":
+              (0, _unifiedEventStore.subscribeToRoutes)();
+              break;
+            case "render":
+              (0, _unifiedEventStore.subscribeToRender)();
+              break;
+          }
+        }
       }
       return next;
     });
-  }, []);
+  }, [isCapturing]);
   const enableAllSources = (0, _react.useCallback)(() => {
     setEnabledSources(new Set(availableDisplaySources));
   }, [availableDisplaySources]);
@@ -197,13 +298,17 @@ function useUnifiedEvents() {
     (0, _unifiedEventStore.clearEvents)();
   }, []);
   const startCapturing = (0, _react.useCallback)(() => {
-    (0, _unifiedEventStore.subscribeToStorage)();
-    (0, _unifiedEventStore.subscribeToRedux)();
-    (0, _unifiedEventStore.subscribeToNetwork)();
-    (0, _unifiedEventStore.subscribeToReactQuery)();
-    (0, _unifiedEventStore.subscribeToRoutes)();
+    // Only subscribe to sources that are enabled
+    if (enabledSources.has("storage-async")) (0, _unifiedEventStore.subscribeToStorage)();
+    if (enabledSources.has("redux")) (0, _unifiedEventStore.subscribeToRedux)();
+    if (enabledSources.has("network")) (0, _unifiedEventStore.subscribeToNetwork)();
+    if (enabledSources.has("react-query-query") || enabledSources.has("react-query-mutation")) {
+      (0, _unifiedEventStore.subscribeToReactQuery)();
+    }
+    if (enabledSources.has("route")) (0, _unifiedEventStore.subscribeToRoutes)();
+    if (enabledSources.has("render")) (0, _unifiedEventStore.subscribeToRender)();
     setIsCapturing(true);
-  }, []);
+  }, [enabledSources]);
   const stopCapturing = (0, _react.useCallback)(() => {
     (0, _unifiedEventStore.unsubscribeAll)();
     setIsCapturing(false);
@@ -215,6 +320,9 @@ function useUnifiedEvents() {
       startCapturing();
     }
   }, [isCapturing, startCapturing, stopCapturing]);
+
+  // Get subscriber counts (recalculates on every render, but it's a cheap operation)
+  const totalSubscriberCount = (0, _unifiedEventStore.getSubscriberCounts)().totalSubscribers;
   return {
     events,
     filteredEvents,
@@ -231,7 +339,8 @@ function useUnifiedEvents() {
     toggleCapturing,
     discoveredSources,
     hiddenEventsCount,
-    isPro
+    isPro,
+    totalSubscriberCount
   };
 }
 //# sourceMappingURL=useUnifiedEvents.js.map

package/lib/commonjs/index.js

@@ -129,6 +129,12 @@ Object.defineProperty(exports, "generateMarkdownExport", {
     return _eventExportFormatter.generateMarkdownExport;
   }
 });
+Object.defineProperty(exports, "generateMermaidExport", {
+  enumerable: true,
+  get: function () {
+    return _eventExportFormatter.generateMermaidExport;
+  }
+});
 Object.defineProperty(exports, "generatePlaintextExport", {
   enumerable: true,
   get: function () {