@buoy-gg/storage 7.0.28 → 7.0.30

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

@@ -20,6 +20,7 @@ var _StorageActionButtons = require("./StorageActionButtons");
 var _SelectionActionBar = require("./SelectionActionBar");
 var _MMKVListener = require("../utils/MMKVListener");
 var _storageBrowserRefresh = require("../utils/storageBrowserRefresh");
+var _deleteStorageKeys = require("../utils/deleteStorageKeys");
 var _setStorageValue = require("../utils/setStorageValue");
 var _license = require("@buoy-gg/license");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -256,6 +257,42 @@ function GameUIStorageBrowser({
     });
   }, [handleSaveValue]);
 
+  /**
+   * Delete ONE key, from its own card.
+   *
+   * Routed through `deleteStorageKeys` exactly like the selection bar, so the
+   * per-backend fan-out keeps having a single implementation — the last time
+   * that fan-out was wrong (an MMKV method renamed upstream) it was wrong in
+   * silence, and a second copy is how one backend quietly stops being deleted.
+   *
+   * Pro is checked here rather than on the button because it's an upsell, not
+   * a capability: the row shows the action and explains the wall on press.
+   */
+  const handleDeleteKey = (0, _react.useCallback)(storageKey => {
+    if (!isPro) {
+      setShowUpgradeModal(true);
+      return;
+    }
+    _reactNative.Alert.alert("Delete key", `Delete "${storageKey.key}"? This cannot be undone.`, [{
+      text: "Cancel",
+      style: "cancel"
+    }, {
+      text: "Delete",
+      style: "destructive",
+      onPress: async () => {
+        try {
+          await (0, _deleteStorageKeys.deleteStorageKeys)([storageKey], mmkvInstances.map(inst => ({
+            id: inst.id,
+            instance: inst.instance
+          })));
+          refresh();
+        } catch (error) {
+          _reactNative.Alert.alert("Error", `Failed to delete key: ${error}`);
+        }
+      }
+    }]);
+  }, [isPro, mmkvInstances, refresh]);
+
   /** Permanent, per-key reasons a value can't be edited (never the licence). */
   const editBlockedFor = (0, _react.useCallback)(storageKey => (0, _setStorageValue.storageEditBlockedReason)(storageKey, mmkvInstances), [mmkvInstances]);
 
@@ -644,6 +681,9 @@ function GameUIStorageBrowser({
         contentContainerStyle: styles.instanceNavbarScroll,
         children: [(isPro || mmkvInstances.length === 1) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
           onPress: () => setSelectedMMKVInstance(null),
+          testID: "buoy-storage-instance-all",
+          accessibilityRole: "button",
+          accessibilityLabel: "All MMKV instances",
           style: [styles.instanceNavbarButton, selectedMMKVInstance === null && styles.instanceNavbarButtonActive],
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.HardDrive, {
             size: 12,
@@ -661,6 +701,9 @@ function GameUIStorageBrowser({
         }), mmkvInstances.map((inst, index) => {
           const isLocked = index >= mmkvInstanceLimit;
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            testID: `buoy-storage-instance-${inst.id}`,
+            accessibilityRole: "button",
+            accessibilityLabel: `MMKV instance ${inst.id}`,
             onPress: () => {
               if (isLocked) {
                 setShowUpgradeModal(true);
@@ -728,6 +771,8 @@ function GameUIStorageBrowser({
     style: styles.limitBanner,
     onPress: () => setShowUpgradeModal(true),
     activeOpacity: 0.8,
+    testID: "buoy-storage-locked-banner",
+    accessibilityRole: "button",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.limitBannerContent,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -765,7 +810,11 @@ function GameUIStorageBrowser({
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.root,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView
+    // Named because `by.type("RCTScrollView")` doesn't match on Fabric
+    // (renamed class) — automation scrolls below-the-fold rows by this id.
+    , {
+      testID: "buoy-storage-scroll",
       style: styles.scrollContainer,
       contentContainerStyle: styles.container,
       showsVerticalScrollIndicator: false,
@@ -815,6 +864,7 @@ function GameUIStorageBrowser({
           onHideKey: key => handleHideKeys([key]),
           onEditKey: setEditingKey,
           onToggleKey: handleToggleKey,
+          onDeleteKey: handleDeleteKey,
           editBlockedFor: editBlockedFor,
           pinnedKeys: pinnedKeys,
           onTogglePin: onTogglePin

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

@@ -86,6 +86,9 @@ function SelectionActionBar({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
         style: styles.selectAllButton,
         onPress: allSelected ? onClearSelection : onSelectAll,
+        testID: "buoy-storage-select-all",
+        accessibilityLabel: allSelected ? "Deselect all keys" : "Select all keys",
+        accessibilityRole: "button",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CheckSquare, {
           size: 14,
           color: allSelected ? _sharedUi.night.color.accent : _sharedUi.night.color.textSecondary
@@ -105,6 +108,7 @@ function SelectionActionBar({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CopyButton, {
         value: getCopyData(),
         size: 14,
+        testID: "buoy-storage-selection-copy",
         buttonStyle: styles.actionButton,
         colors: {
           idle: _sharedUi.night.color.accent,
@@ -114,6 +118,9 @@ function SelectionActionBar({
       }), onHideKeys && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         style: styles.actionButton,
         onPress: handleHideSelected,
+        testID: "buoy-storage-selection-hide",
+        accessibilityLabel: "Hide selected keys",
+        accessibilityRole: "button",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EyeOff, {
           size: 14,
           color: _sharedUi.night.color.warning
@@ -121,6 +128,9 @@ function SelectionActionBar({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         style: styles.actionButton,
         onPress: handleDeleteSelected,
+        testID: "buoy-storage-selection-delete",
+        accessibilityLabel: "Delete selected keys",
+        accessibilityRole: "button",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
           size: 14,
           color: _sharedUi.night.color.danger

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

@@ -133,6 +133,9 @@ function StorageActionButtons({
     style: styles.container,
     children: [onToggleSelectMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       onPress: onToggleSelectMode,
+      testID: "buoy-storage-select-mode",
+      accessibilityLabel: isSelectMode ? "Exit selection mode" : "Select keys",
+      accessibilityRole: "button",
       style: [styles.actionButton, isSelectMode && styles.actionButtonActive],
       children: isSelectMode ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.selectModeActiveContainer,
@@ -150,6 +153,7 @@ function StorageActionButtons({
     }), !isSelectMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CopyButton, {
       value: copyValue,
       size: 16,
+      testID: "buoy-storage-export-copy",
       buttonStyle: styles.actionButton,
       colors: {
         idle: _sharedUi.night.color.textSecondary,
@@ -158,6 +162,9 @@ function StorageActionButtons({
       }
     }), !isSelectMode && showClearAll && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       onPress: handleClearAll,
+      testID: "buoy-storage-clear-all",
+      accessibilityLabel: "Clear all storage",
+      accessibilityRole: "button",
       style: styles.actionButton,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
         size: 16,
@@ -165,6 +172,9 @@ function StorageActionButtons({
       })
     }), !isSelectMode && showClearAsync && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       onPress: handleClearAsyncStorage,
+      testID: "buoy-storage-clear-async",
+      accessibilityLabel: "Clear AsyncStorage",
+      accessibilityRole: "button",
       style: styles.actionButton,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
         size: 16,
@@ -172,6 +182,9 @@ function StorageActionButtons({
       })
     }), !isSelectMode && showClearAllMMKV && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       onPress: handleClearAllMMKV,
+      testID: "buoy-storage-clear-mmkv-all",
+      accessibilityLabel: "Clear all MMKV instances",
+      accessibilityRole: "button",
       style: styles.actionButton,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
         size: 16,
@@ -179,6 +192,9 @@ function StorageActionButtons({
       })
     }), !isSelectMode && showClearMMKVIndividual && mmkvInstances.length === 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       onPress: () => handleClearMMKV(mmkvInstances[0].id, mmkvInstances[0].id),
+      testID: "buoy-storage-clear-mmkv",
+      accessibilityLabel: "Clear MMKV instance",
+      accessibilityRole: "button",
       style: styles.actionButton,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
         size: 16,

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

@@ -53,6 +53,7 @@ function StorageEventActionButton({
       opacity: disabled ? 0.5 : 1
     }],
     activeOpacity: 0.7,
+    testID: `buoy-storage-action-${type}`,
     accessibilityRole: "button",
     accessibilityLabel: text,
     accessibilityState: {

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

@@ -82,7 +82,8 @@ const StorageEventCard = exports.StorageEventCard = /*#__PURE__*/(0, _react.memo
   data,
   onPress,
   isSelected = false,
-  showChevron = true
+  showChevron = true,
+  testID
 }) {
   const actionColor = getActionColor(data.lastAction);
   const actionLabel = (0, _storageActionHelpers.translateStorageAction)(data.lastAction);
@@ -109,6 +110,8 @@ const StorageEventCard = exports.StorageEventCard = /*#__PURE__*/(0, _react.memo
     // Interaction
     ,
     isSelected: isSelected,
-    onPress: onPress
+    onPress: onPress,
+    testID: testID,
+    accessibilityLabel: `${actionLabel} ${data.key}`
   });
 });

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

@@ -53,6 +53,12 @@ function StorageEventFilterView({
             borderColor: _sharedUi.macOSColors.semantic.warning + '40'
           }],
           onPress: () => onToggleStorageType('async'),
+          testID: "buoy-storage-backend-async",
+          accessibilityRole: "button",
+          accessibilityLabel: "Toggle AsyncStorage capture",
+          accessibilityState: {
+            selected: enabledStorageTypes.has('async')
+          },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Database, {
             size: 16,
             color: enabledStorageTypes.has('async') ? _sharedUi.macOSColors.semantic.warning : _sharedUi.night.color.textTertiary
@@ -67,6 +73,12 @@ function StorageEventFilterView({
             borderColor: _sharedUi.macOSColors.semantic.info + '40'
           }],
           onPress: () => onToggleStorageType('mmkv'),
+          testID: "buoy-storage-backend-mmkv",
+          accessibilityRole: "button",
+          accessibilityLabel: "Toggle MMKV capture",
+          accessibilityState: {
+            selected: enabledStorageTypes.has('mmkv')
+          },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.HardDrive, {
             size: 16,
             color: enabledStorageTypes.has('mmkv') ? _sharedUi.macOSColors.semantic.info : _sharedUi.night.color.textTertiary
@@ -81,6 +93,12 @@ function StorageEventFilterView({
             borderColor: _sharedUi.macOSColors.semantic.success + '40'
           }],
           onPress: () => onToggleStorageType('secure'),
+          testID: "buoy-storage-backend-secure",
+          accessibilityRole: "button",
+          accessibilityLabel: "Toggle Secure Storage capture",
+          accessibilityState: {
+            selected: enabledStorageTypes.has('secure')
+          },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Shield, {
             size: 16,
             color: enabledStorageTypes.has('secure') ? _sharedUi.macOSColors.semantic.success : _sharedUi.night.color.textTertiary

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

@@ -48,6 +48,9 @@ function StorageFilterCards({
         }]],
         onPress: () => onFilterChange?.("all"),
         activeOpacity: 0.8,
+        testID: "buoy-storage-status-all",
+        accessibilityRole: "button",
+        accessibilityLabel: "Valid keys",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.filterValue, {
             color: _sharedUi.night.color.text
@@ -65,6 +68,9 @@ function StorageFilterCards({
         }]],
         onPress: () => onFilterChange?.("missing"),
         activeOpacity: 0.8,
+        testID: "buoy-storage-status-missing",
+        accessibilityRole: "button",
+        accessibilityLabel: "Missing keys",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.filterValue, {
             color: displayStats.missingCount > 0 ? _sharedUi.macOSColors.semantic.error : _sharedUi.night.color.textTertiary
@@ -82,6 +88,9 @@ function StorageFilterCards({
         }]],
         onPress: () => onFilterChange?.("issues"),
         activeOpacity: 0.8,
+        testID: "buoy-storage-status-issues",
+        accessibilityRole: "button",
+        accessibilityLabel: "Issues keys",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.filterValue, {
             color: displayStats.issuesCount > 0 ? _sharedUi.macOSColors.semantic.warning : _sharedUi.night.color.textTertiary

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

@@ -92,7 +92,7 @@ function StorageTreeEditor({
   } = editor;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.screen,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(EditorHeader, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolBackground, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(EditorHeader, {
       storageKey: storageKey,
       state: draft.isSaving ? "Saving…" : draft.isDirty ? "Draft · unsaved" : "In sync with device",
       dirty: draft.isDirty,
@@ -111,6 +111,7 @@ function StorageTreeEditor({
         children: summarize(draft.value)
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      testID: "buoy-storage-editor-scroll",
       style: styles.treeScroll,
       contentContainerStyle: styles.treeContent,
       keyboardShouldPersistTaps: "handled",
@@ -128,7 +129,11 @@ function StorageTreeEditor({
           ,
           showTypeFilter: false,
           onSelectionChange: editor.setSelection,
-          selectPath: draft.selectPath,
+          selectPath: draft.selectPath
+          // Its own handle root: the card that opened this editor is still
+          // mounted underneath, rendering the same value in its preview tree.
+          ,
+          testIDPrefix: "buoy-storage-editor-row",
           onRequestInlineEdit: sel => editor.openValueEditor(sel.path)
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -156,6 +161,8 @@ function StorageTreeEditor({
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
           onPress: draft.discard,
           disabled: draft.isSaving,
+          testID: "buoy-storage-editor-discard",
+          accessibilityRole: "button",
           accessibilityLabel: "Discard changes",
           style: styles.discardButton,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -165,6 +172,8 @@ function StorageTreeEditor({
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
           onPress: editor.saveAndClose,
           disabled: draft.isSaving,
+          testID: "buoy-storage-editor-save",
+          accessibilityRole: "button",
           accessibilityLabel: "Save changes",
           style: [styles.saveButton, draft.isSaving && styles.saveDisabled],
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -200,6 +209,8 @@ function EditorHeader({
     style: styles.header,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       onPress: onClose,
+      testID: "buoy-storage-editor-close",
+      accessibilityRole: "button",
       accessibilityLabel: "Close editor",
       style: styles.headerButton,
       hitSlop: {
@@ -214,7 +225,13 @@ function EditorHeader({
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.headerTitle,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text
+      // Which key this editor is pointed at. Worth a handle of its own:
+      // the editor is reached by expanding a card in a list of hundreds,
+      // and opening it on the wrong one looks exactly like opening it on
+      // the right one until a write lands somewhere unexpected.
+      , {
+        testID: "buoy-storage-editor-key",
         style: styles.headerKey,
         numberOfLines: 1,
         children: storageKey.key
@@ -224,6 +241,8 @@ function EditorHeader({
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
       onPress: onRaw,
+      testID: "buoy-storage-editor-raw",
+      accessibilityRole: "button",
       accessibilityLabel: "Edit raw JSON",
       style: styles.headerButton,
       hitSlop: {
@@ -269,8 +288,10 @@ function storageTypeColor(storageType) {
 const styles = _reactNative.StyleSheet.create({
   screen: {
     flex: 1,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent"
+    // Opaque on purpose: transparency here showed the whole key list through
+    // the editor, not just the sheet's star field. The screen paints its own
+    // ToolBackground instead — see the mount site above.
+    backgroundColor: _sharedUi.night.color.bg
   },
   header: {
     flexDirection: "row",

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

@@ -92,6 +92,7 @@ const StorageKeyRow = exports.StorageKeyRow = /*#__PURE__*/(0, _react.memo)(func
   onTogglePin,
   onEditKey,
   onToggleKey,
+  onDeleteKey,
   editBlockedReason
 }) {
   const canEdit = onEditKey != null && editBlockedReason == null;
@@ -141,6 +142,9 @@ const StorageKeyRow = exports.StorageKeyRow = /*#__PURE__*/(0, _react.memo)(func
         children: String(eventCount)
       }), eventCount > 1 && onViewHistory && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         onPress: onViewHistory,
+        testID: "buoy-storage-key-history",
+        accessibilityLabel: `View history for ${storageKey.key}`,
+        accessibilityRole: "button",
         style: styles.viewHistoryButton,
         hitSlop: {
           top: 6,
@@ -220,7 +224,14 @@ const StorageKeyRow = exports.StorageKeyRow = /*#__PURE__*/(0, _react.memo)(func
     }) : null, onTogglePin || onHideKey || canEdit ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.actionRow,
       children: [canEdit ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        style: styles.editButton,
+        style: styles.editButton
+        // One handle for both jobs on purpose: this is the card's single
+        // "change it" affordance, and which of the two it performs is the
+        // key's type, not a different control.
+        ,
+        testID: "buoy-storage-key-edit",
+        accessibilityLabel: isBoolean && onToggleKey ? `Toggle ${storageKey.key}` : `Edit ${storageKey.key}`,
+        accessibilityRole: "button",
         onPress: () => isBoolean && onToggleKey ? onToggleKey(storageKey) : onEditKey?.(storageKey),
         hitSlop: {
           top: 6,
@@ -237,6 +248,9 @@ const StorageKeyRow = exports.StorageKeyRow = /*#__PURE__*/(0, _react.memo)(func
         })]
       }) : null, onTogglePin ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
         style: [styles.actionChip, isPinned && styles.actionChipActive],
+        testID: "buoy-storage-key-pin",
+        accessibilityLabel: isPinned ? `Unpin ${storageKey.key}` : `Pin ${storageKey.key} to top`,
+        accessibilityRole: "button",
         onPress: () => onTogglePin(storageKey.key),
         hitSlop: {
           top: 6,
@@ -256,6 +270,9 @@ const StorageKeyRow = exports.StorageKeyRow = /*#__PURE__*/(0, _react.memo)(func
         })]
       }) : null, onHideKey ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
         style: styles.actionChip,
+        testID: "buoy-storage-key-hide",
+        accessibilityLabel: `Hide ${storageKey.key} from list`,
+        accessibilityRole: "button",
         onPress: () => onHideKey(storageKey),
         hitSlop: {
           top: 6,
@@ -272,6 +289,27 @@ const StorageKeyRow = exports.StorageKeyRow = /*#__PURE__*/(0, _react.memo)(func
           }],
           children: "Hide from list"
         })]
+      }) : null, canEdit && onDeleteKey ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        style: [styles.actionChip, styles.dangerChip],
+        testID: "buoy-storage-key-delete",
+        accessibilityLabel: `Delete key ${storageKey.key}`,
+        accessibilityRole: "button",
+        onPress: () => onDeleteKey(storageKey),
+        hitSlop: {
+          top: 6,
+          bottom: 6,
+          left: 6,
+          right: 6
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
+          size: 12,
+          color: _sharedUi.night.color.danger
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.actionChipText, {
+            color: _sharedUi.night.color.danger
+          }],
+          children: "Delete key"
+        })]
       }) : null]
     }) : null]
   });
@@ -284,6 +322,12 @@ const StorageKeyRow = exports.StorageKeyRow = /*#__PURE__*/(0, _react.memo)(func
   // Create checkbox element for select mode
   const selectionCheckbox = isSelectMode ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
     onPress: handleCheckboxPress,
+    testID: `buoy-storage-checkbox-${storageKey.storageType}-${storageKey.key}`,
+    accessibilityLabel: `Select ${storageKey.key}`,
+    accessibilityRole: "checkbox",
+    accessibilityState: {
+      checked: isSelected
+    },
     style: styles.checkboxContainer,
     hitSlop: {
       top: 8,
@@ -457,6 +501,9 @@ const styles = _reactNative.StyleSheet.create({
     borderWidth: 1,
     borderColor: _sharedUi.night.color.border
   },
+  dangerChip: {
+    borderColor: _sharedUi.night.color.danger + "55"
+  },
   actionChipActive: {
     backgroundColor: _sharedUi.night.color.accentSoft,
     borderColor: _sharedUi.night.color.accentBorderStrong

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

@@ -33,17 +33,32 @@ function StorageKeySection({
   onTogglePin,
   onEditKey,
   onToggleKey,
+  onDeleteKey,
   editBlockedFor
 }) {
-  const [expandedKey, setExpandedKey] = (0, _react.useState)(null);
-  const handleKeyPress = (0, _react.useCallback)(storageKey => {
-    setExpandedKey(prev => prev === storageKey.key ? null : storageKey.key);
-  }, []);
-
-  // Generate unique identifier for a storage key
+  /**
+   * Identifies a ROW, not a key name.
+   *
+   * The same name routinely exists in more than one place — an app that keeps
+   * `auth.refreshToken` in both MMKV and the keychain has two rows called
+   * that, and they are different values in different stores.
+   */
   const getKeyIdentifier = (0, _react.useCallback)(storageKey => {
     return storageKey.instanceId ? `${storageKey.storageType}-${storageKey.instanceId}-${storageKey.key}` : `${storageKey.storageType}-${storageKey.key}`;
   }, []);
+
+  /**
+   * Which ROW is expanded — by identifier, not by key name.
+   *
+   * Keyed by name, tapping one of a pair of same-named rows opened BOTH of
+   * them: two cards, two value trees, and two Edit buttons, one of which
+   * writes to a store you weren't looking at.
+   */
+  const [expandedKey, setExpandedKey] = (0, _react.useState)(null);
+  const handleKeyPress = (0, _react.useCallback)(storageKey => {
+    const id = getKeyIdentifier(storageKey);
+    setExpandedKey(prev => prev === id ? null : id);
+  }, [getKeyIdentifier]);
   if (keys.length === 0 && title === "Required Keys") {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.sectionContainer,
@@ -80,7 +95,7 @@ function StorageKeySection({
         const uniqueKey = getKeyIdentifier(storageKey);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageKeyRow.StorageKeyRow, {
           storageKey: storageKey,
-          isExpanded: !isSelectMode && expandedKey === storageKey.key,
+          isExpanded: !isSelectMode && expandedKey === uniqueKey,
           onPress: handleKeyPress,
           isSelectMode: isSelectMode,
           isSelected: selectedKeys.has(uniqueKey),
@@ -90,6 +105,7 @@ function StorageKeySection({
           onHideKey: onHideKey,
           onEditKey: onEditKey,
           onToggleKey: onToggleKey,
+          onDeleteKey: onDeleteKey,
           editBlockedReason: editBlockedFor?.(storageKey),
           isPinned: pinnedKeys?.has(storageKey.key),
           onTogglePin: onTogglePin

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

@@ -550,7 +550,8 @@ function StorageModalWithTabs({
     };
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageEventCard.StorageEventCard, {
       data: cardData,
-      onPress: () => handleRawEventPress(item)
+      onPress: () => handleRawEventPress(item),
+      testID: `buoy-storage-event-${item.id}`
     });
   }, [handleRawEventPress]);
   if (!visible) return null;
@@ -587,6 +588,7 @@ function StorageModalWithTabs({
         const ascSortedEvents = [...selectedHistoryConversation.events].sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
         const newestFirstEvents = [...ascSortedEvents].reverse();
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+          testID: "buoy-storage-history-list",
           style: styles.flexFill,
           data: newestFirstEvents,
           keyExtractor: item => item.id,
@@ -604,7 +606,8 @@ function StorageModalWithTabs({
             };
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageEventCard.StorageEventCard, {
               data: cardData,
-              onPress: () => setSelectedHistoryEventIndex(ascIdx >= 0 ? ascIdx : 0)
+              onPress: () => setSelectedHistoryEventIndex(ascIdx >= 0 ? ascIdx : 0),
+              testID: `buoy-storage-history-event-${item.id}`
             });
           },
           contentContainerStyle: styles.listContent,
@@ -682,6 +685,7 @@ function StorageModalWithTabs({
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.flexFill,
       children: [eventTypeFilterBar, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+        testID: "buoy-storage-events-list",
         style: styles.flexFill,
         data: visibleEvents,
         renderItem: renderEventItem,
@@ -759,6 +763,7 @@ function StorageModalWithTabs({
           setIsSearchActive(false);
         },
         placeholder: "Search storage keys...",
+        testID: "buoy-storage-search",
         autoFocus: true,
         onSubmitEditing: () => setIsSearchActive(false),
         returnKeyType: "search",
@@ -773,6 +778,7 @@ function StorageModalWithTabs({
           label: `Events${filteredEvents.length > 0 ? ` (${filteredEvents.length})` : ""}`
         }],
         activeTab: activeTab,
+        testIDPrefix: "buoy-storage-tab",
         onTabChange: tab => {
           setActiveTab(tab);
           setSelectedHistoryKey(null);
@@ -785,13 +791,18 @@ function StorageModalWithTabs({
       children: [onRefresh && !isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         onPress: onRefresh,
         style: styles.iconButton,
+        testID: "buoy-storage-refresh",
         accessibilityLabel: "Refresh storage",
+        accessibilityRole: "button",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.RefreshCw, {
           size: 14,
           color: _sharedUi.night.color.textSecondary
         })
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         onPress: handleToggleFilters,
+        testID: "buoy-storage-filters",
+        accessibilityLabel: "Storage filters",
+        accessibilityRole: "button",
         style: [styles.iconButton, (ignoredPatterns.size > 0 || enabledStorageTypes.size < 3) && styles.activeFilterButton],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
           size: 14,
@@ -800,6 +811,9 @@ function StorageModalWithTabs({
       }), activeTab === "browser" && !isSearchActive && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
           onPress: () => setIsSearchActive(true),
+          testID: "buoy-storage-search-open",
+          accessibilityLabel: "Open search",
+          accessibilityRole: "button",
           style: styles.iconButton,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
             size: 14,
@@ -808,20 +822,24 @@ function StorageModalWithTabs({
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
           value: getStorageSnapshot,
           disabled: storageDataRef.current.length === 0,
-          buttonStyle: styles.iconButton
+          buttonStyle: styles.iconButton,
+          testID: "buoy-storage-copy"
         })]
       }), activeTab === "events" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
           value: getEventsSnapshot,
           disabled: filteredEvents.length === 0,
-          buttonStyle: styles.iconButton
+          buttonStyle: styles.iconButton,
+          testID: "buoy-storage-events-copy"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
           isEnabled: isListening,
           onToggle: handleToggleListening,
-          accessibilityLabel: "Toggle storage event monitoring"
+          accessibilityLabel: "Toggle storage event monitoring",
+          testID: "buoy-storage-power"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarClearButton, {
           onPress: handleClearEvents,
-          buttonStyle: styles.iconButton
+          buttonStyle: styles.iconButton,
+          testID: "buoy-storage-clear-events"
         })]
       })]
     })]
@@ -891,7 +909,8 @@ const styles = _reactNative.StyleSheet.create({
     paddingVertical: 8,
     borderBottomWidth: 1,
     borderBottomColor: _sharedUi.macOSColors.border.default,
-    backgroundColor: _sharedUi.macOSColors.background.card
+    // Clear, like Bench — the host's hoisted sky shows through the header.
+    backgroundColor: "transparent"
   },
   headerSearchContainer: {
     flex: 1