@buoy-gg/storage 1.7.2

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

@@ -0,0 +1,867 @@
+"use strict";
+
+import { useState, useCallback, useEffect, useRef, useMemo } from "react";
+import { Text, View, TouchableOpacity, StyleSheet, FlatList, Alert } from "react-native";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { JsModal, ModalHeader, TabSelector, ValueTypeBadge, StorageTypeBadge, formatRelativeTime, parseValue, devToolsStorageKeys, macOSColors, Database, Pause, Play, Trash2, Filter, Search, SearchBar } from "@buoy-gg/shared-ui";
+import { StorageBrowserMode } from "./StorageBrowserMode";
+import { clearAllAppStorage, clearAllStorageIncludingDevTools } from "../utils/clearAllStorage";
+import { ProFeatureBanner } from "@buoy-gg/shared-ui";
+import { startListening, stopListening, addListener, isListening as checkIsListening } from "../utils/AsyncStorageListener";
+import { StorageEventDetailContent, StorageEventDetailFooter } from "./StorageEventDetailContent";
+import { StorageFilterViewV2 } from "./StorageFilterViewV2";
+import { StorageEventFilterView } from "./StorageEventFilterView";
+import { translateStorageAction } from "../utils/storageActionHelpers";
+import { isMMKVAvailable } from "../utils/mmkvAvailability";
+
+// Conditionally import MMKV listener
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+let addMMKVListener;
+if (isMMKVAvailable()) {
+  const mmkvListener = require("../utils/MMKVListener");
+  addMMKVListener = mmkvListener.addMMKVListener;
+}
+
+// Unified storage event type
+
+// Lazy load the license hooks to avoid circular dependencies
+let _useIsPro = null;
+let _licenseLoadAttempted = false;
+function loadLicenseModule() {
+  if (_licenseLoadAttempted) return;
+  _licenseLoadAttempted = true;
+  try {
+    const mod = require("@buoy-gg/license");
+    if (mod) {
+      _useIsPro = mod.useIsPro ?? null;
+    }
+  } catch {
+    // License package not available
+  }
+}
+function getUseIsPro() {
+  loadLicenseModule();
+  return _useIsPro ?? (() => false);
+}
+
+// Free tier limit for storage events/conversations
+export const FREE_TIER_EVENT_LIMIT = 25;
+export function StorageModalWithTabs({
+  visible,
+  onClose,
+  onBack,
+  onMinimize,
+  enableSharedModalDimensions = false,
+  requiredStorageKeys = []
+}) {
+  // Check Pro status internally
+  const useIsPro = getUseIsPro();
+  const isPro = useIsPro();
+  const [activeTab, setActiveTab] = useState("browser");
+
+  // Storage Browser state
+  const [showStorageFilters, setShowStorageFilters] = useState(false);
+  const [storageIgnoredPatterns, setStorageIgnoredPatterns] = useState(new Set(["@react_buoy"]) // Auto-hide dev tool keys by default
+  );
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isSearchActive, setIsSearchActive] = useState(false);
+  const hasLoadedStorageFilters = useRef(false);
+
+  // Event Listener state
+  const [events, setEvents] = useState([]);
+  const [isListening, setIsListening] = useState(false);
+  const [selectedConversationKey, setSelectedConversationKey] = useState(null);
+  const [selectedEventIndex, setSelectedEventIndex] = useState(0);
+  const [showFilters, setShowFilters] = useState(false);
+  const [ignoredPatterns, setIgnoredPatterns] = useState(new Set(["@RNAsyncStorage", "redux-persist", "persist:"]) // Only show @react_buoy events by default
+  );
+  const [enabledStorageTypes, setEnabledStorageTypes] = useState(new Set(['async', 'mmkv', 'secure']) // All enabled by default
+  );
+  const lastEventRef = useRef(null);
+  const hasLoadedFilters = useRef(false);
+  const hasLoadedTabState = useRef(false);
+  const hasLoadedMonitoringState = useRef(false);
+  const handleModeChange = useCallback(_mode => {
+    // Mode changes handled by JsModal
+  }, []);
+
+  // Timer removed - using useTickEveryMinute hook instead
+
+  // Load persisted tab state on mount
+  useEffect(() => {
+    if (!visible || hasLoadedTabState.current) return;
+    const loadTabState = async () => {
+      try {
+        const storedTab = await AsyncStorage.getItem(devToolsStorageKeys.storage.activeTab());
+        if (storedTab && (storedTab === "browser" || storedTab === "events")) {
+          setActiveTab(storedTab);
+        }
+        hasLoadedTabState.current = true;
+      } catch (error) {
+        // Failed to load tab state
+      }
+    };
+    loadTabState();
+  }, [visible]);
+
+  // Load persisted monitoring state on mount
+  useEffect(() => {
+    if (!visible || hasLoadedMonitoringState.current) return;
+    const loadMonitoringState = async () => {
+      try {
+        const storedMonitoring = await AsyncStorage.getItem(devToolsStorageKeys.storage.isMonitoring());
+        if (storedMonitoring !== null) {
+          const shouldMonitor = storedMonitoring === "true";
+          if (shouldMonitor && !checkIsListening()) {
+            await startListening();
+            setIsListening(true);
+          }
+        }
+        hasLoadedMonitoringState.current = true;
+      } catch (error) {
+        // Failed to load monitoring state
+      }
+    };
+    loadMonitoringState();
+  }, [visible]);
+
+  // Note: Conversations will appear when storage events are triggered
+  // Click on any conversation to see the unified view with toggle cards
+
+  // Save tab state when it changes
+  useEffect(() => {
+    if (!hasLoadedTabState.current) return; // Don't save on initial load
+
+    const saveTabState = async () => {
+      try {
+        await AsyncStorage.setItem(devToolsStorageKeys.storage.activeTab(), activeTab);
+      } catch (error) {
+        // Failed to save tab state
+      }
+    };
+    saveTabState();
+  }, [activeTab]);
+
+  // Save monitoring state when it changes
+  useEffect(() => {
+    if (!hasLoadedMonitoringState.current) return; // Don't save on initial load
+
+    const saveMonitoringState = async () => {
+      try {
+        await AsyncStorage.setItem(devToolsStorageKeys.storage.isMonitoring(), isListening.toString());
+      } catch (error) {
+        // Failed to save monitoring state
+      }
+    };
+    saveMonitoringState();
+  }, [isListening]);
+
+  // Load persisted filters on mount
+  useEffect(() => {
+    if (!visible || hasLoadedFilters.current) return;
+    const loadFilters = async () => {
+      try {
+        const storedFilters = await AsyncStorage.getItem(devToolsStorageKeys.storage.eventFilters());
+        if (storedFilters) {
+          const filters = JSON.parse(storedFilters);
+          setIgnoredPatterns(new Set(filters));
+        }
+        hasLoadedFilters.current = true;
+      } catch (error) {
+        // Failed to load filters
+      }
+    };
+    loadFilters();
+  }, [visible]);
+
+  // Save filters when they change
+  useEffect(() => {
+    if (!hasLoadedFilters.current) return; // Don't save on initial load
+
+    const saveFilters = async () => {
+      try {
+        const filters = Array.from(ignoredPatterns);
+        await AsyncStorage.setItem(devToolsStorageKeys.storage.eventFilters(), JSON.stringify(filters));
+      } catch (error) {
+        // Failed to save filters
+      }
+    };
+    saveFilters();
+  }, [ignoredPatterns]);
+
+  // Sync isListening state with actual listener state on mount
+  useEffect(() => {
+    if (!visible) return;
+
+    // Check if already listening and sync state
+    const listening = checkIsListening();
+    setIsListening(listening);
+  }, [visible]);
+
+  // Event listener setup - only collect events when isListening is true
+  useEffect(() => {
+    if (!visible || !isListening) return;
+
+    // Set up AsyncStorage event listener
+    const unsubscribeAsync = addListener(event => {
+      const storageEvent = {
+        ...event,
+        storageType: 'async'
+      };
+      lastEventRef.current = storageEvent;
+      setEvents(prev => {
+        const updated = [storageEvent, ...prev];
+        return updated.slice(0, 500);
+      });
+    });
+
+    // Set up MMKV event listener (if available)
+    let unsubscribeMMKV = () => {};
+    if (isMMKVAvailable() && addMMKVListener) {
+      unsubscribeMMKV = addMMKVListener(event => {
+        const storageEvent = {
+          ...event,
+          storageType: 'mmkv'
+        };
+        lastEventRef.current = storageEvent;
+        setEvents(prev => {
+          const updated = [storageEvent, ...prev];
+          return updated.slice(0, 500);
+        });
+      });
+    }
+    return () => {
+      unsubscribeAsync();
+      unsubscribeMMKV();
+    };
+  }, [visible, isListening]);
+  const handleToggleListening = useCallback(async () => {
+    if (isListening) {
+      stopListening();
+      setIsListening(false);
+    } else {
+      await startListening();
+      setIsListening(true);
+    }
+  }, [isListening]);
+  const handleClearEvents = useCallback(() => {
+    setEvents([]);
+    setSelectedConversationKey(null);
+  }, []);
+  const handleConversationPress = useCallback(conversation => {
+    setSelectedConversationKey(conversation.key);
+    setSelectedEventIndex(0);
+  }, []);
+  const handleTogglePattern = useCallback(pattern => {
+    setIgnoredPatterns(prev => {
+      const next = new Set(prev);
+      if (next.has(pattern)) {
+        next.delete(pattern);
+      } else {
+        next.add(pattern);
+      }
+      return next;
+    });
+  }, []);
+  const handleAddPattern = useCallback(pattern => {
+    setIgnoredPatterns(prev => new Set([...prev, pattern]));
+  }, []);
+  const handleToggleFilters = useCallback(() => {
+    setShowFilters(!showFilters);
+  }, [showFilters]);
+  const handleToggleStorageType = useCallback(type => {
+    setEnabledStorageTypes(prev => {
+      const next = new Set(prev);
+      if (next.has(type)) {
+        next.delete(type);
+      } else {
+        next.add(type);
+      }
+      return next;
+    });
+  }, []);
+
+  // Storage Browser handlers
+  const storageDataRef = useRef([]);
+  const handleToggleStorageFilters = useCallback(() => {
+    setShowStorageFilters(!showStorageFilters);
+  }, [showStorageFilters]);
+  const handleToggleStoragePattern = useCallback(pattern => {
+    setStorageIgnoredPatterns(prev => {
+      const next = new Set(prev);
+      if (next.has(pattern)) {
+        next.delete(pattern);
+      } else {
+        next.add(pattern);
+      }
+      return next;
+    });
+  }, []);
+  const handleAddStoragePattern = useCallback(pattern => {
+    setStorageIgnoredPatterns(prev => new Set([...prev, pattern]));
+  }, []);
+  const handlePurgeStorage = useCallback(async () => {
+    Alert.alert("Clear Storage", "Choose what to clear:", [{
+      text: "Cancel",
+      style: "cancel"
+    }, {
+      text: "Clear App Storage",
+      onPress: async () => {
+        try {
+          await clearAllAppStorage();
+          // Refresh will be handled by GameUIStorageBrowser
+        } catch (error) {
+          Alert.alert("Error", "Failed to clear app storage");
+        }
+      }
+    }, {
+      text: "Clear All (Including Dev Tools)",
+      style: "destructive",
+      onPress: async () => {
+        try {
+          await clearAllStorageIncludingDevTools();
+          // Refresh will be handled by GameUIStorageBrowser
+        } catch (error) {
+          Alert.alert("Error", "Failed to clear all storage");
+        }
+      }
+    }]);
+  }, []);
+  const getValueType = value => {
+    const parsed = parseValue(value);
+    if (parsed === null) return "null";
+    if (parsed === undefined) return "undefined";
+    if (Array.isArray(parsed)) return "array";
+    if (typeof parsed === "boolean") return "boolean";
+    if (typeof parsed === "number") return "number";
+    if (typeof parsed === "string") return "string";
+    if (typeof parsed === "object") return "object";
+    return "undefined";
+  };
+
+  // Get all unique keys from events AND from AsyncStorage for filter view
+  const [allStorageKeys, setAllStorageKeys] = useState([]);
+  useEffect(() => {
+    const fetchAllKeys = async () => {
+      try {
+        const keys = await AsyncStorage.getAllKeys();
+        setAllStorageKeys([...keys].sort());
+      } catch (error) {
+        // Failed to fetch keys
+      }
+    };
+
+    // Fetch all keys for both tabs when visible
+    if (visible) {
+      fetchAllKeys();
+    }
+  }, [visible]);
+  const allEventKeys = useMemo(() => {
+    // Combine storage keys with event keys for comprehensive filter view
+    const keys = new Set(allStorageKeys);
+    events.forEach(event => {
+      if (event.data?.key) {
+        keys.add(event.data.key);
+      }
+    });
+    return Array.from(keys).sort();
+  }, [events, allStorageKeys]);
+
+  // Group events by key and create conversations
+  const conversations = useMemo(() => {
+    const keyMap = new Map();
+    events.forEach(event => {
+      if (!event.data?.key) return;
+      const key = event.data.key;
+
+      // Filter by enabled storage types
+      if (!enabledStorageTypes.has(event.storageType)) return;
+
+      // Filter out keys that match ignored patterns
+      const shouldIgnore = Array.from(ignoredPatterns).some(pattern => key.includes(pattern));
+      if (shouldIgnore) return;
+      const existing = keyMap.get(key);
+      if (!existing) {
+        keyMap.set(key, {
+          key,
+          lastEvent: event,
+          events: [event],
+          totalOperations: 1,
+          currentValue: event.data.value,
+          valueType: getValueType(event.data.value),
+          storageTypes: new Set([event.storageType])
+        });
+      } else {
+        existing.events.push(event);
+        existing.totalOperations++;
+        existing.storageTypes.add(event.storageType);
+
+        // Update last event if this one is newer
+        if (event.timestamp > existing.lastEvent.timestamp) {
+          existing.lastEvent = event;
+          existing.currentValue = event.data.value;
+          existing.valueType = getValueType(event.data.value);
+        }
+      }
+    });
+
+    // Convert to array and sort by last updated
+    return Array.from(keyMap.values()).sort((a, b) => b.lastEvent.timestamp.getTime() - a.lastEvent.timestamp.getTime());
+  }, [events, ignoredPatterns, enabledStorageTypes]);
+
+  // Get the live selected conversation from the current conversations array
+  const selectedConversation = useMemo(() => {
+    if (!selectedConversationKey) return null;
+    return conversations.find(c => c.key === selectedConversationKey) || null;
+  }, [selectedConversationKey, conversations]);
+
+  // For free users, limit visible conversations
+  const visibleConversations = useMemo(() => {
+    if (isPro) return conversations;
+    return conversations.slice(0, FREE_TIER_EVENT_LIMIT);
+  }, [conversations, isPro]);
+  const lockedConversationCount = useMemo(() => {
+    if (isPro) return 0;
+    return Math.max(0, conversations.length - FREE_TIER_EVENT_LIMIT);
+  }, [conversations.length, isPro]);
+  const getActionColor = action => {
+    switch (action) {
+      // AsyncStorage - Set operations
+      case "setItem":
+      case "multiSet":
+      // MMKV - Set operations
+      // falls through
+      case "set.string":
+      case "set.number":
+      case "set.boolean":
+      case "set.buffer":
+        return macOSColors.semantic.success;
+
+      // AsyncStorage - Remove operations
+      case "removeItem":
+      case "multiRemove":
+      case "clear":
+      // MMKV - Delete operations
+      // falls through
+      case "delete":
+      case "clearAll":
+        return macOSColors.semantic.error;
+
+      // AsyncStorage - Merge operations
+      case "mergeItem":
+      case "multiMerge":
+        return macOSColors.semantic.info;
+
+      // MMKV - Get operations
+      case "get.string":
+      case "get.number":
+      case "get.boolean":
+      case "get.buffer":
+        return macOSColors.semantic.warning;
+      default:
+        return macOSColors.text.muted;
+    }
+  };
+
+  // FlatList optimization constants
+  const END_REACHED_THRESHOLD = 0.8;
+
+  // Stable keyExtractor for FlatList
+  const keyExtractor = useCallback(item => {
+    return item.key;
+  }, []);
+
+  // Removed getItemType as it's FlatList-specific
+
+  // Create stable ref for event handler
+  const selectConversationRef = useRef(undefined);
+  selectConversationRef.current = handleConversationPress;
+
+  // Stable renderItem with ref pattern
+  const renderConversationItem = useCallback(({
+    item
+  }) => {
+    return /*#__PURE__*/_jsxs(TouchableOpacity, {
+      onPress: () => selectConversationRef.current?.(item),
+      style: styles.conversationItem,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.conversationHeader,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.keyText,
+          numberOfLines: 1,
+          children: item.key
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.actionText, {
+            color: getActionColor(item.lastEvent.action)
+          }],
+          children: translateStorageAction(item.lastEvent.action)
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.conversationDetails,
+        children: [item.storageTypes && Array.from(item.storageTypes).map(storageType => /*#__PURE__*/_jsx(StorageTypeBadge, {
+          type: storageType
+        }, storageType)), /*#__PURE__*/_jsx(ValueTypeBadge, {
+          type: item.valueType
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.operationCount,
+          children: [item.totalOperations, " operation", item.totalOperations !== 1 ? "s" : ""]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.timestamp,
+          children: formatRelativeTime(item.lastEvent.timestamp)
+        })]
+      })]
+    });
+  }, []);
+  if (!visible) return null;
+  const persistenceKey = enableSharedModalDimensions ? devToolsStorageKeys.modal.root() : devToolsStorageKeys.storage.modal();
+  const renderContent = () => {
+    if (activeTab === "browser") {
+      if (showStorageFilters) {
+        return /*#__PURE__*/_jsx(StorageFilterViewV2, {
+          ignoredPatterns: storageIgnoredPatterns,
+          onTogglePattern: handleToggleStoragePattern,
+          onAddPattern: handleAddStoragePattern,
+          availableKeys: allStorageKeys
+        });
+      }
+      return /*#__PURE__*/_jsx(StorageBrowserMode, {
+        requiredStorageKeys: requiredStorageKeys,
+        showFilters: showStorageFilters,
+        ignoredPatterns: storageIgnoredPatterns,
+        onTogglePattern: handleToggleStoragePattern,
+        onAddPattern: handleAddStoragePattern,
+        searchQuery: searchQuery,
+        storageDataRef: storageDataRef
+      });
+    }
+
+    // Events tab content
+    if (selectedConversation) {
+      return /*#__PURE__*/_jsx(View, {
+        style: styles.contentWrapper,
+        children: /*#__PURE__*/_jsx(StorageEventDetailContent, {
+          conversation: selectedConversation,
+          selectedEventIndex: selectedEventIndex,
+          onEventIndexChange: setSelectedEventIndex,
+          disableInternalFooter: true
+        })
+      });
+    }
+    if (showFilters) {
+      return /*#__PURE__*/_jsx(StorageEventFilterView, {
+        ignoredPatterns: ignoredPatterns,
+        onTogglePattern: handleTogglePattern,
+        onAddPattern: handleAddPattern,
+        availableKeys: allEventKeys,
+        enabledStorageTypes: enabledStorageTypes,
+        onToggleStorageType: handleToggleStorageType
+      });
+    }
+    if (conversations.length === 0) {
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.emptyState,
+        children: [/*#__PURE__*/_jsx(Database, {
+          size: 48,
+          color: macOSColors.text.muted
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.emptyTitle,
+          children: isListening ? "No storage events yet" : "Event listener is paused"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.emptySubtitle,
+          children: isListening ? "Storage operations will appear here" : "Press play to start monitoring"
+        })]
+      });
+    }
+    return /*#__PURE__*/_jsx(FlatList, {
+      data: visibleConversations,
+      renderItem: renderConversationItem,
+      keyExtractor: keyExtractor,
+      onEndReachedThreshold: END_REACHED_THRESHOLD,
+      contentContainerStyle: styles.listContent,
+      ItemSeparatorComponent: () => /*#__PURE__*/_jsx(View, {
+        style: styles.separator
+      }),
+      ListFooterComponent: lockedConversationCount > 0 ? /*#__PURE__*/_jsx(View, {
+        style: styles.lockedBannerContainer,
+        children: /*#__PURE__*/_jsx(ProFeatureBanner, {
+          featureName: `${lockedConversationCount} event${lockedConversationCount > 1 ? 's' : ''} locked`,
+          description: "Upgrade to Pro to unlock full event history"
+        })
+      }) : null,
+      initialNumToRender: 10,
+      maxToRenderPerBatch: 10,
+      windowSize: 10,
+      scrollEnabled: false
+    });
+  };
+  const footerNode = selectedConversation ? /*#__PURE__*/_jsx(StorageEventDetailFooter, {
+    conversation: selectedConversation,
+    selectedEventIndex: selectedEventIndex,
+    onEventIndexChange: setSelectedEventIndex
+  }) : null;
+
+  // Determine the appropriate back handler based on current view state
+  const currentBackHandler = showStorageFilters ? () => setShowStorageFilters(false) : showFilters ? () => setShowFilters(false) : selectedConversation ? () => {
+    setSelectedConversationKey(null);
+    setSelectedEventIndex(0);
+  } : onBack;
+  return /*#__PURE__*/_jsx(JsModal, {
+    visible: visible,
+    onClose: onClose,
+    onBack: currentBackHandler,
+    onMinimize: onMinimize,
+    persistenceKey: persistenceKey,
+    header: {
+      showToggleButton: true,
+      customContent: showStorageFilters ? /*#__PURE__*/_jsxs(ModalHeader, {
+        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+          onBack: () => setShowStorageFilters(false)
+        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: "Filters"
+        })]
+      }) : showFilters ? /*#__PURE__*/_jsxs(ModalHeader, {
+        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+          onBack: () => setShowFilters(false)
+        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: "Event Filters"
+        })]
+      }) : selectedConversation ? /*#__PURE__*/_jsxs(ModalHeader, {
+        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+          onBack: () => {
+            setSelectedConversationKey(null);
+            setSelectedEventIndex(0);
+          }
+        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: selectedConversation.key
+        })]
+      }) : /*#__PURE__*/_jsxs(ModalHeader, {
+        children: [onBack && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
+          onBack: onBack
+        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: "",
+          children: isSearchActive ? /*#__PURE__*/_jsx(SearchBar, {
+            value: searchQuery,
+            onChange: setSearchQuery,
+            onClear: () => {
+              setSearchQuery("");
+              setIsSearchActive(false);
+            },
+            placeholder: "Search storage keys...",
+            autoFocus: true,
+            onSubmitEditing: () => setIsSearchActive(false),
+            returnKeyType: "search",
+            suggestions: allStorageKeys,
+            containerStyle: styles.headerSearchContainer
+          }) : /*#__PURE__*/_jsx(TabSelector, {
+            tabs: [{
+              key: "browser",
+              label: "Storage"
+            }, {
+              key: "events",
+              label: `Events${events.length > 0 && activeTab !== "events" ? ` (${events.length})` : ""}`
+            }],
+            activeTab: activeTab,
+            onTabChange: tab => setActiveTab(tab)
+          })
+        }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
+          children: [activeTab === "browser" && !isSearchActive && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: () => setIsSearchActive(true),
+              style: styles.iconButton,
+              children: /*#__PURE__*/_jsx(Search, {
+                size: 14,
+                color: macOSColors.text.secondary
+              })
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: handleToggleStorageFilters,
+              style: [styles.iconButton, storageIgnoredPatterns.size > 0 && styles.activeFilterButton],
+              children: /*#__PURE__*/_jsx(Filter, {
+                size: 14,
+                color: storageIgnoredPatterns.size > 0 ? macOSColors.semantic.debug : macOSColors.text.secondary
+              })
+            })]
+          }), activeTab === "events" && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: handleToggleFilters,
+              style: [styles.iconButton, ignoredPatterns.size > 0 && styles.activeFilterButton],
+              children: /*#__PURE__*/_jsx(Filter, {
+                size: 14,
+                color: ignoredPatterns.size > 0 ? macOSColors.semantic.debug : macOSColors.text.secondary
+              })
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: handleToggleListening,
+              style: [styles.iconButton, isListening && styles.activeButton],
+              children: isListening ? /*#__PURE__*/_jsx(Pause, {
+                size: 14,
+                color: macOSColors.semantic.success
+              }) : /*#__PURE__*/_jsx(Play, {
+                size: 14,
+                color: macOSColors.semantic.success
+              })
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: handleClearEvents,
+              style: styles.iconButton,
+              children: /*#__PURE__*/_jsx(Trash2, {
+                size: 14,
+                color: macOSColors.semantic.error
+              })
+            })]
+          })]
+        })]
+      })
+    },
+    onModeChange: handleModeChange,
+    enablePersistence: true,
+    initialMode: "bottomSheet",
+    enableGlitchEffects: true,
+    styles: {},
+    footer: footerNode,
+    footerHeight: footerNode ? 68 : 0,
+    children: renderContent()
+  });
+}
+const styles = StyleSheet.create({
+  headerSearchContainer: {
+    flex: 1
+  },
+  iconButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: macOSColors.background.hover,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  activeButton: {
+    backgroundColor: macOSColors.semantic.successBackground
+  },
+  activeFilterButton: {
+    backgroundColor: macOSColors.semantic.infoBackground
+  },
+  conversationItem: {
+    padding: 12,
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 8,
+    marginHorizontal: 16
+  },
+  conversationHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 8
+  },
+  keyText: {
+    color: macOSColors.text.primary,
+    fontSize: 14,
+    fontWeight: "600",
+    flex: 1,
+    marginRight: 8,
+    fontFamily: "monospace"
+  },
+  actionText: {
+    fontSize: 11,
+    fontWeight: "600",
+    fontFamily: "monospace",
+    textTransform: "uppercase"
+  },
+  conversationDetails: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  operationCount: {
+    color: macOSColors.text.secondary,
+    fontSize: 11,
+    flex: 1,
+    fontFamily: "monospace"
+  },
+  timestamp: {
+    color: macOSColors.text.muted,
+    fontSize: 11,
+    fontFamily: "monospace"
+  },
+  separator: {
+    height: 8
+  },
+  listContent: {
+    paddingVertical: 16
+  },
+  lockedBannerContainer: {
+    marginTop: 8,
+    marginHorizontal: 16
+  },
+  emptyState: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 32
+  },
+  emptyTitle: {
+    color: macOSColors.text.primary,
+    fontSize: 16,
+    fontWeight: "600",
+    marginTop: 16,
+    marginBottom: 8,
+    fontFamily: "monospace",
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  },
+  emptySubtitle: {
+    color: macOSColors.text.secondary,
+    fontSize: 14,
+    textAlign: "center",
+    fontFamily: "monospace"
+  },
+  eventNavigation: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 8
+  },
+  navButton: {
+    padding: 4,
+    borderRadius: 4
+  },
+  navButtonDisabled: {
+    opacity: 0.3
+  },
+  eventCounter: {
+    color: macOSColors.text.primary,
+    fontSize: 12,
+    fontWeight: "600",
+    fontFamily: "monospace",
+    paddingHorizontal: 8
+  },
+  headerTopRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 12
+  },
+  keyNameContainer: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    backgroundColor: macOSColors.background.input,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: macOSColors.border.input,
+    height: 28
+  },
+  keyNameText: {
+    flex: 1,
+    fontSize: 13,
+    fontWeight: "600",
+    color: macOSColors.semantic.debug,
+    fontFamily: "monospace",
+    letterSpacing: 0.5
+  },
+  contentWrapper: {
+    flex: 1
+  }
+});