@buoy-gg/storage 2.1.6 → 2.1.9

package/lib/commonjs/storage/components/StorageModalWithTabs.js

@@ -13,7 +13,6 @@ var _StorageBrowserMode = require("./StorageBrowserMode");
 var _clearAllStorage = require("../utils/clearAllStorage");
 var _useStorageEvents = require("../hooks/useStorageEvents");
 var _StorageEventDetailContent = require("./StorageEventDetailContent");
-var _StorageFilterViewV = require("./StorageFilterViewV2");
 var _StorageEventFilterView = require("./StorageEventFilterView");
 var _StorageEventCard = require("./StorageEventCard");
 var _license = require("@buoy-gg/license");
@@ -36,12 +35,8 @@ function StorageModalWithTabs({
   const [activeTab, setActiveTab] = (0, _react.useState)("browser");
 
   // Storage Browser state
-  const [showStorageFilters, setShowStorageFilters] = (0, _react.useState)(false);
-  const [storageIgnoredPatterns, setStorageIgnoredPatterns] = (0, _react.useState)(new Set(["@react_buoy"]) // Auto-hide dev tool keys by default
-  );
   const [searchQuery, setSearchQuery] = (0, _react.useState)("");
   const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
-  const hasLoadedStorageFilters = (0, _react.useRef)(false);
 
   // Local state to control subscription (true = subscribed, false = unsubscribed)
   const [isListeningEnabled, setIsListeningEnabled] = (0, _react.useState)(true);
@@ -57,6 +52,8 @@ function StorageModalWithTabs({
     enabled: isListeningEnabled
   });
   const [selectedConversationKey, setSelectedConversationKey] = (0, _react.useState)(null);
+  const [selectedHistoryKey, setSelectedHistoryKey] = (0, _react.useState)(null);
+  const [selectedHistoryEventIndex, setSelectedHistoryEventIndex] = (0, _react.useState)(null);
   const [selectedEventIndex, setSelectedEventIndex] = (0, _react.useState)(0);
   const [showFilters, setShowFilters] = (0, _react.useState)(false);
   const [ignoredPatterns, setIgnoredPatterns] = (0, _react.useState)(new Set(["@react_buoy", "@RNAsyncStorage", "redux-persist", "persist:"]) // Auto-hide dev tool keys by default
@@ -189,10 +186,15 @@ function StorageModalWithTabs({
   const handleClearEvents = (0, _react.useCallback)(() => {
     clearStorageEvents();
     setSelectedConversationKey(null);
-  }, [clearStorageEvents]);
-  const handleConversationPress = (0, _react.useCallback)(conversation => {
-    setSelectedConversationKey(conversation.key);
     setSelectedEventIndex(0);
+  }, [clearStorageEvents]);
+  const handleViewHistoryFromBrowser = (0, _react.useCallback)(key => {
+    setSelectedHistoryKey(key);
+    setSelectedHistoryEventIndex(null);
+  }, []);
+  const handleBackFromHistory = (0, _react.useCallback)(() => {
+    setSelectedHistoryKey(null);
+    setSelectedHistoryEventIndex(null);
   }, []);
   const handleTogglePattern = (0, _react.useCallback)(pattern => {
     setIgnoredPatterns(prev => {
@@ -225,22 +227,26 @@ function StorageModalWithTabs({
 
   // Storage Browser handlers
   const storageDataRef = (0, _react.useRef)([]);
-  const handleToggleStorageFilters = (0, _react.useCallback)(() => {
-    setShowStorageFilters(!showStorageFilters);
-  }, [showStorageFilters]);
-  const handleToggleStoragePattern = (0, _react.useCallback)(pattern => {
-    setStorageIgnoredPatterns(prev => {
-      const next = new Set(prev);
-      if (next.has(pattern)) {
-        next.delete(pattern);
-      } else {
-        next.add(pattern);
-      }
-      return next;
-    });
-  }, []);
-  const handleAddStoragePattern = (0, _react.useCallback)(pattern => {
-    setStorageIgnoredPatterns(prev => new Set([...prev, pattern]));
+  const getStorageSnapshot = (0, _react.useCallback)(() => {
+    const keys = storageDataRef.current;
+    return {
+      timestamp: new Date().toISOString(),
+      totalKeys: keys.length,
+      asyncStorage: keys.filter(k => k.storageType === 'async').reduce((acc, k) => {
+        acc[k.key] = (0, _sharedUi.truncatePayload)(k.value);
+        return acc;
+      }, {}),
+      mmkv: keys.filter(k => k.storageType === 'mmkv').reduce((acc, k) => {
+        const id = k.instanceId || 'default';
+        if (!acc[id]) acc[id] = {};
+        acc[id][k.key] = (0, _sharedUi.truncatePayload)(k.value);
+        return acc;
+      }, {}),
+      secure: keys.filter(k => k.storageType === 'secure').reduce((acc, k) => {
+        acc[k.key] = (0, _sharedUi.truncatePayload)(k.value);
+        return acc;
+      }, {})
+    };
   }, []);
   const handlePurgeStorage = (0, _react.useCallback)(async () => {
     _reactNative.Alert.alert("Clear Storage", "Choose what to clear:", [{
@@ -357,67 +363,154 @@ function StorageModalWithTabs({
     return conversations.find(c => c.key === selectedConversationKey) || null;
   }, [selectedConversationKey, conversations]);
 
-  // For free users, limit visible conversations
-  const visibleConversations = (0, _react.useMemo)(() => {
-    if (isPro) return conversations;
-    return conversations.slice(0, FREE_TIER_EVENT_LIMIT);
-  }, [conversations, isPro]);
-  const lockedConversationCount = (0, _react.useMemo)(() => {
+  // Event count per key for storage browser badges
+  const eventCountByKey = (0, _react.useMemo)(() => {
+    const counts = {};
+    conversations.forEach(conv => {
+      counts[conv.key] = conv.totalOperations;
+    });
+    return counts;
+  }, [conversations]);
+
+  // Selected history conversation (from browser tab "view history")
+  const selectedHistoryConversation = (0, _react.useMemo)(() => {
+    if (!selectedHistoryKey) return null;
+    return conversations.find(c => c.key === selectedHistoryKey) || null;
+  }, [selectedHistoryKey, conversations]);
+
+  // Filtered raw events for the events tab (chronological stream, newest-first)
+  const filteredEvents = (0, _react.useMemo)(() => {
+    return events.filter(event => {
+      if (!event.data?.key) return false;
+      if (!enabledStorageTypes.has(event.storageType)) return false;
+      const key = event.data.key;
+      return !Array.from(ignoredPatterns).some(p => key.includes(p));
+    });
+  }, [events, ignoredPatterns, enabledStorageTypes]);
+  const getEventsSnapshot = (0, _react.useCallback)(() => {
+    return filteredEvents.map(event => ({
+      key: event.data?.key,
+      action: event.action,
+      value: (0, _sharedUi.truncatePayload)(event.data?.value),
+      storageType: event.storageType,
+      timestamp: event.timestamp.toISOString()
+    }));
+  }, [filteredEvents]);
+  const visibleEvents = (0, _react.useMemo)(() => {
+    if (isPro) return filteredEvents;
+    return filteredEvents.slice(0, FREE_TIER_EVENT_LIMIT);
+  }, [filteredEvents, isPro]);
+  const lockedEventCount = (0, _react.useMemo)(() => {
     if (isPro) return 0;
-    return Math.max(0, conversations.length - FREE_TIER_EVENT_LIMIT);
-  }, [conversations.length, isPro]);
+    return Math.max(0, filteredEvents.length - FREE_TIER_EVENT_LIMIT);
+  }, [filteredEvents.length, isPro]);
 
   // FlatList optimization constants
   const END_REACHED_THRESHOLD = 0.8;
 
-  // Stable keyExtractor for FlatList
-  const keyExtractor = (0, _react.useCallback)(item => {
-    return item.key;
+  // keyExtractor for raw event FlatList
+  const eventKeyExtractor = (0, _react.useCallback)((item, index) => {
+    return `${item.timestamp.getTime()}-${item.data?.key || index}`;
   }, []);
 
-  // Removed getItemType as it's FlatList-specific
-
-  // Create stable ref for event handler
-  const selectConversationRef = (0, _react.useRef)(undefined);
-  selectConversationRef.current = handleConversationPress;
-
-  // Stable renderItem with ref pattern
-  const renderConversationItem = (0, _react.useCallback)(({
+  // When a raw event card is pressed, open that key's conversation detail at the matching event
+  const handleRawEventPress = (0, _react.useCallback)(item => {
+    const conv = conversations.find(c => c.key === item.data?.key);
+    if (!conv) return;
+    const sortedEvents = [...conv.events].sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
+    const eventIndex = sortedEvents.findIndex(e => e.timestamp.getTime() === item.timestamp.getTime());
+    setSelectedConversationKey(conv.key);
+    setSelectedEventIndex(eventIndex >= 0 ? eventIndex : 0);
+  }, [conversations]);
+
+  // Render a single raw event card
+  const renderEventItem = (0, _react.useCallback)(({
     item
   }) => {
     const cardData = {
-      key: item.key,
-      lastAction: item.lastEvent.action,
-      totalOperations: item.totalOperations,
-      lastEventTimestamp: item.lastEvent.timestamp,
-      storageTypes: item.storageTypes,
-      valueType: item.valueType
+      key: item.data?.key || "",
+      lastAction: item.action,
+      totalOperations: 1,
+      lastEventTimestamp: item.timestamp,
+      storageTypes: new Set([item.storageType]),
+      valueType: getValueType(item.data?.value)
     };
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageEventCard.StorageEventCard, {
       data: cardData,
-      onPress: () => selectConversationRef.current?.(item)
+      onPress: () => handleRawEventPress(item)
     });
-  }, []);
+  }, [handleRawEventPress]);
   if (!visible) return null;
   const persistenceKey = enableSharedModalDimensions ? _sharedUi.devToolsStorageKeys.modal.root() : _sharedUi.devToolsStorageKeys.storage.modal();
   const renderContent = () => {
+    // Filters overlay — applies to both tabs
+    if (showFilters) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageEventFilterView.StorageEventFilterView, {
+        ignoredPatterns: ignoredPatterns,
+        onTogglePattern: handleTogglePattern,
+        onAddPattern: handleAddPattern,
+        availableKeys: allEventKeys,
+        enabledStorageTypes: enabledStorageTypes,
+        onToggleStorageType: handleToggleStorageType
+      });
+    }
     if (activeTab === "browser") {
-      if (showStorageFilters) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageFilterViewV.StorageFilterViewV2, {
-          ignoredPatterns: storageIgnoredPatterns,
-          onTogglePattern: handleToggleStoragePattern,
-          onAddPattern: handleAddStoragePattern,
-          availableKeys: allStorageKeys
+      // History flow for a specific key (from "view history" in browser tab)
+      if (selectedHistoryKey && selectedHistoryConversation) {
+        // Level 2: detail view for a specific event
+        if (selectedHistoryEventIndex !== null) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.contentWrapper,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageEventDetailContent.StorageEventDetailContent, {
+              conversation: selectedHistoryConversation,
+              selectedEventIndex: selectedHistoryEventIndex,
+              onEventIndexChange: setSelectedHistoryEventIndex,
+              disableInternalFooter: true
+            })
+          });
+        }
+
+        // Level 1: event list for this key (newest-first)
+        const ascSortedEvents = [...selectedHistoryConversation.events].sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
+        const newestFirstEvents = [...ascSortedEvents].reverse();
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+          data: newestFirstEvents,
+          keyExtractor: (item, index) => `${item.timestamp.getTime()}-${index}`,
+          renderItem: ({
+            item
+          }) => {
+            const ascIdx = ascSortedEvents.findIndex(e => e.timestamp.getTime() === item.timestamp.getTime());
+            const cardData = {
+              key: item.data?.key || "",
+              lastAction: item.action,
+              totalOperations: 1,
+              lastEventTimestamp: item.timestamp,
+              storageTypes: new Set([item.storageType]),
+              valueType: getValueType(item.data?.value)
+            };
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageEventCard.StorageEventCard, {
+              data: cardData,
+              onPress: () => setSelectedHistoryEventIndex(ascIdx >= 0 ? ascIdx : 0)
+            });
+          },
+          contentContainerStyle: styles.listContent,
+          ItemSeparatorComponent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.separator
+          }),
+          initialNumToRender: 20,
+          scrollEnabled: false
         });
       }
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageBrowserMode.StorageBrowserMode, {
         requiredStorageKeys: requiredStorageKeys,
-        showFilters: showStorageFilters,
-        ignoredPatterns: storageIgnoredPatterns,
-        onTogglePattern: handleToggleStoragePattern,
-        onAddPattern: handleAddStoragePattern,
+        ignoredPatterns: ignoredPatterns,
+        onTogglePattern: handleTogglePattern,
+        onAddPattern: handleAddPattern,
         searchQuery: searchQuery,
-        storageDataRef: storageDataRef
+        storageDataRef: storageDataRef,
+        eventCountByKey: eventCountByKey,
+        onViewHistory: handleViewHistoryFromBrowser,
+        enabledStorageTypes: enabledStorageTypes
       });
     }
 
@@ -433,17 +526,7 @@ function StorageModalWithTabs({
         })
       });
     }
-    if (showFilters) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageEventFilterView.StorageEventFilterView, {
-        ignoredPatterns: ignoredPatterns,
-        onTogglePattern: handleTogglePattern,
-        onAddPattern: handleAddPattern,
-        availableKeys: allEventKeys,
-        enabledStorageTypes: enabledStorageTypes,
-        onToggleStorageType: handleToggleStorageType
-      });
-    }
-    if (conversations.length === 0) {
+    if (filteredEvents.length === 0) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.emptyState,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Database, {
@@ -459,18 +542,15 @@ function StorageModalWithTabs({
       });
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
-      data: visibleConversations,
-      renderItem: renderConversationItem,
-      keyExtractor: keyExtractor,
+      data: visibleEvents,
+      renderItem: renderEventItem,
+      keyExtractor: eventKeyExtractor,
       onEndReachedThreshold: END_REACHED_THRESHOLD,
       contentContainerStyle: styles.listContent,
-      ItemSeparatorComponent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.separator
-      }),
-      ListFooterComponent: lockedConversationCount > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      ListFooterComponent: lockedEventCount > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.lockedBannerContainer,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProFeatureBanner, {
-          featureName: `${lockedConversationCount} event${lockedConversationCount > 1 ? 's' : ''} locked`,
+          featureName: `${lockedEventCount} event${lockedEventCount > 1 ? 's' : ''} locked`,
           description: "Upgrade to Pro to unlock full event history"
         })
       }) : null,
@@ -484,10 +564,14 @@ function StorageModalWithTabs({
     conversation: selectedConversation,
     selectedEventIndex: selectedEventIndex,
     onEventIndexChange: setSelectedEventIndex
+  }) : selectedHistoryConversation && selectedHistoryEventIndex !== null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageEventDetailContent.StorageEventDetailFooter, {
+    conversation: selectedHistoryConversation,
+    selectedEventIndex: selectedHistoryEventIndex,
+    onEventIndexChange: setSelectedHistoryEventIndex
   }) : null;
 
   // Determine the appropriate back handler based on current view state
-  const currentBackHandler = showStorageFilters ? () => setShowStorageFilters(false) : showFilters ? () => setShowFilters(false) : selectedConversation ? () => {
+  const currentBackHandler = showFilters ? () => setShowFilters(false) : selectedHistoryEventIndex !== null ? () => setSelectedHistoryEventIndex(null) : selectedHistoryKey ? handleBackFromHistory : selectedConversation ? () => {
     setSelectedConversationKey(null);
     setSelectedEventIndex(0);
   } : onBack;
@@ -499,17 +583,18 @@ function StorageModalWithTabs({
     persistenceKey: persistenceKey,
     header: {
       showToggleButton: true,
-      customContent: showStorageFilters ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+      customContent: showFilters ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-          onBack: () => setShowStorageFilters(false)
+          onBack: () => setShowFilters(false)
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
           title: "Filters"
         })]
-      }) : showFilters ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+      }) : selectedHistoryKey ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-          onBack: () => setShowFilters(false)
+          onBack: selectedHistoryEventIndex !== null ? () => setSelectedHistoryEventIndex(null) : handleBackFromHistory
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-          title: "Event Filters"
+          title: `${selectedHistoryKey} History`,
+          centered: true
         })]
       }) : selectedConversation ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
@@ -544,13 +629,26 @@ function StorageModalWithTabs({
               label: "Storage"
             }, {
               key: "events",
-              label: `Events${conversations.length > 0 && activeTab !== "events" ? ` (${conversations.length})` : ""}`
+              label: `Events${filteredEvents.length > 0 ? ` (${filteredEvents.length})` : ""}`
             }],
             activeTab: activeTab,
-            onTabChange: tab => setActiveTab(tab)
+            onTabChange: tab => {
+              setActiveTab(tab);
+              setSelectedHistoryKey(null);
+              setSelectedHistoryEventIndex(null);
+              setSelectedConversationKey(null);
+              setSelectedEventIndex(0);
+            }
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
-          children: [activeTab === "browser" && !isSearchActive && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            onPress: handleToggleFilters,
+            style: [styles.iconButton, (ignoredPatterns.size > 0 || enabledStorageTypes.size < 3) && styles.activeFilterButton],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
+              size: 14,
+              color: ignoredPatterns.size > 0 || enabledStorageTypes.size < 3 ? _sharedUi.macOSColors.semantic.debug : _sharedUi.macOSColors.text.secondary
+            })
+          }), activeTab === "browser" && !isSearchActive && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
               onPress: () => setIsSearchActive(true),
               style: styles.iconButton,
@@ -558,33 +656,23 @@ function StorageModalWithTabs({
                 size: 14,
                 color: _sharedUi.macOSColors.text.secondary
               })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-              onPress: handleToggleStorageFilters,
-              style: [styles.iconButton, storageIgnoredPatterns.size > 0 && styles.activeFilterButton],
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
-                size: 14,
-                color: storageIgnoredPatterns.size > 0 ? _sharedUi.macOSColors.semantic.debug : _sharedUi.macOSColors.text.secondary
-              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
+              value: getStorageSnapshot,
+              disabled: storageDataRef.current.length === 0,
+              buttonStyle: styles.iconButton
             })]
           }), activeTab === "events" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-              onPress: handleToggleFilters,
-              style: [styles.iconButton, ignoredPatterns.size > 0 && styles.activeFilterButton],
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
-                size: 14,
-                color: ignoredPatterns.size > 0 ? _sharedUi.macOSColors.semantic.debug : _sharedUi.macOSColors.text.secondary
-              })
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
+              value: getEventsSnapshot,
+              disabled: filteredEvents.length === 0,
+              buttonStyle: styles.iconButton
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
               isEnabled: isListening,
               onToggle: handleToggleListening,
               accessibilityLabel: "Toggle storage event monitoring"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarClearButton, {
               onPress: handleClearEvents,
-              style: styles.iconButton,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
-                size: 14,
-                color: _sharedUi.macOSColors.semantic.error
-              })
+              buttonStyle: styles.iconButton
             })]
           })]
         })]
@@ -621,7 +709,7 @@ const styles = _reactNative.StyleSheet.create({
     height: 8
   },
   listContent: {
-    paddingVertical: 16
+    paddingVertical: 6
   },
   lockedBannerContainer: {
     marginTop: 8,

package/lib/module/storage/components/GameUIStorageBrowser.js

@@ -58,7 +58,10 @@ export function GameUIStorageBrowser({
   onTogglePattern,
   onAddPattern,
   searchQuery = "",
-  storageDataRef
+  storageDataRef,
+  eventCountByKey,
+  onViewHistory,
+  enabledStorageTypes
 }) {
   const isPro = useIsPro();
   const [showUpgradeModal, setShowUpgradeModal] = useState(false);
@@ -350,7 +353,12 @@ export function GameUIStorageBrowser({
   const filteredKeys = useMemo(() => {
     let keys = sortedKeys;
 
-    // Apply ignored pattern filter first
+    // Apply enabled storage types filter (from parent unified filter)
+    if (enabledStorageTypes && enabledStorageTypes.size > 0) {
+      keys = keys.filter(k => enabledStorageTypes.has(k.storageType));
+    }
+
+    // Apply ignored pattern filter
     keys = keys.filter(k => {
       // Check if key matches any ignored pattern
       const shouldIgnore = Array.from(ignoredPatterns).some(pattern => k.key.includes(pattern));
@@ -386,7 +394,7 @@ export function GameUIStorageBrowser({
     // No need to filter again here
 
     return keys;
-  }, [sortedKeys, activeFilter, activeStorageType, ignoredPatterns, searchQuery, selectedMMKVInstance]);
+  }, [sortedKeys, activeFilter, activeStorageType, ignoredPatterns, searchQuery, selectedMMKVInstance, enabledStorageTypes]);
 
   // For free users, limit visible keys to FREE_TIER_KEY_LIMIT
   const visibleKeys = useMemo(() => {
@@ -618,7 +626,9 @@ export function GameUIStorageBrowser({
         emptyMessage: "",
         isSelectMode: isSelectMode,
         selectedKeys: selectedKeyIds,
-        onSelectionChange: handleSelectionChange
+        onSelectionChange: handleSelectionChange,
+        eventCountByKey: eventCountByKey,
+        onViewHistory: onViewHistory
       }), hasLockedKeys && /*#__PURE__*/_jsxs(TouchableOpacity, {
         style: styles.limitBanner,
         onPress: () => setShowUpgradeModal(true),

package/lib/module/storage/components/StorageBrowserMode.js

@@ -13,7 +13,10 @@ export function StorageBrowserMode({
   onTogglePattern,
   onAddPattern,
   searchQuery = "",
-  storageDataRef
+  storageDataRef,
+  eventCountByKey,
+  onViewHistory,
+  enabledStorageTypes
 }) {
   return /*#__PURE__*/_jsx(GameUIStorageBrowser, {
     requiredStorageKeys: requiredStorageKeys,
@@ -22,6 +25,9 @@ export function StorageBrowserMode({
     onTogglePattern: onTogglePattern,
     onAddPattern: onAddPattern,
     searchQuery: searchQuery,
-    storageDataRef: storageDataRef
+    storageDataRef: storageDataRef,
+    eventCountByKey: eventCountByKey,
+    onViewHistory: onViewHistory,
+    enabledStorageTypes: enabledStorageTypes
   });
 }