@buoy-gg/storage 5.0.0 → 6.0.0

package/README.md

@@ -2,13 +2,14 @@
 
 [![npm](https://img.shields.io/npm/v/@buoy%2Fstorage)](https://www.npmjs.com/package/@buoy/storage)
 
-Storage browser and monitoring tool for React Native development. Supports both AsyncStorage and MMKV.
+Storage browser and monitoring tool for React Native development. Supports AsyncStorage, MMKV, and Expo SecureStore.
 
 ## Features
 
-- **Storage Browser**: Browse all AsyncStorage and MMKV keys and values
+- **Storage Browser**: Browse all AsyncStorage, MMKV, and SecureStore keys and values
 - **MMKV Support**: Monitor and debug MMKV instances (including encrypted storage)
-- **Multiple Storage Types**: Support for AsyncStorage, MMKV, and multiple MMKV instances
+- **SecureStore Support**: Browse and delete Expo SecureStore values (registered keys — see below)
+- **Multiple Storage Types**: Support for AsyncStorage, MMKV (multiple instances), and SecureStore
 - **Live Event Monitoring**: Track all storage operations in real-time
 - **Edit & Delete**: Modify or remove storage items directly
 - **Add New Items**: Create new storage entries
@@ -16,6 +17,8 @@ Storage browser and monitoring tool for React Native development. Supports both
 - **Type Checking**: Validate storage value types
 - **Value Validation**: Check if values match expected patterns
 - **Search & Filter**: Search through keys and filter by status
+- **Pin & Hide**: Pin keys you're watching to the top (persisted); hide noisy keys into the filter store with one tap
+- **Inline Value Previews**: Short values and color-coded boolean badges visible without expanding cards
 - **Copy Functionality**: Easily copy keys and values
 - **Beautiful UI**: Modern, game-themed interface matching other React Buoy tools
 
@@ -327,6 +330,47 @@ storage.set('user.name', 'John Doe');
 secureStorage.set('auth.token', 'secret-token');
 ```
 
+## Expo SecureStore Support
+
+The Storage Explorer can browse and delete Expo SecureStore values (iOS Keychain / Android KeyStore).
+
+### Setup Requirements
+
+SecureStore has **no key-enumeration API** — there is no way to ask the Keychain "what's stored?". So, like MMKV instances, you register the keys you want visible. You pass the `expo-secure-store` module in, so this package has zero dependency on it (bare RN apps without Expo are unaffected).
+
+```typescript
+import * as SecureStore from 'expo-secure-store';
+import { registerSecureStoreKeys } from '@buoy/storage';
+
+registerSecureStoreKeys(SecureStore, [
+  // Bare key names
+  'auth.accessToken',
+  'auth.refreshToken',
+
+  // Keys written with options must register the SAME options,
+  // or the Keychain returns null on read
+  { key: 'session.deviceKey', keychainService: 'com.myapp.auth' },
+
+  // Biometric-protected keys are listed but NEVER auto-read,
+  // so DevTools won't trigger surprise Face ID / fingerprint prompts
+  { key: 'secure.pin', requireAuthentication: true },
+]);
+```
+
+### `registerSecureStoreKeys(module, keys)`
+
+| Param | Type | Description |
+|---|---|---|
+| `module` | `SecureStoreLike` | The `expo-secure-store` module (`import * as SecureStore`) |
+| `keys` | `(string \| { key, keychainService?, requireAuthentication?, description? })[]` | Keys to expose, with the options they were written with |
+
+Registered keys that have no stored value show up as **Missing** — handy for spotting initialization bugs. Use `unregisterSecureStoreKey(key)` to remove one from the tool (the stored value is untouched).
+
+### Platform notes
+
+- iOS Keychain values **persist across app uninstalls** (same bundle ID); Android values don't.
+- Values are read with the exact options each key was registered with — a `keychainService` mismatch reads as missing.
+
 ## API Reference
 
 ### Presets

package/lib/commonjs/index.js

@@ -147,6 +147,12 @@ Object.defineProperty(exports, "registerMMKVInstance", {
     return _MMKVInstanceRegistry.registerMMKVInstance;
   }
 });
+Object.defineProperty(exports, "registerSecureStoreKeys", {
+  enumerable: true,
+  get: function () {
+    return _SecureStoreRegistry.registerSecureStoreKeys;
+  }
+});
 Object.defineProperty(exports, "storageEventStore", {
   enumerable: true,
   get: function () {
@@ -177,6 +183,12 @@ Object.defineProperty(exports, "unregisterMMKVInstance", {
     return _MMKVInstanceRegistry.unregisterMMKVInstance;
   }
 });
+Object.defineProperty(exports, "unregisterSecureStoreKey", {
+  enumerable: true,
+  get: function () {
+    return _SecureStoreRegistry.unregisterSecureStoreKey;
+  }
+});
 Object.defineProperty(exports, "useAsyncStorageKeys", {
   enumerable: true,
   get: function () {
@@ -240,5 +252,6 @@ var _mmkvAvailability = require("./storage/utils/mmkvAvailability");
 var _mmkvTypeDetection = require("./storage/utils/mmkvTypeDetection");
 var _storageTimeTravelUtils = require("./storage/utils/storageTimeTravelUtils");
 var _MMKVInstanceRegistry = require("./storage/utils/MMKVInstanceRegistry");
+var _SecureStoreRegistry = require("./storage/utils/SecureStoreRegistry");
 var _storageSyncAdapter = require("./storage/sync/storageSyncAdapter");
 var _storageEventStore = require("./storage/stores/storageEventStore");

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

@@ -13,18 +13,15 @@ var _StorageFilterCards = require("./StorageFilterCards");
 var _useAsyncStorageKeys = require("../hooks/useAsyncStorageKeys");
 var _AsyncStorageListener = require("../utils/AsyncStorageListener");
 var _useMMKVKeys = require("../hooks/useMMKVKeys");
+var _useSecureStoreKeys = require("../hooks/useSecureStoreKeys");
 var _useMMKVInstances = require("../hooks/useMMKVInstances");
-var _mmkvAvailability = require("../utils/mmkvAvailability");
 var _StorageActionButtons = require("./StorageActionButtons");
 var _SelectionActionBar = require("./SelectionActionBar");
+var _MMKVListener = require("../utils/MMKVListener");
 var _license = require("@buoy-gg/license");
 var _jsxRuntime = require("react/jsx-runtime");
-// Conditionally import MMKV listener
-let addMMKVListener;
-if ((0, _mmkvAvailability.isMMKVAvailable)()) {
-  const listener = require("../utils/MMKVListener");
-  addMMKVListener = listener.addMMKVListener;
-}
+// Pure JS (no react-native-mmkv dependency) — works with any registered
+// instance, including remote-backed wrappers on the desktop dashboard.
 
 // Import shared Game UI components
 
@@ -123,20 +120,29 @@ function GameUIStorageBrowser({
     return allMMKVKeys.filter(k => k.instanceId === selectedMMKVInstance);
   }, [allMMKVKeys, selectedMMKVInstance]);
 
-  // Merge storage keys from AsyncStorage and MMKV
+  // Use SecureStore hook — only surfaces keys declared via registerSecureStoreKeys()
+  const {
+    storageKeys: secureStorageKeys,
+    isLoading: isLoadingSecure,
+    error: secureError,
+    refresh: refreshSecure
+  } = (0, _useSecureStoreKeys.useSecureStoreKeys)();
+
+  // Merge storage keys from AsyncStorage, MMKV, and SecureStore
   const allStorageKeys = (0, _react.useMemo)(() => {
-    return [...asyncStorageKeys, ...mmkvStorageKeys];
-  }, [asyncStorageKeys, mmkvStorageKeys]);
+    return [...asyncStorageKeys, ...mmkvStorageKeys, ...secureStorageKeys];
+  }, [asyncStorageKeys, mmkvStorageKeys, secureStorageKeys]);
 
   // Determine loading and error states
-  const isLoading = isLoadingAsync || isLoadingMMKV;
-  const error = asyncError || mmkvError;
+  const isLoading = isLoadingAsync || isLoadingMMKV || isLoadingSecure;
+  const error = asyncError || mmkvError || secureError;
 
   // Combined refresh function
   const refresh = (0, _react.useCallback)(() => {
     refreshAsync();
     refreshMMKV();
-  }, [refreshAsync, refreshMMKV]);
+    refreshSecure();
+  }, [refreshAsync, refreshMMKV, refreshSecure]);
 
   // Generate unique identifier for a storage key
   const getKeyIdentifier = (0, _react.useCallback)(storageKey => {
@@ -249,13 +255,10 @@ function GameUIStorageBrowser({
     };
   }, [refreshAsync]);
 
-  // Auto-refresh on MMKV storage events (only if MMKV is available)
+  // Auto-refresh on MMKV storage events
   (0, _react.useEffect)(() => {
-    if (!(0, _mmkvAvailability.isMMKVAvailable)() || !addMMKVListener) {
-      return; // Skip if MMKV not available
-    }
     let timeoutId;
-    const unsubscribe = addMMKVListener(event => {
+    const unsubscribe = (0, _MMKVListener.addMMKVListener)(event => {
       // Only refresh if event is for the selected instance
       if (event.instanceId === selectedMMKVInstance) {
         clearTimeout(timeoutId);

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

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _license = require("@buoy-gg/license");
 var _asyncStorageCompat = require("../utils/asyncStorageCompat");
+var _SecureStoreRegistry = require("../utils/SecureStoreRegistry");
 var _jsxRuntime = require("react/jsx-runtime");
 function SelectionActionBar({
   selectedKeys,
@@ -71,12 +72,19 @@ function SelectionActionBar({
           // Group keys by storage type
           const asyncKeys = selectedKeys.filter(k => k.storageType === "async");
           const mmkvKeys = selectedKeys.filter(k => k.storageType === "mmkv");
+          const secureKeys = selectedKeys.filter(k => k.storageType === "secure");
 
           // Delete AsyncStorage keys
           if (asyncKeys.length > 0) {
             await (0, _asyncStorageCompat.removeMany)(asyncKeys.map(k => k.key));
           }
 
+          // Delete SecureStore keys (via the registry, which knows each
+          // key's keychainService options)
+          for (const k of secureKeys) {
+            await _SecureStoreRegistry.secureStoreRegistry.deleteValue(k.key);
+          }
+
           // Delete MMKV keys
           if (mmkvKeys.length > 0) {
             // Group by instance

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

@@ -87,7 +87,6 @@ const StorageEventCard = exports.StorageEventCard = /*#__PURE__*/(0, _react.memo
   const actionColor = getActionColor(data.lastAction);
   const actionLabel = (0, _storageActionHelpers.translateStorageAction)(data.lastAction);
   const totalOps = data.totalOperations ?? 1;
-  const relativeTime = (0, _sharedUi.useRelativeTime)(data.lastEventTimestamp);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompactRow
   // Status section (left) - shows "Storage" with action-colored dot
   , {
@@ -104,7 +103,9 @@ const StorageEventCard = exports.StorageEventCard = /*#__PURE__*/(0, _react.memo
     showChevron: showChevron
     // Bottom right - timestamp
     ,
-    bottomRightText: relativeTime
+    bottomRightText: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.RelativeTime, {
+      timestamp: data.lastEventTimestamp
+    })
     // Interaction
     ,
     isSelected: isSelected,

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

@@ -10,7 +10,6 @@ var _mmkvAvailability = require("../utils/mmkvAvailability");
 var _jsxRuntime = require("react/jsx-runtime");
 // Feature flags - set to true when implemented
 const IS_MMKV_IMPLEMENTED = true; // ✅ MMKV support is now implemented
-const IS_SECURE_STORE_IMPLEMENTED = false;
 
 // Runtime availability checks
 const IS_MMKV_AVAILABLE = (0, _mmkvAvailability.isMMKVAvailable)();
@@ -183,7 +182,7 @@ function StorageFilterCards({
           } : {
             color: _sharedUi.macOSColors.text.muted
           }],
-          children: "Coming Soon"
+          children: displayStats.secureCount
         })]
       })]
     })]

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

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StorageKeyRow = StorageKeyRow;
+exports.StorageKeyRow = void 0;
+var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _storageQueryUtils = require("../utils/storageQueryUtils");
@@ -73,7 +74,11 @@ const formatValue = value => {
   const str = typeof value === "string" ? value : JSON.stringify(value);
   return str;
 };
-function StorageKeyRow({
+
+// Memo justified by profiling (tool-bench 2026-07-06): the browser tab
+// renders every key row on each parent render (ScrollView, no
+// virtualization) — memo keeps unchanged keys from re-rendering.
+const StorageKeyRow = exports.StorageKeyRow = /*#__PURE__*/(0, _react.memo)(function StorageKeyRow({
   storageKey,
   isExpanded,
   onPress,
@@ -315,7 +320,7 @@ function StorageKeyRow({
       })]
     })]
   });
-}
+});
 const getStorageTypeColor = storageType => {
   switch (storageType) {
     case "mmkv":

package/lib/commonjs/storage/hooks/useMMKVInstances.js

@@ -7,7 +7,7 @@ exports.useMMKVInstance = useMMKVInstance;
 exports.useMMKVInstanceExists = useMMKVInstanceExists;
 exports.useMMKVInstances = useMMKVInstances;
 var _react = require("react");
-var _mmkvAvailability = require("../utils/mmkvAvailability");
+var _MMKVInstanceRegistry = require("../utils/MMKVInstanceRegistry");
 /**
  * useMMKVInstances Hook
  *
@@ -22,12 +22,9 @@ var _mmkvAvailability = require("../utils/mmkvAvailability");
  * @see MMKVInstanceRegistry.ts for instance registration
  */
 
-// Conditionally import registry
-let mmkvInstanceRegistry;
-if ((0, _mmkvAvailability.isMMKVAvailable)()) {
-  const registry = require('../utils/MMKVInstanceRegistry');
-  mmkvInstanceRegistry = registry.mmkvInstanceRegistry;
-}
+// The registry is pure JS (no react-native-mmkv dependency) — import it
+// unconditionally so registered instances show up even without the native
+// module (e.g. remote-backed wrappers on the desktop dashboard).
 
 /**
  * Metadata about an MMKV instance with additional runtime information
@@ -72,13 +69,7 @@ function useMMKVInstances(autoRefresh = false) {
   const fetchInstances = () => {
     setIsLoading(true);
     try {
-      // Guard: Check if MMKV is available
-      if (!(0, _mmkvAvailability.isMMKVAvailable)() || !mmkvInstanceRegistry) {
-        setInstances([]);
-        setIsLoading(false);
-        return; // Silently return empty when MMKV not available
-      }
-      const allInstances = mmkvInstanceRegistry.getAll();
+      const allInstances = _MMKVInstanceRegistry.mmkvInstanceRegistry.getAll();
 
       // Enhance with metadata
       const instancesWithMetadata = allInstances.map(instanceInfo => {
@@ -165,12 +156,11 @@ function useMMKVInstances(autoRefresh = false) {
 function useMMKVInstance(instanceId) {
   const [instance, setInstance] = (0, _react.useState)(null);
   (0, _react.useEffect)(() => {
-    // Guard: Check if MMKV is available
-    if (!(0, _mmkvAvailability.isMMKVAvailable)() || !mmkvInstanceRegistry) {
+    if (!_MMKVInstanceRegistry.mmkvInstanceRegistry) {
       setInstance(null);
       return;
     }
-    const instanceInfo = mmkvInstanceRegistry.get(instanceId);
+    const instanceInfo = _MMKVInstanceRegistry.mmkvInstanceRegistry.get(instanceId);
     if (!instanceInfo) {
       setInstance(null);
       return;
@@ -210,12 +200,11 @@ function useMMKVInstance(instanceId) {
 function useMMKVInstanceExists(instanceId) {
   const [exists, setExists] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
-    // Guard: Check if MMKV is available
-    if (!(0, _mmkvAvailability.isMMKVAvailable)() || !mmkvInstanceRegistry) {
+    if (!_MMKVInstanceRegistry.mmkvInstanceRegistry) {
       setExists(false);
       return;
     }
-    setExists(mmkvInstanceRegistry.has(instanceId));
+    setExists(_MMKVInstanceRegistry.mmkvInstanceRegistry.has(instanceId));
   }, [instanceId]);
   return exists;
 }

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useMMKVKeys = useMMKVKeys;
 exports.useMultiMMKVKeys = useMultiMMKVKeys;
 var _react = require("react");
-var _mmkvAvailability = require("../utils/mmkvAvailability");
+var _mmkvTypeDetection = require("../utils/mmkvTypeDetection");
 /**
  * useMMKVKeys Hook
  *
@@ -20,17 +20,13 @@ var _mmkvAvailability = require("../utils/mmkvAvailability");
  * - No multiGet - must fetch keys individually
  */
 
+// Pure-JS utilities (no react-native-mmkv dependency) — safe to import
+// unconditionally. They operate on whatever instance objects are registered,
+// including remote-backed wrappers on the desktop dashboard.
+
 // Conditionally import MMKV types
 // Use 'any' to avoid hard dependency on react-native-mmkv
 
-// Conditionally import utilities only if MMKV is available
-let detectMMKVType;
-let isTypeMatch;
-if ((0, _mmkvAvailability.isMMKVAvailable)()) {
-  const typeDetection = require('../utils/mmkvTypeDetection');
-  detectMMKVType = typeDetection.detectMMKVType;
-  isTypeMatch = typeDetection.isTypeMatch;
-}
 /**
  * Hook to fetch and monitor keys from an MMKV instance
  *
@@ -89,14 +85,9 @@ function useMMKVKeys(instance, instanceId, requiredStorageKeys = []) {
     setIsLoading(true);
     setError(null);
     try {
-      // Guard: Check if MMKV is available
-      if (!(0, _mmkvAvailability.isMMKVAvailable)()) {
-        setStorageKeys([]);
-        setIsLoading(false);
-        return; // Silently return empty when MMKV not available
-      }
-
-      // Guard: Check if instance is provided
+      // Guard: Check if instance is provided. (No isMMKVAvailable() gate —
+      // registered instances may be remote-backed wrappers with no native
+      // module, e.g. on the desktop dashboard.)
       if (!instance) {
         setStorageKeys([]);
         setIsLoading(false);
@@ -137,7 +128,7 @@ function useMMKVKeys(instance, instanceId, requiredStorageKeys = []) {
         const {
           value,
           type
-        } = detectMMKVType(instance, key);
+        } = (0, _mmkvTypeDetection.detectMMKVType)(instance, key);
 
         // Check if this is a required key
         const requiredConfig = requiredStorageKeys.find(req => {
@@ -155,7 +146,7 @@ function useMMKVKeys(instance, instanceId, requiredStorageKeys = []) {
             status = String(value) === String(requiredConfig.expectedValue) ? 'required_present' : 'required_wrong_value';
           } else if (typeof requiredConfig === 'object' && 'expectedType' in requiredConfig) {
             // Type validation
-            status = isTypeMatch(type, requiredConfig.expectedType) ? 'required_present' : 'required_wrong_type';
+            status = (0, _mmkvTypeDetection.isTypeMatch)(type, requiredConfig.expectedType) ? 'required_present' : 'required_wrong_type';
           } else {
             // Key exists and is required (no specific validation)
             status = 'required_present';
@@ -291,7 +282,7 @@ function useMultiMMKVKeys(instances, requiredStorageKeys = []) {
           const {
             value,
             type
-          } = detectMMKVType(instance, key);
+          } = (0, _mmkvTypeDetection.detectMMKVType)(instance, key);
           const requiredConfig = requiredStorageKeys.find(req => {
             if (typeof req === 'string') return req === key;
             return req.key === key;
@@ -303,7 +294,7 @@ function useMultiMMKVKeys(instances, requiredStorageKeys = []) {
             } else if (typeof requiredConfig === 'object' && 'expectedValue' in requiredConfig) {
               status = String(value) === String(requiredConfig.expectedValue) ? 'required_present' : 'required_wrong_value';
             } else if (typeof requiredConfig === 'object' && 'expectedType' in requiredConfig) {
-              status = isTypeMatch(type, requiredConfig.expectedType) ? 'required_present' : 'required_wrong_type';
+              status = (0, _mmkvTypeDetection.isTypeMatch)(type, requiredConfig.expectedType) ? 'required_present' : 'required_wrong_type';
             } else {
               status = 'required_present';
             }

package/lib/commonjs/storage/hooks/useSecureStoreKeys.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSecureStoreKeys = useSecureStoreKeys;
+var _react = require("react");
+var _SecureStoreRegistry = require("../utils/SecureStoreRegistry");
+/**
+ * Placeholder value shown for `requireAuthentication` keys. Reading those
+ * triggers a biometric (Face ID / fingerprint) prompt, so the tool never
+ * auto-reads them — it just shows they exist.
+ */
+const BIOMETRIC_PLACEHOLDER = "•••••• (biometric protected)";
+/**
+ * Read all registered SecureStore keys into StorageKeyInfo[] for the browser.
+ *
+ * SecureStore has no enumeration API, so this only surfaces keys declared via
+ * `registerSecureStoreKeys()` (see SecureStoreRegistry). Values are read with
+ * the options each key was registered with (keychainService must match), and
+ * biometric-protected keys are listed without being read.
+ */
+function useSecureStoreKeys() {
+  const [storageKeys, setStorageKeys] = (0, _react.useState)([]);
+  const [isLoading, setIsLoading] = (0, _react.useState)(true);
+  const [error, setError] = (0, _react.useState)(null);
+  const fetchSecureStoreData = (0, _react.useCallback)(async () => {
+    const module = _SecureStoreRegistry.secureStoreRegistry.getModule();
+    const entries = _SecureStoreRegistry.secureStoreRegistry.getAll();
+    if (!module || entries.length === 0) {
+      setStorageKeys([]);
+      setIsLoading(false);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const keys = [];
+      for (const entry of entries) {
+        if (entry.options.requireAuthentication) {
+          // Never auto-read: reading would fire a biometric prompt.
+          keys.push({
+            key: entry.key,
+            value: BIOMETRIC_PLACEHOLDER,
+            storageType: "secure",
+            status: "optional_present",
+            category: "optional",
+            description: entry.description ?? "Protected by biometric authentication — value not read by DevTools",
+            ...(entry.options.keychainService && {
+              instanceId: entry.options.keychainService
+            })
+          });
+          continue;
+        }
+        let rawValue = null;
+        try {
+          rawValue = await module.getItemAsync(entry.key, entry.options);
+        } catch {
+          // Key unreadable (e.g. keychain state changed) — treat as missing.
+        }
+
+        // Parse JSON values for the DataViewer, same as the AsyncStorage hook.
+        let parsedValue = rawValue;
+        if (rawValue) {
+          try {
+            parsedValue = JSON.parse(rawValue);
+          } catch {
+            parsedValue = rawValue;
+          }
+        }
+        keys.push({
+          key: entry.key,
+          value: rawValue === null ? undefined : parsedValue,
+          storageType: "secure",
+          status: rawValue === null ? "required_missing" : "optional_present",
+          category: rawValue === null ? "required" : "optional",
+          ...(entry.description && {
+            description: entry.description
+          }),
+          ...(entry.options.keychainService && {
+            instanceId: entry.options.keychainService
+          })
+        });
+      }
+      setStorageKeys(keys);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to read SecureStore"));
+      setStorageKeys([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  // Initial fetch (registration happens at app startup, before the tool opens)
+  (0, _react.useEffect)(() => {
+    fetchSecureStoreData();
+  }, [fetchSecureStoreData]);
+  return {
+    storageKeys,
+    isLoading,
+    error,
+    refresh: fetchSecureStoreData
+  };
+}

package/lib/commonjs/storage/hooks/useStorageEvents.js

@@ -51,24 +51,38 @@ function useStorageEvents(options = {}) {
       setIsCapturing(false);
       return;
     }
-    const unsubscribe = _storageEventStore.storageEventStore.subscribeToEvents(allEvents => {
-      // Filter by storage type if specified
-      let filtered = allEvents;
-      if (storageType !== "all") {
-        filtered = allEvents.filter(e => e.storageType === storageType);
-      }
 
-      // Limit events
-      if (filtered.length > maxEvents) {
-        filtered = filtered.slice(0, maxEvents);
-      }
-      setEvents(filtered);
+    // Frame-coalesced (same pattern as network's useNetworkEventList):
+    // bursts of storage writes land as ONE commit per frame instead of
+    // one per emission — the dominant live-churn cost measured on the
+    // network tool (tool-bench 2026-07-06).
+    let rafId = null;
+    let pending = null;
+    const unsubscribe = _storageEventStore.storageEventStore.subscribeToEvents(allEvents => {
+      pending = allEvents;
+      if (rafId != null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        if (!pending) return;
+        // Filter by storage type if specified
+        let filtered = pending;
+        pending = null;
+        if (storageType !== "all") {
+          filtered = filtered.filter(e => e.storageType === storageType);
+        }
+        // Limit events
+        if (filtered.length > maxEvents) {
+          filtered = filtered.slice(0, maxEvents);
+        }
+        setEvents(filtered);
+      });
     });
 
     // Mark as capturing after successful subscription
     setIsCapturing(true);
     return () => {
       unsubscribe();
+      if (rafId != null) cancelAnimationFrame(rafId);
       // Note: Don't set isCapturing=false here because we might be
       // re-subscribing due to dependency change, not actually stopping
     };