@buoy-gg/storage 7.0.32 → 7.0.34

package/lib/commonjs/storage/utils/snapshotProvider.js

@@ -108,24 +108,12 @@ async function capture() {
 }
 async function restore(data, options) {
   const snapshot = data;
-  const excludedSet = new Set(options?.excludeKeys ?? []);
-  const includedSet = options?.includeKeys ? new Set(options.includeKeys) : null;
+  const scope = (0, _sharedUi.createRestoreScope)(options);
   /** True when this item may be touched (scope + exclusions agree). */
-  const touch = key => !excludedSet.has(key) && (!includedSet || includedSet.has(key));
-  let excludedHits = 0;
-  const result = {
-    ok: true,
-    applied: 0,
-    skipped: [],
-    warnings: []
-  };
+  const touch = scope.touch;
+  const result = (0, _sharedUi.emptyRestoreResult)();
   if (!snapshot) {
-    return {
-      ok: false,
-      applied: 0,
-      skipped: [],
-      warnings: ["empty storage snapshot"]
-    };
+    return (0, _sharedUi.failedRestore)("empty storage snapshot");
   }
 
   // ── AsyncStorage: delete app keys missing from the snapshot, write the rest ──
@@ -134,7 +122,7 @@ async function restore(data, options) {
     const snapKeys = new Set(snapPairs.map(([k]) => k));
     const liveKeys = (await _asyncStorage.default.getAllKeys()).filter(k => !(0, _sharedUi.isDevToolsStorageKey)(k));
     const toRemove = liveKeys.filter(k => !snapKeys.has(k) && touch(`async:${k}`));
-    excludedHits += (snapshot.async ?? []).length - snapPairs.length;
+    scope.countExcluded((snapshot.async ?? []).length - snapPairs.length);
     if (toRemove.length > 0) await (0, _asyncStorageCompat.removeMany)(toRemove);
     if (snapPairs.length > 0) await (0, _asyncStorageCompat.writeMany)(snapPairs);
     result.applied += snapPairs.length + toRemove.length;
@@ -167,10 +155,7 @@ async function restore(data, options) {
       const snapKeys = new Set(entries.map(e => e.key));
       const liveKeys = instance.getAllKeys().filter(key => !(0, _sharedUi.isDevToolsStorageKey)(key));
       for (const key of liveKeys) {
-        if (!touch(`mmkv:${id}/${key}`)) {
-          excludedHits += 1;
-          continue;
-        }
+        if (!scope.allows(`mmkv:${id}/${key}`)) continue;
         if (!snapKeys.has(key)) {
           deleteMMKVKey(instance, key);
           result.applied += 1;
@@ -201,10 +186,7 @@ async function restore(data, options) {
     key,
     options
   } of _SecureStoreRegistry.secureStoreRegistry.getAll()) {
-    if (!touch(`secure:${key}`)) {
-      excludedHits += 1;
-      continue;
-    }
+    if (!scope.allows(`secure:${key}`)) continue;
     if (options.requireAuthentication) {
       if (key in secureSnap) {
         result.skipped.push({
@@ -237,20 +219,14 @@ async function restore(data, options) {
       });
     }
   }
-  if (excludedHits > 0) {
-    result.warnings.push(`${excludedHits} item(s) excluded by you`);
-  }
+  const excludedWarning = scope.excludedWarning("item(s)");
+  if (excludedWarning) result.warnings.push(excludedWarning);
   return result;
 }
 
 /** Wipe to fresh-install state (Buoy keys preserved). Used by baseline restore. */
 async function clear() {
-  const result = {
-    ok: true,
-    applied: 0,
-    skipped: [],
-    warnings: []
-  };
+  const result = (0, _sharedUi.emptyRestoreResult)();
   try {
     await (0, _clearAllStorage.clearAllAppStorage)();
     result.applied += 1;
@@ -301,40 +277,24 @@ async function clear() {
   return result;
 }
 const ITEM_RENDER_CHAR_LIMIT = 256 * 1024;
+
+/**
+ * Storage values are strings (or MMKV primitives): identity equality and a
+ * character-length size gate are the right tests, not a deep walk.
+ */
 function classifyValue(key, label, oldValue, newValue, inOld, inNew) {
-  if (!inNew) return {
+  return (0, _sharedUi.classifyPreviewItem)({
     key,
     label,
-    verdict: "removed",
-    oldValue
-  };
-  if (!inOld) return {
-    key,
-    label,
-    verdict: "added",
-    newValue
-  };
-  if (Object.is(oldValue, newValue)) return {
-    key,
-    label,
-    verdict: "unchanged"
-  };
-  const tooLarge = typeof oldValue === "string" && oldValue.length > ITEM_RENDER_CHAR_LIMIT || typeof newValue === "string" && newValue.length > ITEM_RENDER_CHAR_LIMIT;
-  if (tooLarge) {
-    return {
-      key,
-      label,
-      verdict: "too-large",
-      reason: "value too large to render a diff — restore still applies it"
-    };
-  }
-  return {
-    key,
-    label,
-    verdict: "changed",
     oldValue,
-    newValue
-  };
+    newValue,
+    inOld,
+    inNew
+  }, {
+    equal: Object.is,
+    tooLarge: value => typeof value === "string" && value.length > ITEM_RENDER_CHAR_LIMIT,
+    tooLargeReason: "value too large to render a diff — restore still applies it"
+  });
 }
 
 /** Per-key restore preview across all three backends. */
@@ -356,46 +316,31 @@ async function previewItems(target, base) {
   // ── AsyncStorage ──
   const oldAsync = new Map(baseData.async ?? []);
   const newAsync = new Map(targetData.async ?? []);
-  for (const key of new Set([...oldAsync.keys(), ...newAsync.keys()])) {
+  for (const key of (0, _sharedUi.unionKeys)(oldAsync, newAsync)) {
     if ((0, _sharedUi.isDevToolsStorageKey)(key)) continue;
     items.push(classifyValue(`async:${key}`, key, oldAsync.get(key), newAsync.get(key), oldAsync.has(key), newAsync.has(key)));
   }
 
   // ── MMKV ──
-  const instanceIds = new Set([...Object.keys(baseData.mmkv ?? {}), ...Object.keys(targetData.mmkv ?? {})]);
-  for (const id of instanceIds) {
+  for (const id of (0, _sharedUi.unionKeys)(baseData.mmkv, targetData.mmkv)) {
     const registered = liveMode ? _MMKVInstanceRegistry.mmkvInstanceRegistry.get(id) : null;
     const instanceUnavailable = liveMode && !registered;
     const readOnly = liveMode && registered?.instance.isReadOnly === true;
     const oldEntries = new Map((baseData.mmkv?.[id] ?? []).map(e => [e.key, e]));
     const newEntries = new Map((targetData.mmkv?.[id] ?? []).map(e => [e.key, e]));
-    for (const key of new Set([...oldEntries.keys(), ...newEntries.keys()])) {
+    for (const key of (0, _sharedUi.unionKeys)(oldEntries, newEntries)) {
       if ((0, _sharedUi.isDevToolsStorageKey)(key)) continue;
       const itemKey = `mmkv:${id}/${key}`;
       const label = `${id} · ${key}`;
       const oldE = oldEntries.get(key);
       const newE = newEntries.get(key);
       let item = classifyValue(itemKey, label, oldE?.value, newE?.value, oldEntries.has(key), newEntries.has(key));
-      if (item.verdict !== "unchanged") {
-        if (instanceUnavailable) {
-          item = {
-            ...item,
-            verdict: "wont-apply",
-            reason: "MMKV instance not registered"
-          };
-        } else if (readOnly) {
-          item = {
-            ...item,
-            verdict: "wont-apply",
-            reason: "MMKV instance registered read-only"
-          };
-        } else if (newE?.valueType === "buffer" || oldE?.valueType === "buffer") {
-          item = {
-            ...item,
-            verdict: "wont-apply",
-            reason: "ArrayBuffer values cannot be restored"
-          };
-        }
+      if (instanceUnavailable) {
+        item = (0, _sharedUi.wontApply)(item, "MMKV instance not registered");
+      } else if (readOnly) {
+        item = (0, _sharedUi.wontApply)(item, "MMKV instance registered read-only");
+      } else if (newE?.valueType === "buffer" || oldE?.valueType === "buffer") {
+        item = (0, _sharedUi.wontApply)(item, "ArrayBuffer values cannot be restored");
       }
       items.push(item);
     }
@@ -405,22 +350,14 @@ async function previewItems(target, base) {
   const oldSecure = baseData.secure ?? {};
   const newSecure = targetData.secure ?? {};
   const registeredSecure = liveMode ? new Map(_SecureStoreRegistry.secureStoreRegistry.getAll().map(e => [e.key, e])) : null;
-  for (const key of new Set([...Object.keys(oldSecure), ...Object.keys(newSecure)])) {
+  for (const key of (0, _sharedUi.unionKeys)(oldSecure, newSecure)) {
     let item = classifyValue(`secure:${key}`, key, oldSecure[key], newSecure[key], key in oldSecure, key in newSecure);
-    if (liveMode && item.verdict !== "unchanged") {
+    if (liveMode) {
       const entry = registeredSecure?.get(key);
       if (!entry) {
-        item = {
-          ...item,
-          verdict: "wont-apply",
-          reason: "key no longer registered with registerSecureStoreKeys"
-        };
+        item = (0, _sharedUi.wontApply)(item, "key no longer registered with registerSecureStoreKeys");
       } else if (entry.options.requireAuthentication) {
-        item = {
-          ...item,
-          verdict: "wont-apply",
-          reason: "biometric-protected keys are never written"
-        };
+        item = (0, _sharedUi.wontApply)(item, "biometric-protected keys are never written");
       }
     }
     items.push(item);

package/lib/module/preset.js

@@ -18,6 +18,7 @@
  */
 
 import { StorageIcon } from "@buoy-gg/floating-tools-core";
+import { createToolFactory, defineToolPreset } from "@buoy-gg/shared-ui";
 import { StorageModalWithTabs } from "./storage/components/StorageModalWithTabs";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -28,7 +29,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * - Live storage event monitoring
  * - Required key validation
  */
-export const storageToolPreset = {
+export const storageToolPreset = defineToolPreset({
   id: "storage",
   name: "STORAGE",
   description: "AsyncStorage browser",
@@ -43,7 +44,7 @@ export const storageToolPreset = {
     requiredStorageKeys: [],
     enableSharedModalDimensions: false
   }
-};
+});
 
 /**
  * Create a custom AsyncStorage browser tool configuration.
@@ -69,21 +70,7 @@ export const storageToolPreset = {
  * });
  * ```
  */
-export function createStorageTool(options) {
-  return {
-    id: options?.id || "storage",
-    name: options?.name || "STORAGE",
-    description: options?.description || "AsyncStorage browser",
-    slot: "both",
-    icon: ({
-      size
-    }) => /*#__PURE__*/_jsx(StorageIcon, {
-      size: size
-    }),
-    component: StorageModalWithTabs,
-    props: {
-      requiredStorageKeys: options?.requiredStorageKeys || [],
-      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
-    }
-  };
-}
+export const createStorageTool = createToolFactory(storageToolPreset, options => ({
+  requiredStorageKeys: options.requiredStorageKeys || [],
+  enableSharedModalDimensions: options.enableSharedModalDimensions ?? false
+}));

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

@@ -3,7 +3,7 @@
 import { useMemo, useCallback, useState, useEffect, useRef } from "react";
 import { StyleSheet, Text, View, TouchableOpacity, ScrollView, Alert } from "react-native";
 import { absoluteFill, useLimit, TIER_LIMITS } from "@buoy-gg/shared-ui";
-import { Database, Zap, ProBadge, ProUpgradeModal } from "@buoy-gg/shared-ui";
+import { Database, Zap, ProBadge, ProUpgradeModal, ToolEmptyState, resolveListEmptyState } from "@buoy-gg/shared-ui";
 import { isDevToolsStorageKey } from "@buoy-gg/shared-ui";
 import { StorageKeySection, storageRowId } from "./StorageKeySection";
 import { StorageKeyDetailScreen } from "./StorageKeyDetailScreen";
@@ -859,19 +859,60 @@ export function GameUIStorageBrowser({
       children: searchQuery ? "Upgrade to Pro to search your full storage" : "Upgrade to Pro to unlock full storage access"
     })]
   }) : null;
-  const emptyStateNode = /*#__PURE__*/_jsxs(View, {
-    style: styles.emptyState,
-    children: [/*#__PURE__*/_jsx(Database, {
-      size: 32,
-      color: night.color.textTertiary
-    }), /*#__PURE__*/_jsx(Text, {
-      style: styles.emptyTitle,
-      children: searchQuery ? "No results found" : activeFilter === "all" ? "No valid keys found" : activeFilter === "missing" ? "No missing keys" : "No issues found"
-    }), /*#__PURE__*/_jsx(Text, {
-      style: styles.emptySubtitle,
-      children: searchQuery ? `No keys matching "${searchQuery}"` : activeFilter === "all" ? "All keys have issues or are missing" : activeFilter === "missing" ? "All required keys are present" : "All storage keys are correctly configured"
-    })]
-  });
+  const emptyStateNode = (() => {
+    // Short-circuits on the first real key, so this costs nothing.
+    const hasAnyKeys = allStorageKeys.some(k => !isDevToolsStorageKey(k.key));
+
+    // Three causes here are unlike any other tool's: an empty MISSING or
+    // ISSUES list is a PASS, not a failure, and an empty VALID list means
+    // everything is broken. Those skip the shared resolver and say so.
+    let content;
+    if (searchQuery || !hasAnyKeys) {
+      content = resolveListEmptyState({
+        subject: "keys",
+        verb: "registered",
+        search: searchQuery,
+        total: hasAnyKeys ? 1 : 0,
+        waiting: {
+          // Previously this fell into the "all" branch and claimed every key
+          // had an issue — of the zero keys that exist.
+          otto: "empty",
+          title: "No storage keys",
+          message: "Nothing is registered for this tool to read."
+        }
+      });
+      if (searchQuery && hasAnyKeys) {
+        // No count: the pre-search total would mean re-running the whole key
+        // pipeline a second time for a number the sentence does not need.
+        content = {
+          ...content,
+          message: "No keys match. Clear the search to see them."
+        };
+      }
+    } else if (activeFilter === "missing") {
+      content = {
+        otto: "thumbsup",
+        title: "No missing keys",
+        message: "All required keys are present"
+      };
+    } else if (activeFilter === "issues") {
+      content = {
+        otto: "cool",
+        title: "No issues found",
+        message: "All storage keys are correctly configured"
+      };
+    } else {
+      content = {
+        otto: "broken",
+        title: "No valid keys found",
+        message: "All keys have issues or are missing"
+      };
+    }
+    return /*#__PURE__*/_jsx(ToolEmptyState, {
+      ...content,
+      testID: "buoy-storage-keys-empty"
+    });
+  })();
   const upgradeModalNode = /*#__PURE__*/_jsx(ProUpgradeModal, {
     visible: showUpgradeModal,
     onClose: () => setShowUpgradeModal(false),

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

@@ -1,9 +1,9 @@
 "use strict";
 
 import { useState, useCallback, useEffect, useRef, useMemo } from "react";
-import { Text, View, TouchableOpacity, StyleSheet, FlatList, Alert } from "react-native";
+import { View, TouchableOpacity, StyleSheet, FlatList, Alert } from "react-native";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { JsModal, ModalHeader, TabSelector, parseValue, devToolsStorageKeys, macOSColors, night, Database, Filter, RefreshCw, Search, SearchBar, PowerToggleButton, ToolbarCopyButton, ToolbarClearButton, truncatePayload, TickProvider, useLimit, TIER_LIMITS, windowDragProps } from "@buoy-gg/shared-ui";
+import { JsModal, ModalHeader, TabSelector, parseValue, devToolsStorageKeys, macOSColors, night, ToolEmptyState, Filter, RefreshCw, Search, SearchBar, PowerToggleButton, ToolbarCopyButton, ToolbarClearButton, truncatePayload, TickProvider, useLimit, TIER_LIMITS, windowDragProps, usePersistedState } from "@buoy-gg/shared-ui";
 import { StorageBrowserMode } from "./StorageBrowserMode";
 import { StorageTypeFilterBar, countByStorageType } from "./StorageTypeFilterBar";
 import { clearAllAppStorage, clearAllStorageIncludingDevTools } from "../utils/clearAllStorage";
@@ -24,6 +24,41 @@ import { useIsPro } from "@buoy-gg/license";
  */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const FREE_TIER_EVENT_LIMIT = TIER_LIMITS["storage.events"].free;
+/**
+ * Persistence recipes. These keys were always written straight to
+ * AsyncStorage (not the FileSystem-first persistentStorage), so they keep
+ * that backend — a user's saved tab, filters and pins survive the upgrade.
+ */
+const ASYNC_STORAGE_BACKEND = {
+  getItem: key => AsyncStorage.getItem(key),
+  setItem: (key, value) => AsyncStorage.setItem(key, value)
+};
+const TAB_PERSISTENCE = {
+  storage: ASYNC_STORAGE_BACKEND,
+  // Stored as the bare tab name, not JSON.
+  parse: raw => raw === "browser" || raw === "events" ? raw : undefined,
+  serialize: tab => tab
+};
+const BOOLEAN_PERSISTENCE = {
+  storage: ASYNC_STORAGE_BACKEND,
+  // Stored as "true" / "false".
+  parse: raw => raw === "true",
+  serialize: value => value.toString()
+};
+const STRING_SET_PERSISTENCE = {
+  storage: ASYNC_STORAGE_BACKEND,
+  parse: raw => new Set(JSON.parse(raw)),
+  serialize: set => JSON.stringify(Array.from(set))
+};
+const IGNORED_PATTERNS_PERSISTENCE = {
+  ...STRING_SET_PERSISTENCE,
+  parse: raw => {
+    const filters = JSON.parse(raw);
+    // Always ensure @react_buoy is included to hide dev tool keys
+    if (!filters.includes("@react_buoy")) filters.push("@react_buoy");
+    return new Set(filters);
+  }
+};
 export function StorageModalWithTabs({
   visible,
   onClose,
@@ -38,7 +73,7 @@ export function StorageModalWithTabs({
 }) {
   const isPro = useIsPro();
   const eventLimit = useLimit("storage.events");
-  const [activeTab, setActiveTab] = useState("browser");
+  const [activeTab, setActiveTab] = usePersistedState(devToolsStorageKeys.storage.activeTab(), "browser", TAB_PERSISTENCE);
   useEffect(() => {
     onTabChange?.(activeTab);
   }, [activeTab, onTabChange]);
@@ -54,7 +89,7 @@ export function StorageModalWithTabs({
   const [isSearchActive, setIsSearchActive] = useState(false);
 
   // Local state to control subscription (true = subscribed, false = unsubscribed)
-  const [isListeningEnabled, setIsListeningEnabled] = useState(true);
+  const [isListeningEnabled, setIsListeningEnabled] = usePersistedState(devToolsStorageKeys.storage.isMonitoring(), true, BOOLEAN_PERSISTENCE);
 
   // Event Listener state - using centralized store via hook
   // Pass enabled option to control subscription - this allows events tool to
@@ -71,8 +106,9 @@ export function StorageModalWithTabs({
   const [selectedHistoryEventIndex, setSelectedHistoryEventIndex] = useState(null);
   const [selectedEventIndex, setSelectedEventIndex] = useState(0);
   const [showFilters, setShowFilters] = useState(false);
-  const [ignoredPatterns, setIgnoredPatterns] = useState(new Set(["@react_buoy", "@RNAsyncStorage", "redux-persist", "persist:"]) // Auto-hide dev tool keys by default
-  );
+  const [ignoredPatterns, setIgnoredPatterns] = usePersistedState(devToolsStorageKeys.storage.eventFilters(),
+  // Auto-hide dev tool keys by default
+  new Set(["@react_buoy", "@RNAsyncStorage", "redux-persist", "persist:"]), IGNORED_PATTERNS_PERSISTENCE);
   /**
    * Which backend both tabs are looking at.
    *
@@ -88,12 +124,8 @@ export function StorageModalWithTabs({
   const [storageTypeFilter, setStorageTypeFilter] = useState("all");
   const [enabledStorageTypes, setEnabledStorageTypes] = useState(new Set(['async', 'mmkv', 'secure']) // All enabled by default
   );
-  const [pinnedKeys, setPinnedKeys] = useState(new Set());
+  const [pinnedKeys, setPinnedKeys] = usePersistedState(devToolsStorageKeys.storage.pinnedKeys(), new Set(), STRING_SET_PERSISTENCE);
   const lastEventRef = useRef(null);
-  const hasLoadedFilters = useRef(false);
-  const hasLoadedPins = useRef(false);
-  const hasLoadedTabState = useRef(false);
-  const hasLoadedMonitoringState = useRef(false);
 
   // isListening = enabled and capturing (has subscribers)
   const isListening = isListeningEnabled && isCapturing;
@@ -108,140 +140,6 @@ export function StorageModalWithTabs({
 
   // 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";
-          setIsListeningEnabled(shouldMonitor);
-        }
-        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);
-          // Always ensure @react_buoy is included to hide dev tool keys
-          if (!filters.includes("@react_buoy")) {
-            filters.push("@react_buoy");
-          }
-          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]);
-
-  // 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
 
@@ -671,18 +569,26 @@ export function StorageModalWithTabs({
       const filtered = storageTypeFilter !== "all";
       return /*#__PURE__*/_jsxs(View, {
         style: styles.flexFill,
-        children: [eventTypeFilterBar, /*#__PURE__*/_jsxs(View, {
-          style: styles.emptyState,
-          children: [/*#__PURE__*/_jsx(Database, {
-            size: 48,
-            color: night.color.textTertiary
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.emptyTitle,
-            children: !isListening ? "Event listener is paused" : filtered ? `No ${storageTypeFilter} events` : "No storage events yet"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.emptySubtitle,
-            children: !isListening ? "Press play to start monitoring" : filtered ? "Other backends have events — pick All Types to see them" : "Storage operations will appear here"
-          })]
+        children: [eventTypeFilterBar, /*#__PURE__*/_jsx(ToolEmptyState, {
+          testID: "buoy-storage-events-empty"
+          // Three literal causes, no search on this tab — so it renders
+          // through the shared shell without the shared resolver. The
+          // backend pills need their own sentence naming the pill that
+          // undoes them, which the generic "Filtered Out" would drop.
+          ,
+          ...(!isListening ? {
+            otto: "paused",
+            title: "Event listener is paused",
+            message: "Press play to start monitoring"
+          } : filtered ? {
+            otto: "filtering",
+            title: `No ${storageTypeFilter} events`,
+            message: "Other backends have events — pick All Types to see them"
+          } : {
+            otto: "listening",
+            title: "No storage events yet",
+            message: "Storage operations will appear here"
+          })
         })]
       });
     }