@buoy-gg/events 2.1.2 → 2.1.3

package/src/hooks/useUnifiedEvents.ts

@@ -6,7 +6,7 @@
  */
 
 import { useState, useEffect, useCallback, useMemo, useRef } from "react";
-import { useFeatureGate } from "@buoy-gg/shared-ui";
+import { useFeatureGate, subscribeToSubscriberCountChanges } from "@buoy-gg/shared-ui";
 import type { UnifiedEvent, EventSource, SourceInfo } from "../types";
 import {
   subscribe,
@@ -15,14 +15,24 @@ import {
   subscribeToNetwork,
   subscribeToReactQuery,
   subscribeToRoutes,
+  subscribeToRender,
+  unsubscribeFromStorage,
+  unsubscribeFromRedux,
+  unsubscribeFromNetwork,
+  unsubscribeFromReactQuery,
+  unsubscribeFromRoutes,
+  unsubscribeFromRender,
   unsubscribeAll,
   getSourceCounts,
   clearEvents as clearStoreEvents,
   getAvailableEventSources,
+  getSubscriberCounts,
 } from "../stores/unifiedEventStore";
 import {
   saveEnabledSources,
   loadEnabledSources,
+  saveCapturingState,
+  loadCapturingState,
 } from "../utils/badgeSelectionStorage";
 import { getSourceDisplayConfig } from "../utils/autoDiscoverEventSources";
 
@@ -39,6 +49,7 @@ const ALL_DISPLAY_SOURCES: EventSource[] = [
   "react-query-query",
   "react-query-mutation",
   "route",
+  "render",
 ];
 
 /**
@@ -53,6 +64,7 @@ const SOURCE_TO_EVENT_SOURCES: Record<EventSource, EventSource[]> = {
   "react-query-query": ["react-query", "react-query-query"],
   "react-query-mutation": ["react-query-mutation"],
   route: ["route"],
+  render: ["render"],
 };
 
 /**
@@ -67,6 +79,7 @@ const EVENT_SOURCE_TO_DISCOVERY_ID: Record<EventSource, string> = {
   "react-query-query": "react-query",
   "react-query-mutation": "react-query",
   route: "route-events",
+  render: "render",
 };
 
 export interface UseUnifiedEventsResult {
@@ -89,6 +102,8 @@ export interface UseUnifiedEventsResult {
   hiddenEventsCount: number;
   /** Whether user is on Pro plan */
   isPro: boolean;
+  /** Total number of subscribers across all event stores (for debugging) */
+  totalSubscriberCount: number;
 }
 
 export function useUnifiedEvents(): UseUnifiedEventsResult {
@@ -105,6 +120,14 @@ export function useUnifiedEvents(): UseUnifiedEventsResult {
     return getAvailableEventSources();
   }, []);
 
+  // Subscribe to subscriber count changes for instant UI updates (TanStack Query pattern)
+  const [subscriberCountVersion, setSubscriberCountVersion] = useState(0);
+  useEffect(() => {
+    return subscribeToSubscriberCountChanges(() => {
+      setSubscriberCountVersion((v) => v + 1);
+    });
+  }, []);
+
   // Get available display sources (only show sources for installed packages)
   const availableDisplaySources = useMemo(() => {
     return ALL_DISPLAY_SOURCES.filter((displaySource) => {
@@ -114,43 +137,56 @@ export function useUnifiedEvents(): UseUnifiedEventsResult {
     });
   }, [discoveredSources]);
 
-  // Subscribe to store changes and start capturing on mount
+  // Subscribe to store changes (always subscribe to get events when they come)
   useEffect(() => {
-    // Subscribe to store updates
     const unsubscribe = subscribe((newEvents) => {
       setEvents(newEvents);
     });
-
-    // Start capturing from all available sources
-    // These functions are now safe - they check if the source is available
-    subscribeToStorage();
-    subscribeToRedux();
-    subscribeToNetwork();
-    subscribeToReactQuery();
-    subscribeToRoutes();
-
     return unsubscribe;
   }, []);
 
-  // Restore saved badge selection state on mount
+  // Restore saved state on mount (badge selection + capturing state)
   useEffect(() => {
     const restoreState = async () => {
+      // Load badge selection
       const savedSources = await loadEnabledSources();
+      let sourcesToEnable: Set<EventSource>;
+
       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 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")) subscribeToStorage();
+        if (sourcesToEnable.has("redux")) subscribeToRedux();
+        if (sourcesToEnable.has("network")) subscribeToNetwork();
+        if (sourcesToEnable.has("react-query-query") || sourcesToEnable.has("react-query-mutation")) {
+          subscribeToReactQuery();
+        }
+        if (sourcesToEnable.has("route")) subscribeToRoutes();
+        if (sourcesToEnable.has("render")) subscribeToRender();
       }
+
       isStateRestoredRef.current = true;
     };
     restoreState();
@@ -164,6 +200,14 @@ export function useUnifiedEvents(): UseUnifiedEventsResult {
     saveEnabledSources(Array.from(enabledSources));
   }, [enabledSources]);
 
+  // Persist capturing state whenever it changes (after initial restoration)
+  useEffect(() => {
+    if (!isStateRestoredRef.current) {
+      return;
+    }
+    saveCapturingState(isCapturing);
+  }, [isCapturing]);
+
   // Build set of all event sources that should be shown
   const allowedEventSources = useMemo(() => {
     const allowed = new Set<EventSource>();
@@ -203,17 +247,44 @@ export function useUnifiedEvents(): UseUnifiedEventsResult {
   // Get all available sources with counts, sorted: enabled first, disabled last
   const availableSources = useMemo((): SourceInfo[] => {
     const counts = getSourceCounts();
+    const subscriberCounts = getSubscriberCounts();
+
+    // Build a map from source ID to subscriber count
+    const subscriberCountBySourceId: Record<string, number> = {};
+    for (const source of subscriberCounts.sources) {
+      subscriberCountBySourceId[source.sourceId] = source.counts.total;
+    }
+
+    // Map display source to store source ID
+    const displaySourceToStoreId: Record<EventSource, string> = {
+      "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 = 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),
+        subscriberCount,
       };
     });
 
@@ -223,19 +294,68 @@ export function useUnifiedEvents(): UseUnifiedEventsResult {
       if (!a.enabled && b.enabled) return 1;
       return 0;
     });
-  }, [events, enabledSources, availableDisplaySources]);
+  }, [events, enabledSources, availableDisplaySources, subscriberCountVersion]);
 
   const toggleSource = useCallback((source: EventSource) => {
     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":
+            unsubscribeFromStorage();
+            break;
+          case "redux":
+            unsubscribeFromRedux();
+            break;
+          case "network":
+            unsubscribeFromNetwork();
+            break;
+          case "react-query-query":
+          case "react-query-mutation":
+            unsubscribeFromReactQuery();
+            break;
+          case "route":
+            unsubscribeFromRoutes();
+            break;
+          case "render":
+            unsubscribeFromRender();
+            break;
+        }
       } else {
         next.add(source);
+        // Subscribe to the source (only if capturing is active)
+        if (isCapturing) {
+          switch (source) {
+            case "storage-async":
+              subscribeToStorage();
+              break;
+            case "redux":
+              subscribeToRedux();
+              break;
+            case "network":
+              subscribeToNetwork();
+              break;
+            case "react-query-query":
+            case "react-query-mutation":
+              subscribeToReactQuery();
+              break;
+            case "route":
+              subscribeToRoutes();
+              break;
+            case "render":
+              subscribeToRender();
+              break;
+          }
+        }
       }
+
       return next;
     });
-  }, []);
+  }, [isCapturing]);
 
   const enableAllSources = useCallback(() => {
     setEnabledSources(new Set(availableDisplaySources));
@@ -246,13 +366,17 @@ export function useUnifiedEvents(): UseUnifiedEventsResult {
   }, []);
 
   const startCapturing = useCallback(() => {
-    subscribeToStorage();
-    subscribeToRedux();
-    subscribeToNetwork();
-    subscribeToReactQuery();
-    subscribeToRoutes();
+    // Only subscribe to sources that are enabled
+    if (enabledSources.has("storage-async")) subscribeToStorage();
+    if (enabledSources.has("redux")) subscribeToRedux();
+    if (enabledSources.has("network")) subscribeToNetwork();
+    if (enabledSources.has("react-query-query") || enabledSources.has("react-query-mutation")) {
+      subscribeToReactQuery();
+    }
+    if (enabledSources.has("route")) subscribeToRoutes();
+    if (enabledSources.has("render")) subscribeToRender();
     setIsCapturing(true);
-  }, []);
+  }, [enabledSources]);
 
   const stopCapturing = useCallback(() => {
     unsubscribeAll();
@@ -267,6 +391,9 @@ export function useUnifiedEvents(): UseUnifiedEventsResult {
     }
   }, [isCapturing, startCapturing, stopCapturing]);
 
+  // Get subscriber counts (recalculates on every render, but it's a cheap operation)
+  const totalSubscriberCount = getSubscriberCounts().totalSubscribers;
+
   return {
     events,
     filteredEvents,
@@ -284,5 +411,6 @@ export function useUnifiedEvents(): UseUnifiedEventsResult {
     discoveredSources,
     hiddenEventsCount,
     isPro,
+    totalSubscriberCount,
   };
 }

package/src/index.tsx

@@ -81,6 +81,7 @@ export {
   generateMarkdownExport,
   generateJsonExport,
   generatePlaintextExport,
+  generateMermaidExport,
   estimateExportSize,
   getExportSummary,
   filterEvents,
@@ -110,3 +111,6 @@ export {
 // - subscribeToRoutes, unsubscribeFromRoutes (internal subscription)
 // - getEvents, getActiveSources, getSourceCounts (internal store operations)
 // - clearEvents, subscribe, getEventCount (internal store operations)
+
+// Note: For subscriber count notifications, use @buoy-gg/shared-ui:
+// import { notifySubscriberCountChange, subscribeToSubscriberCountChanges } from "@buoy-gg/shared-ui";

package/src/stores/unifiedEventStore.ts

@@ -14,7 +14,9 @@ import type {
 } from "../types";
 import {
   getCachedDiscovery,
+  getAggregatedSubscriberCounts,
   type DiscoveredEventSource,
+  type AggregatedSubscriberCounts,
 } from "../utils/autoDiscoverEventSources";
 
 const MAX_EVENTS = 200;
@@ -63,18 +65,22 @@ class UnifiedEventStore {
       return; // Already subscribed
     }
 
-    // Run setup if needed
-    if (source.setup) {
-      await source.setup();
-    }
+    try {
+      // Run setup if needed
+      if (source.setup) {
+        await source.setup();
+      }
 
-    // Subscribe and track the unsubscriber
-    const unsubscribe = await source.subscribe((event) => {
-      this.addEvent(event);
-    });
+      // Subscribe and track the unsubscriber
+      const unsubscribe = await source.subscribe((event) => {
+        this.addEvent(event);
+      });
 
-    if (unsubscribe) {
-      this.sourceUnsubscribers.set(source.id, unsubscribe);
+      if (unsubscribe) {
+        this.sourceUnsubscribers.set(source.id, unsubscribe);
+      }
+    } catch {
+      // Silently fail - source may not be available
     }
   }
 
@@ -145,7 +151,8 @@ class UnifiedEventStore {
   unsubscribeFromNetwork(): void {
     this.unsubscribeFromSource("network");
     this.activeSources.delete("network");
-    this.networkEventIdMap.clear();
+    // Don't clear networkEventIdMap - it's needed to deduplicate events
+    // when resubscribing while requests are still in flight
   }
 
   /**
@@ -188,6 +195,25 @@ class UnifiedEventStore {
     this.activeSources.delete("route");
   }
 
+  /**
+   * Subscribe to render events (if @buoy-gg/highlight-updates is installed)
+   */
+  subscribeToRender(): void {
+    const { sources } = getCachedDiscovery();
+    const renderSource = sources.find((s) => s.id === "render");
+    if (renderSource) {
+      this.subscribeToSource(renderSource);
+    }
+  }
+
+  /**
+   * Unsubscribe from render events
+   */
+  unsubscribeFromRender(): void {
+    this.unsubscribeFromSource("render");
+    this.activeSources.delete("render");
+  }
+
   /**
    * Add an event to the store
    */
@@ -257,6 +283,7 @@ class UnifiedEventStore {
       "react-query-query": 0,
       "react-query-mutation": 0,
       route: 0,
+      render: 0,
     };
 
     for (const event of this.events) {
@@ -311,7 +338,7 @@ class UnifiedEventStore {
    */
   unsubscribeAll(): void {
     // Unsubscribe from all tracked sources
-    for (const [sourceId, unsubscribe] of this.sourceUnsubscribers) {
+    for (const [, unsubscribe] of this.sourceUnsubscribers) {
       unsubscribe();
     }
     this.sourceUnsubscribers.clear();
@@ -339,6 +366,8 @@ class UnifiedEventStore {
         return this.sourceUnsubscribers.has("react-query");
       case "route":
         return this.sourceUnsubscribers.has("route-events");
+      case "render":
+        return this.sourceUnsubscribers.has("render");
       default:
         return false;
     }
@@ -357,8 +386,17 @@ class UnifiedEventStore {
       "react-query-query": this.sourceUnsubscribers.has("react-query"),
       "react-query-mutation": this.sourceUnsubscribers.has("react-query"),
       route: this.sourceUnsubscribers.has("route-events"),
+      render: this.sourceUnsubscribers.has("render"),
     };
   }
+
+  /**
+   * Get subscriber counts from all underlying event stores.
+   * Useful for debugging the event system.
+   */
+  getSubscriberCounts(): AggregatedSubscriberCounts {
+    return getAggregatedSubscriberCounts();
+  }
 }
 
 // Singleton instance
@@ -385,6 +423,10 @@ export const subscribeToRoutes = () =>
   unifiedEventStore.subscribeToRoutes();
 export const unsubscribeFromRoutes = () =>
   unifiedEventStore.unsubscribeFromRoutes();
+export const subscribeToRender = () =>
+  unifiedEventStore.subscribeToRender();
+export const unsubscribeFromRender = () =>
+  unifiedEventStore.unsubscribeFromRender();
 export const getEvents = (enabledSources?: Set<EventSource>) =>
   unifiedEventStore.getEvents(enabledSources);
 export const getActiveSources = () => unifiedEventStore.getActiveSources();
@@ -403,3 +445,7 @@ export const unsubscribeAll = () => unifiedEventStore.unsubscribeAll();
 export const getDiscoveredSources = () => unifiedEventStore.getDiscoveredSources();
 export const getAvailableEventSources = () => unifiedEventStore.getAvailableEventSources();
 export const subscribeToAll = () => unifiedEventStore.subscribeToAll();
+export const getSubscriberCounts = () => unifiedEventStore.getSubscriberCounts();
+
+// Re-export type for convenience
+export type { AggregatedSubscriberCounts } from "../utils/autoDiscoverEventSources";

package/src/types/copySettings.ts

@@ -30,7 +30,7 @@ export interface EventsCopySettings {
   dataSizeThreshold: 1 | 5 | 10 | 50 | -1; // KB, -1 = unlimited
 
   // Format
-  format: "markdown" | "json" | "plaintext";
+  format: "markdown" | "json" | "plaintext" | "mermaid";
 
   // Filters
   filterMode: "all" | "errors" | "success" | "pending";
@@ -204,6 +204,31 @@ export const COPY_PRESETS = {
     showStorageDiff: false,
     stripVerboseFields: true,
   },
+
+  /**
+   * Mermaid Diagram - Visual sequence diagram for flow visualization
+   */
+  mermaid: {
+    timestampFormat: "relative" as const,
+    includeSource: true,
+    includeStatus: true,
+    includeTitle: true,
+    includeSubtitle: false,
+    includeCorrelation: true,
+    includeDuration: true,
+    includeSummaryHeader: false,
+    includeTotalDuration: false,
+    includeEventData: false,
+    dataSizeThreshold: 1 as const,
+    format: "mermaid" as const,
+    filterMode: "all" as const,
+    filterSources: [],
+    compactMode: false,
+    smartJsonParsing: true,
+    reduxChangedOnly: true,
+    showStorageDiff: true,
+    stripVerboseFields: true,
+  },
 } as const;
 
 export type CopyPresetName = keyof typeof COPY_PRESETS;
@@ -266,4 +291,9 @@ export const PRESET_METADATA: Record<
     description: "Quick reference",
     color: "#6B7280", // Gray
   },
+  mermaid: {
+    label: "Diagram",
+    description: "Visual flow",
+    color: "#A855F7", // Purple
+  },
 };

package/src/types/index.ts

@@ -15,7 +15,8 @@ export type EventSource =
   | "react-query"
   | "react-query-query"
   | "react-query-mutation"
-  | "route";
+  | "route"
+  | "render";
 
 /**
  * Event status for visual indicators
@@ -83,6 +84,8 @@ export interface SourceInfo {
   count: number;
   /** Whether this source is currently enabled (listening and showing events) */
   enabled?: boolean;
+  /** Number of subscribers to this source's event store (for debugging) */
+  subscriberCount?: number;
 }
 
 /**