@buoy-gg/storage 3.0.1 → 4.0.1

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

@@ -23,7 +23,10 @@ export function StorageKeySection({
   selectedKeys = new Set(),
   onSelectionChange,
   eventCountByKey,
-  onViewHistory
+  onViewHistory,
+  onHideKey,
+  pinnedKeys,
+  onTogglePin
 }) {
   const [expandedKey, setExpandedKey] = useState(null);
   const handleKeyPress = useCallback(storageKey => {
@@ -56,14 +59,14 @@ export function StorageKeySection({
   if (keys.length === 0) return null;
   return /*#__PURE__*/_jsxs(View, {
     style: styles.sectionContainer,
-    children: [title && /*#__PURE__*/_jsxs(SectionHeader, {
+    children: [title ? /*#__PURE__*/_jsxs(SectionHeader, {
       children: [/*#__PURE__*/_jsx(SectionHeader.Title, {
         children: title
       }), count >= 0 && /*#__PURE__*/_jsx(SectionHeader.Badge, {
         count: count,
         color: headerColor
       })]
-    }), /*#__PURE__*/_jsx(View, {
+    }) : null, /*#__PURE__*/_jsx(View, {
       style: styles.sectionContent,
       children: keys.map(storageKey => {
         // Create unique key by combining storage type, instance ID (if present), and key name
@@ -76,7 +79,10 @@ export function StorageKeySection({
           isSelected: selectedKeys.has(uniqueKey),
           onSelectionChange: onSelectionChange,
           eventCount: eventCountByKey?.[storageKey.key],
-          onViewHistory: onViewHistory ? () => onViewHistory(storageKey.key) : undefined
+          onViewHistory: onViewHistory ? () => onViewHistory(storageKey.key) : undefined,
+          onHideKey: onHideKey,
+          isPinned: pinnedKeys?.has(storageKey.key),
+          onTogglePin: onTogglePin
         }, uniqueKey);
       })
     })]

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

@@ -56,8 +56,10 @@ export function StorageModalWithTabs({
   );
   const [enabledStorageTypes, setEnabledStorageTypes] = useState(new Set(['async', 'mmkv', 'secure']) // All enabled by default
   );
+  const [pinnedKeys, setPinnedKeys] = useState(new Set());
   const lastEventRef = useRef(null);
   const hasLoadedFilters = useRef(false);
+  const hasLoadedPins = useRef(false);
   const hasLoadedTabState = useRef(false);
   const hasLoadedMonitoringState = useRef(false);
 
@@ -172,6 +174,37 @@ export function StorageModalWithTabs({
     saveFilters();
   }, [ignoredPatterns]);
 
+  // Load persisted pinned keys on mount
+  useEffect(() => {
+    if (!visible || hasLoadedPins.current) return;
+    const loadPins = async () => {
+      try {
+        const stored = await AsyncStorage.getItem(devToolsStorageKeys.storage.pinnedKeys());
+        if (stored) {
+          setPinnedKeys(new Set(JSON.parse(stored)));
+        }
+        hasLoadedPins.current = true;
+      } catch (error) {
+        // Failed to load pinned keys
+      }
+    };
+    loadPins();
+  }, [visible]);
+
+  // Save pinned keys when they change
+  useEffect(() => {
+    if (!hasLoadedPins.current) return; // Don't save on initial load
+
+    const savePins = async () => {
+      try {
+        await AsyncStorage.setItem(devToolsStorageKeys.storage.pinnedKeys(), JSON.stringify(Array.from(pinnedKeys)));
+      } catch (error) {
+        // Failed to save pinned keys
+      }
+    };
+    savePins();
+  }, [pinnedKeys]);
+
   // Event listener setup - now handled by useStorageEvents hook
   // The hook subscribes to the centralized storageEventStore
 
@@ -206,6 +239,17 @@ export function StorageModalWithTabs({
   const handleAddPattern = useCallback(pattern => {
     setIgnoredPatterns(prev => new Set([...prev, pattern]));
   }, []);
+  const handleTogglePin = useCallback(key => {
+    setPinnedKeys(prev => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, []);
   const handleToggleFilters = useCallback(() => {
     setShowFilters(!showFilters);
   }, [showFilters]);
@@ -504,7 +548,9 @@ export function StorageModalWithTabs({
         storageDataRef: storageDataRef,
         eventCountByKey: eventCountByKey,
         onViewHistory: handleViewHistoryFromBrowser,
-        enabledStorageTypes: enabledStorageTypes
+        enabledStorageTypes: enabledStorageTypes,
+        pinnedKeys: pinnedKeys,
+        onTogglePin: handleTogglePin
       });
     }
 

package/lib/module/storage/hooks/useAsyncStorageKeys.js

@@ -1,15 +1,26 @@
 "use strict";
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import { readMany } from '../utils/asyncStorageCompat';
 export function useAsyncStorageKeys(requiredStorageKeys = []) {
   // State management
   const [storageKeys, setStorageKeys] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
 
+  // Callers routinely pass a fresh array literal (or rely on the `= []`
+  // default, which is a new array every render). Depending on its identity
+  // would recreate `fetchStorageData` each render, re-fire the effect, and
+  // loop AsyncStorage.getAllKeys/multiGet forever. Depend on a stable content
+  // signature instead, and read the latest array via a ref inside the fetch.
+  const requiredSignature = JSON.stringify(requiredStorageKeys);
+  const requiredRef = useRef(requiredStorageKeys);
+  requiredRef.current = requiredStorageKeys;
+
   // Fetch all keys and values from AsyncStorage
   const fetchStorageData = useCallback(async () => {
+    const requiredStorageKeys = requiredRef.current;
     setIsLoading(true);
     setError(null);
     try {
@@ -21,8 +32,8 @@ export function useAsyncStorageKeys(requiredStorageKeys = []) {
         return;
       }
 
-      // 2. Get all values using multiGet
-      const allKeyValuePairs = await AsyncStorage.multiGet(allKeys);
+      // 2. Get all values (compat helper normalizes v2 multiGet / v3 getMany)
+      const allKeyValuePairs = await readMany(allKeys);
 
       // 3. Process keys into StorageKeyInfo format
       const allStorageKeys = [];
@@ -106,7 +117,8 @@ export function useAsyncStorageKeys(requiredStorageKeys = []) {
     } finally {
       setIsLoading(false);
     }
-  }, [requiredStorageKeys]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [requiredSignature]);
 
   // Initial fetch
   useEffect(() => {

package/lib/module/storage/hooks/useMMKVKeys.js

@@ -13,7 +13,7 @@
  * - No multiGet - must fetch keys individually
  */
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { isMMKVAvailable } from '../utils/mmkvAvailability';
 
 // Conditionally import MMKV types
@@ -73,8 +73,16 @@ export function useMMKVKeys(instance, instanceId, requiredStorageKeys = []) {
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
 
+  // Depend on a stable content signature rather than the array identity — a
+  // fresh `requiredStorageKeys` literal each render would otherwise loop the
+  // fetch effect. Read the latest array via ref inside the fetch.
+  const requiredSignature = JSON.stringify(requiredStorageKeys);
+  const requiredRef = useRef(requiredStorageKeys);
+  requiredRef.current = requiredStorageKeys;
+
   // Fetch all keys and values from MMKV instance
   const fetchStorageData = useCallback(() => {
+    const requiredStorageKeys = requiredRef.current;
     setIsLoading(true);
     setError(null);
     try {
@@ -206,7 +214,8 @@ export function useMMKVKeys(instance, instanceId, requiredStorageKeys = []) {
     } finally {
       setIsLoading(false);
     }
-  }, [instance, instanceId, requiredStorageKeys]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [instance, instanceId, requiredSignature]);
 
   // Initial fetch
   useEffect(() => {
@@ -252,7 +261,15 @@ export function useMultiMMKVKeys(instances, requiredStorageKeys = []) {
   const [storageKeys, setStorageKeys] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
+
+  // Depend on a stable content signature rather than the array identity — a
+  // fresh `requiredStorageKeys` literal each render would otherwise loop the
+  // fetch effect. Read the latest array via ref inside the fetch.
+  const requiredSignature = JSON.stringify(requiredStorageKeys);
+  const requiredRef = useRef(requiredStorageKeys);
+  requiredRef.current = requiredStorageKeys;
   const fetchStorageData = useCallback(() => {
+    const requiredStorageKeys = requiredRef.current;
     setIsLoading(true);
     setError(null);
     try {
@@ -346,7 +363,8 @@ export function useMultiMMKVKeys(instances, requiredStorageKeys = []) {
     } finally {
       setIsLoading(false);
     }
-  }, [instances, requiredStorageKeys]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [instances, requiredSignature]);
   useEffect(() => {
     fetchStorageData();
   }, [fetchStorageData]);

package/lib/module/storage/stores/storageEventStore.js

@@ -25,6 +25,8 @@
 import { BaseEventStore } from "@buoy-gg/shared-ui";
 import { startListening as startAsyncStorageListening, addListener as addAsyncStorageListener, isListening as isAsyncStorageListening } from "../utils/AsyncStorageListener";
 import { addMMKVListener } from "../utils/MMKVListener";
+import { mmkvInstanceRegistry } from "../utils/MMKVInstanceRegistry";
+import { detectMMKVType } from "../utils/mmkvTypeDetection";
 
 /**
  * Unified storage event type combining AsyncStorage and MMKV events.
@@ -50,6 +52,7 @@ class StorageEventStore extends BaseEventStore {
   // Unsubscribe functions for raw listeners
   asyncStorageUnsubscribe = null;
   mmkvUnsubscribe = null;
+  hasScannedInitialState = false;
   constructor() {
     super({
       storeName: "storage",
@@ -57,6 +60,84 @@ class StorageEventStore extends BaseEventStore {
     });
   }
 
+  /**
+   * Scan all registered MMKV instances and AsyncStorage for existing keys,
+   * creating synthetic events so that getEvents() includes the current state
+   * (not just changes made after capture started). Only runs once per store
+   * lifetime to avoid duplicates.
+   */
+  async scanExistingState() {
+    if (this.hasScannedInitialState) return;
+    this.hasScannedInitialState = true;
+    const now = new Date();
+
+    // ── MMKV: synchronous scan ──
+    const instances = mmkvInstanceRegistry.getAll();
+    for (const {
+      id: instanceId,
+      instance
+    } of instances) {
+      try {
+        const keys = instance.getAllKeys();
+        for (const key of keys) {
+          const {
+            value,
+            type: valueType
+          } = detectMMKVType(instance, key);
+          const actionMap = {
+            string: "set.string",
+            number: "set.number",
+            boolean: "set.boolean",
+            buffer: "set.buffer"
+          };
+          const action = actionMap[valueType] ?? "set.string";
+          this.addEvent({
+            action,
+            timestamp: now,
+            instanceId,
+            data: {
+              key,
+              value,
+              valueType
+            },
+            storageType: "mmkv",
+            id: nextStorageEventId()
+          });
+        }
+      } catch {
+        // Instance may not be accessible — skip silently
+      }
+    }
+
+    // ── AsyncStorage: async scan ──
+    try {
+      const {
+        asyncStorage,
+        readMany
+      } = require("../utils/asyncStorageCompat");
+      if (asyncStorage) {
+        const allKeys = await asyncStorage.getAllKeys();
+        if (allKeys.length > 0) {
+          const pairs = await readMany(allKeys);
+          for (const [key, rawValue] of pairs) {
+            this.addEvent({
+              action: "setItem",
+              timestamp: now,
+              data: {
+                key,
+                value: rawValue ?? undefined
+              },
+              storageType: "async",
+              id: nextStorageEventId()
+            });
+          }
+        }
+      }
+    } catch {
+      // AsyncStorage not available — skip silently
+    }
+  }
+
   /**
    * Start capturing storage events from both AsyncStorage and MMKV
    */
@@ -89,6 +170,9 @@ class StorageEventStore extends BaseEventStore {
         this.addEvent(storageEvent);
       });
     }
+
+    // Scan existing keys so getEvents() includes pre-existing state
+    await this.scanExistingState();
   }
 
   /**

package/lib/module/storage/sync/storageSyncAdapter.js

@@ -0,0 +1,48 @@
+"use strict";
+
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { readMany, writeMany, removeMany } from "../utils/asyncStorageCompat";
+import { storageEventStore } from "../stores/storageEventStore";
+import { clearAllAppStorage } from "../utils/clearAllStorage";
+/**
+ * Sync adapter for the storage tool, consumed by @buoy-gg/external-sync's
+ * `useExternalSync` (structurally matches its ToolSyncAdapter interface so
+ * this package doesn't need a dependency on it).
+ *
+ * Subscribing starts the underlying capture lifecycle (including the initial
+ * key scan), so storage events are only recorded while a dashboard is
+ * watching.
+ *
+ * The `async.*` actions mirror the AsyncStorage API so the desktop dashboard
+ * can proxy its browse/edit mode against the device's real storage.
+ */
+export const storageSyncAdapter = {
+  version: 1,
+  getSnapshot: () => storageEventStore.getEvents(),
+  subscribe: onChange => storageEventStore.subscribeToEvents(onChange),
+  actions: {
+    clearEvents: () => {
+      storageEventStore.clearEvents();
+    },
+    /** Clears all app storage keys, preserving dev tools settings. */
+    clearAppStorage: () => clearAllAppStorage(),
+    // ── Remote AsyncStorage proxy (desktop browse/edit mode) ──
+    // Single-item methods share the same signature across async-storage v2/v3;
+    // batch methods go through the compat helpers (which translate to v3's
+    // getMany/setMany/removeMany) and keep the v2 tuple/pairs shape on the wire.
+    "async.getAllKeys": () => AsyncStorage.getAllKeys(),
+    "async.multiGet": params => readMany(params.keys),
+    "async.getItem": params => AsyncStorage.getItem(params.key),
+    "async.setItem": params => {
+      const {
+        key,
+        value
+      } = params;
+      return AsyncStorage.setItem(key, value);
+    },
+    "async.removeItem": params => AsyncStorage.removeItem(params.key),
+    "async.multiRemove": params => removeMany(params.keys),
+    "async.multiSet": params => writeMany(params.pairs),
+    "async.clear": () => AsyncStorage.clear()
+  }
+};