@buoy-gg/storage 7.0.4 → 7.0.5

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

@@ -3,7 +3,7 @@
 import { useCallback, useState } from "react";
 import { View, Text, StyleSheet } from "react-native";
 import { StorageKeyRow } from "./StorageKeyRow";
-import { SectionHeader } from "@buoy-gg/shared-ui";
+import { SectionHeader, macOSColors } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Storage key section component following composition principles [[rule3]]
@@ -26,7 +26,10 @@ export function StorageKeySection({
   onViewHistory,
   onHideKey,
   pinnedKeys,
-  onTogglePin
+  onTogglePin,
+  onEditKey,
+  onToggleKey,
+  editBlockedFor
 }) {
   const [expandedKey, setExpandedKey] = useState(null);
   const handleKeyPress = useCallback(storageKey => {
@@ -81,6 +84,9 @@ export function StorageKeySection({
           eventCount: eventCountByKey?.[storageKey.key],
           onViewHistory: onViewHistory ? () => onViewHistory(storageKey.key) : undefined,
           onHideKey: onHideKey,
+          onEditKey: onEditKey,
+          onToggleKey: onToggleKey,
+          editBlockedReason: editBlockedFor?.(storageKey),
           isPinned: pinnedKeys?.has(storageKey.key),
           onTogglePin: onTogglePin
         }, uniqueKey);
@@ -96,15 +102,15 @@ const styles = StyleSheet.create({
     // No gap needed, StorageKeyRow has its own margins
   },
   emptySection: {
-    backgroundColor: "rgba(255, 255, 255, 0.02)",
+    backgroundColor: "rgba(128, 128, 128, 0.04)",
     borderRadius: 6,
     padding: 16,
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.05)",
+    borderColor: "rgba(128, 128, 128, 0.1)",
     alignItems: "center"
   },
   emptySectionText: {
-    color: "#6B7280",
+    color: macOSColors.text.icon,
     fontSize: 11,
     textAlign: "center"
   }

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

@@ -2,6 +2,7 @@
 
 import { View, Text, StyleSheet } from "react-native";
 import { AlertCircle, CheckCircle2, XCircle, Eye, Database, Shield } from "@buoy-gg/shared-ui";
+import { macOSColors, buoyColors } from "@buoy-gg/shared-ui";
 import { getStorageTypeHexColor } from "../utils/storageQueryUtils";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Variable type configurations matching env vars design
@@ -255,15 +256,15 @@ export function StorageKeyStatsSection({
 const styles = StyleSheet.create({
   statsContainer: {
     marginBottom: 24,
-    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    backgroundColor: "rgba(128, 128, 128, 0.06)",
     borderRadius: 8,
     padding: 16,
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.08)"
+    borderColor: "rgba(128, 128, 128, 0.16)"
   },
   // Section titles
   sectionTitle: {
-    color: "#9CA3AF",
+    color: buoyColors.textSecondary,
     fontSize: 12,
     fontWeight: "500",
     marginBottom: 16,
@@ -279,11 +280,11 @@ const styles = StyleSheet.create({
     gap: 12
   },
   breakdownItem: {
-    backgroundColor: "rgba(255, 255, 255, 0.02)",
+    backgroundColor: "rgba(128, 128, 128, 0.04)",
     padding: 12,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.05)"
+    borderColor: "rgba(128, 128, 128, 0.1)"
   },
   breakdownItemRow: {
     flexDirection: "row",
@@ -306,12 +307,12 @@ const styles = StyleSheet.create({
     minWidth: 0
   },
   breakdownItemLabel: {
-    color: "#FFFFFF",
+    color: macOSColors.text.primary,
     fontSize: 14,
     fontWeight: "500"
   },
   breakdownItemDesc: {
-    color: "#9CA3AF",
+    color: buoyColors.textSecondary,
     fontSize: 12
   },
   breakdownItemRight: {
@@ -322,18 +323,18 @@ const styles = StyleSheet.create({
     fontWeight: "600"
   },
   breakdownPercentage: {
-    color: "#6B7280",
+    color: macOSColors.text.icon,
     fontSize: 10
   },
   // Empty state
   emptyState: {
     padding: 16,
-    backgroundColor: "rgba(255, 255, 255, 0.02)",
+    backgroundColor: "rgba(128, 128, 128, 0.04)",
     borderRadius: 6,
     alignItems: "center"
   },
   emptyStateText: {
-    color: "#6B7280",
+    color: macOSColors.text.icon,
     fontSize: 11,
     textAlign: "center"
   }

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

@@ -3,8 +3,9 @@
 import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import { Text, View, TouchableOpacity, StyleSheet, FlatList, Alert } from "react-native";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { JsModal, ModalHeader, TabSelector, parseValue, devToolsStorageKeys, macOSColors, Database, Filter, Search, SearchBar, PowerToggleButton, ToolbarCopyButton, ToolbarClearButton, truncatePayload, TickProvider } from "@buoy-gg/shared-ui";
+import { JsModal, ModalHeader, TabSelector, parseValue, devToolsStorageKeys, macOSColors, Database, Filter, RefreshCw, Search, SearchBar, PowerToggleButton, ToolbarCopyButton, ToolbarClearButton, truncatePayload, TickProvider } from "@buoy-gg/shared-ui";
 import { StorageBrowserMode } from "./StorageBrowserMode";
+import { StorageTypeFilterBar, countByStorageType } from "./StorageTypeFilterBar";
 import { clearAllAppStorage, clearAllStorageIncludingDevTools } from "../utils/clearAllStorage";
 import { ProFeatureBanner } from "@buoy-gg/shared-ui";
 import { useStorageEvents } from "../hooks/useStorageEvents";
@@ -25,10 +26,16 @@ export function StorageModalWithTabs({
   onBack,
   onMinimize,
   enableSharedModalDimensions = false,
-  requiredStorageKeys = []
+  requiredStorageKeys = [],
+  inline = false,
+  onTabChange,
+  onRefresh
 }) {
   const isPro = useIsPro();
   const [activeTab, setActiveTab] = useState("browser");
+  useEffect(() => {
+    onTabChange?.(activeTab);
+  }, [activeTab, onTabChange]);
 
   // Storage Browser state
   const [searchQuery, setSearchQuery] = useState("");
@@ -54,6 +61,19 @@ export function StorageModalWithTabs({
   const [showFilters, setShowFilters] = useState(false);
   const [ignoredPatterns, setIgnoredPatterns] = useState(new Set(["@react_buoy", "@RNAsyncStorage", "redux-persist", "persist:"]) // Auto-hide dev tool keys by default
   );
+  /**
+   * Which backend both tabs are looking at.
+   *
+   * Owned here rather than inside the browser because the Keys and Events tabs
+   * answer questions about the same three backends — filter the key list to
+   * Keychain, switch to Events to see what wrote to it, and the filter should
+   * still be Keychain.
+   *
+   * Distinct from `enabledStorageTypes` below: that's the persisted "capture
+   * this backend at all" setting from the Filters view. This is a view filter,
+   * and it never hides data the other one already dropped.
+   */
+  const [storageTypeFilter, setStorageTypeFilter] = useState("all");
   const [enabledStorageTypes, setEnabledStorageTypes] = useState(new Set(['async', 'mmkv', 'secure']) // All enabled by default
   );
   const [pinnedKeys, setPinnedKeys] = useState(new Set());
@@ -65,8 +85,13 @@ export function StorageModalWithTabs({
 
   // isListening = enabled and capturing (has subscribers)
   const isListening = isListeningEnabled && isCapturing;
-  const handleModeChange = useCallback(_mode => {
-    // Mode changes handled by JsModal
+
+  // Track the modal's presentation mode so the stepper footer only reserves
+  // safe-area bottom padding while docked as a bottom sheet. In floating mode
+  // the footer isn't pinned to the screen edge, so that inset is dead space.
+  const [modalMode, setModalMode] = useState("bottomSheet");
+  const handleModeChange = useCallback(mode => {
+    setModalMode(mode);
   }, []);
 
   // Timer removed - using useTickEveryMinute hook instead
@@ -412,14 +437,34 @@ export function StorageModalWithTabs({
     return counts;
   }, [conversations]);
 
+  /**
+   * When each key was last written, for the wide table's "Last write" column.
+   * Derived from the recorded event stream, NOT from the key read: a storage
+   * read has no timestamp of its own, so a key we never witnessed being written
+   * has no honest answer here and is simply absent.
+   */
+  const lastWriteByKey = useMemo(() => {
+    const at = {};
+    conversations.forEach(conv => {
+      at[conv.key] = conv.lastEvent.timestamp.getTime();
+    });
+    return at;
+  }, [conversations]);
+
   // Selected history conversation (from browser tab "view history")
   const selectedHistoryConversation = useMemo(() => {
     if (!selectedHistoryKey) return null;
     return conversations.find(c => c.key === selectedHistoryKey) || null;
   }, [selectedHistoryKey, conversations]);
 
-  // Filtered raw events for the events tab (chronological stream, newest-first)
-  const filteredEvents = useMemo(() => {
+  /**
+   * Events passing everything EXCEPT the backend pills.
+   *
+   * Split out so the pills can show what each one would reveal. Counting the
+   * already-filtered list would zero out the three types you didn't pick, which
+   * tells you nothing about where to look next.
+   */
+  const eventsBeforeTypeFilter = useMemo(() => {
     return events.filter(event => {
       if (!event.data?.key) return false;
       if (!enabledStorageTypes.has(event.storageType)) return false;
@@ -427,6 +472,13 @@ export function StorageModalWithTabs({
       return !Array.from(ignoredPatterns).some(p => key.includes(p));
     });
   }, [events, ignoredPatterns, enabledStorageTypes]);
+  const eventTypeCounts = useMemo(() => countByStorageType(eventsBeforeTypeFilter), [eventsBeforeTypeFilter]);
+
+  // Filtered raw events for the events tab (chronological stream, newest-first)
+  const filteredEvents = useMemo(() => {
+    if (storageTypeFilter === "all") return eventsBeforeTypeFilter;
+    return eventsBeforeTypeFilter.filter(event => event.storageType === storageTypeFilter);
+  }, [eventsBeforeTypeFilter, storageTypeFilter]);
   const getEventsSnapshot = useCallback(() => {
     return filteredEvents.map(event => ({
       key: event.data?.key,
@@ -547,10 +599,17 @@ export function StorageModalWithTabs({
         searchQuery: searchQuery,
         storageDataRef: storageDataRef,
         eventCountByKey: eventCountByKey,
+        lastWriteByKey: lastWriteByKey,
         onViewHistory: handleViewHistoryFromBrowser,
         enabledStorageTypes: enabledStorageTypes,
         pinnedKeys: pinnedKeys,
         onTogglePin: handleTogglePin
+        // Only a docked sheet sits on the screen's bottom edge; a floating
+        // window's own bottom is well above the home indicator.
+        ,
+        applySafeAreaInset: modalMode === "bottomSheet",
+        storageTypeFilter: storageTypeFilter,
+        onStorageTypeFilterChange: setStorageTypeFilter
       });
     }
 
@@ -566,48 +625,75 @@ export function StorageModalWithTabs({
         })
       });
     }
+
+    // The pills render ABOVE the empty state as well as the list. Filtering to
+    // a backend that happens to have no events would otherwise hide the only
+    // control that undoes it, leaving the tab looking permanently broken.
+    const eventTypeFilterBar = /*#__PURE__*/_jsx(View, {
+      style: styles.eventFilterBar,
+      children: /*#__PURE__*/_jsx(StorageTypeFilterBar, {
+        active: storageTypeFilter,
+        onChange: setStorageTypeFilter,
+        counts: eventTypeCounts
+      })
+    });
     if (filteredEvents.length === 0) {
+      const filtered = storageTypeFilter !== "all";
       return /*#__PURE__*/_jsxs(View, {
-        style: styles.emptyState,
-        children: [/*#__PURE__*/_jsx(Database, {
-          size: 48,
-          color: macOSColors.text.muted
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.emptyTitle,
-          children: isListening ? "No storage events yet" : "Event listener is paused"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.emptySubtitle,
-          children: isListening ? "Storage operations will appear here" : "Press play to start monitoring"
+        style: styles.flexFill,
+        children: [eventTypeFilterBar, /*#__PURE__*/_jsxs(View, {
+          style: styles.emptyState,
+          children: [/*#__PURE__*/_jsx(Database, {
+            size: 48,
+            color: macOSColors.text.muted
+          }), /*#__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"
+          })]
         })]
       });
     }
-    return /*#__PURE__*/_jsx(FlatList, {
+    return /*#__PURE__*/_jsxs(View, {
       style: styles.flexFill,
-      data: visibleEvents,
-      renderItem: renderEventItem,
-      keyExtractor: eventKeyExtractor,
-      onEndReachedThreshold: END_REACHED_THRESHOLD,
-      contentContainerStyle: styles.listContent,
-      ListFooterComponent: lockedEventCount > 0 ? /*#__PURE__*/_jsx(View, {
-        style: styles.lockedBannerContainer,
-        children: /*#__PURE__*/_jsx(ProFeatureBanner, {
-          featureName: `${lockedEventCount} event${lockedEventCount > 1 ? 's' : ''} locked`,
-          description: "Upgrade to Pro to unlock full event history"
-        })
-      }) : null,
-      initialNumToRender: 10,
-      maxToRenderPerBatch: 10,
-      windowSize: 10
+      children: [eventTypeFilterBar, /*#__PURE__*/_jsx(FlatList, {
+        style: styles.flexFill,
+        data: visibleEvents,
+        renderItem: renderEventItem,
+        keyExtractor: eventKeyExtractor,
+        onEndReachedThreshold: END_REACHED_THRESHOLD,
+        contentContainerStyle: styles.listContent,
+        ListFooterComponent: lockedEventCount > 0 ? /*#__PURE__*/_jsx(View, {
+          style: styles.lockedBannerContainer,
+          children: /*#__PURE__*/_jsx(ProFeatureBanner, {
+            featureName: `${lockedEventCount} event${lockedEventCount > 1 ? 's' : ''} locked`,
+            description: "Upgrade to Pro to unlock full event history"
+          })
+        }) : null,
+        initialNumToRender: 10,
+        maxToRenderPerBatch: 10,
+        windowSize: 10
+      })]
     });
   };
-  const footerNode = selectedConversation ? /*#__PURE__*/_jsx(StorageEventDetailFooter, {
+
+  // The stepper renders nothing for a single-event conversation
+  // (EventStepperFooter bails at totalItems <= 1), but an element is truthy
+  // either way — so `footerHeight={footerNode ? 68 : 0}` below used to reserve
+  // 68px for a footer that drew nothing, leaving a dead band under the content.
+  // Gate the node on the event count so the reserve matches what's painted.
+  const footerNode = selectedConversation && selectedConversation.events.length > 1 ? /*#__PURE__*/_jsx(StorageEventDetailFooter, {
     conversation: selectedConversation,
     selectedEventIndex: selectedEventIndex,
-    onEventIndexChange: setSelectedEventIndex
-  }) : selectedHistoryConversation && selectedHistoryEventIndex !== null ? /*#__PURE__*/_jsx(StorageEventDetailFooter, {
+    onEventIndexChange: setSelectedEventIndex,
+    applySafeAreaInset: modalMode === "bottomSheet"
+  }) : selectedHistoryConversation && selectedHistoryEventIndex !== null && selectedHistoryConversation.events.length > 1 ? /*#__PURE__*/_jsx(StorageEventDetailFooter, {
     conversation: selectedHistoryConversation,
     selectedEventIndex: selectedHistoryEventIndex,
-    onEventIndexChange: setSelectedHistoryEventIndex
+    onEventIndexChange: setSelectedHistoryEventIndex,
+    applySafeAreaInset: modalMode === "bottomSheet"
   }) : null;
 
   // Determine the appropriate back handler based on current view state
@@ -615,6 +701,122 @@ export function StorageModalWithTabs({
     setSelectedConversationKey(null);
     setSelectedEventIndex(0);
   } : onBack;
+  const headerContent = showFilters ? /*#__PURE__*/_jsxs(ModalHeader, {
+    children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+      onBack: () => setShowFilters(false)
+    }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+      title: "Filters"
+    })]
+  }) : selectedHistoryKey ? /*#__PURE__*/_jsxs(ModalHeader, {
+    children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+      onBack: selectedHistoryEventIndex !== null ? () => setSelectedHistoryEventIndex(null) : handleBackFromHistory
+    }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+      title: `${selectedHistoryKey} History`,
+      centered: true
+    })]
+  }) : selectedConversation ? /*#__PURE__*/_jsxs(ModalHeader, {
+    children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+      onBack: () => {
+        setSelectedConversationKey(null);
+        setSelectedEventIndex(0);
+      }
+    }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+      title: selectedConversation.key
+    })]
+  }) : /*#__PURE__*/_jsxs(ModalHeader, {
+    children: [onBack && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
+      onBack: onBack
+    }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+      title: "",
+      children: isSearchActive ? /*#__PURE__*/_jsx(SearchBar, {
+        value: searchQuery,
+        onChange: setSearchQuery,
+        onClear: () => {
+          setSearchQuery("");
+          setIsSearchActive(false);
+        },
+        placeholder: "Search storage keys...",
+        autoFocus: true,
+        onSubmitEditing: () => setIsSearchActive(false),
+        returnKeyType: "search",
+        suggestions: allStorageKeys,
+        containerStyle: styles.headerSearchContainer
+      }) : /*#__PURE__*/_jsx(TabSelector, {
+        tabs: [{
+          key: "browser",
+          label: "Storage"
+        }, {
+          key: "events",
+          label: `Events${filteredEvents.length > 0 ? ` (${filteredEvents.length})` : ""}`
+        }],
+        activeTab: activeTab,
+        onTabChange: tab => {
+          setActiveTab(tab);
+          setSelectedHistoryKey(null);
+          setSelectedHistoryEventIndex(null);
+          setSelectedConversationKey(null);
+          setSelectedEventIndex(0);
+        }
+      })
+    }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
+      children: [onRefresh && !isSearchActive ? /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: onRefresh,
+        style: styles.iconButton,
+        accessibilityLabel: "Refresh storage",
+        children: /*#__PURE__*/_jsx(RefreshCw, {
+          size: 14,
+          color: macOSColors.text.secondary
+        })
+      }) : null, /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: handleToggleFilters,
+        style: [styles.iconButton, (ignoredPatterns.size > 0 || enabledStorageTypes.size < 3) && styles.activeFilterButton],
+        children: /*#__PURE__*/_jsx(Filter, {
+          size: 14,
+          color: ignoredPatterns.size > 0 || enabledStorageTypes.size < 3 ? macOSColors.semantic.debug : macOSColors.text.secondary
+        })
+      }), activeTab === "browser" && !isSearchActive && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: () => setIsSearchActive(true),
+          style: styles.iconButton,
+          children: /*#__PURE__*/_jsx(Search, {
+            size: 14,
+            color: macOSColors.text.secondary
+          })
+        }), /*#__PURE__*/_jsx(ToolbarCopyButton, {
+          value: getStorageSnapshot,
+          disabled: storageDataRef.current.length === 0,
+          buttonStyle: styles.iconButton
+        })]
+      }), activeTab === "events" && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(ToolbarCopyButton, {
+          value: getEventsSnapshot,
+          disabled: filteredEvents.length === 0,
+          buttonStyle: styles.iconButton
+        }), /*#__PURE__*/_jsx(PowerToggleButton, {
+          isEnabled: isListening,
+          onToggle: handleToggleListening,
+          accessibilityLabel: "Toggle storage event monitoring"
+        }), /*#__PURE__*/_jsx(ToolbarClearButton, {
+          onPress: handleClearEvents,
+          buttonStyle: styles.iconButton
+        })]
+      })]
+    })]
+  });
+
+  // The ONLY difference between the phone and the desktop dashboard is which
+  // shell the header, body and footer go in. Everything above this is shared.
+  if (inline) {
+    return /*#__PURE__*/_jsx(TickProvider, {
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.inlineRoot,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.inlineHeader,
+          children: headerContent
+        }), renderContent(), footerNode]
+      })
+    });
+  }
   return /*#__PURE__*/_jsx(TickProvider, {
     children: /*#__PURE__*/_jsx(JsModal, {
       visible: visible,
@@ -624,100 +826,7 @@ export function StorageModalWithTabs({
       persistenceKey: persistenceKey,
       header: {
         showToggleButton: true,
-        customContent: showFilters ? /*#__PURE__*/_jsxs(ModalHeader, {
-          children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-            onBack: () => setShowFilters(false)
-          }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-            title: "Filters"
-          })]
-        }) : selectedHistoryKey ? /*#__PURE__*/_jsxs(ModalHeader, {
-          children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-            onBack: selectedHistoryEventIndex !== null ? () => setSelectedHistoryEventIndex(null) : handleBackFromHistory
-          }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-            title: `${selectedHistoryKey} History`,
-            centered: true
-          })]
-        }) : selectedConversation ? /*#__PURE__*/_jsxs(ModalHeader, {
-          children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-            onBack: () => {
-              setSelectedConversationKey(null);
-              setSelectedEventIndex(0);
-            }
-          }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-            title: selectedConversation.key
-          })]
-        }) : /*#__PURE__*/_jsxs(ModalHeader, {
-          children: [onBack && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
-            onBack: onBack
-          }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-            title: "",
-            children: isSearchActive ? /*#__PURE__*/_jsx(SearchBar, {
-              value: searchQuery,
-              onChange: setSearchQuery,
-              onClear: () => {
-                setSearchQuery("");
-                setIsSearchActive(false);
-              },
-              placeholder: "Search storage keys...",
-              autoFocus: true,
-              onSubmitEditing: () => setIsSearchActive(false),
-              returnKeyType: "search",
-              suggestions: allStorageKeys,
-              containerStyle: styles.headerSearchContainer
-            }) : /*#__PURE__*/_jsx(TabSelector, {
-              tabs: [{
-                key: "browser",
-                label: "Storage"
-              }, {
-                key: "events",
-                label: `Events${filteredEvents.length > 0 ? ` (${filteredEvents.length})` : ""}`
-              }],
-              activeTab: activeTab,
-              onTabChange: tab => {
-                setActiveTab(tab);
-                setSelectedHistoryKey(null);
-                setSelectedHistoryEventIndex(null);
-                setSelectedConversationKey(null);
-                setSelectedEventIndex(0);
-              }
-            })
-          }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
-            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-              onPress: handleToggleFilters,
-              style: [styles.iconButton, (ignoredPatterns.size > 0 || enabledStorageTypes.size < 3) && styles.activeFilterButton],
-              children: /*#__PURE__*/_jsx(Filter, {
-                size: 14,
-                color: ignoredPatterns.size > 0 || enabledStorageTypes.size < 3 ? macOSColors.semantic.debug : macOSColors.text.secondary
-              })
-            }), activeTab === "browser" && !isSearchActive && /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-                onPress: () => setIsSearchActive(true),
-                style: styles.iconButton,
-                children: /*#__PURE__*/_jsx(Search, {
-                  size: 14,
-                  color: macOSColors.text.secondary
-                })
-              }), /*#__PURE__*/_jsx(ToolbarCopyButton, {
-                value: getStorageSnapshot,
-                disabled: storageDataRef.current.length === 0,
-                buttonStyle: styles.iconButton
-              })]
-            }), activeTab === "events" && /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsx(ToolbarCopyButton, {
-                value: getEventsSnapshot,
-                disabled: filteredEvents.length === 0,
-                buttonStyle: styles.iconButton
-              }), /*#__PURE__*/_jsx(PowerToggleButton, {
-                isEnabled: isListening,
-                onToggle: handleToggleListening,
-                accessibilityLabel: "Toggle storage event monitoring"
-              }), /*#__PURE__*/_jsx(ToolbarClearButton, {
-                onPress: handleClearEvents,
-                buttonStyle: styles.iconButton
-              })]
-            })]
-          })]
-        })
+        customContent: headerContent
       },
       onModeChange: handleModeChange,
       enablePersistence: true,
@@ -731,7 +840,34 @@ export function StorageModalWithTabs({
     })
   });
 }
+
+/**
+ * The same storage tool as `StorageModalWithTabs`, rendered INLINE for hosts
+ * that place tools in a panel rather than a modal. Exists so there is exactly
+ * one implementation — the desktop dashboard used to ship its own copy of this
+ * component's header, tabs and screen router.
+ */
+export function StorageToolView(props = {}) {
+  return /*#__PURE__*/_jsx(StorageModalWithTabs, {
+    ...props,
+    inline: true,
+    visible: true,
+    onClose: () => {}
+  });
+}
 const styles = StyleSheet.create({
+  inlineRoot: {
+    flex: 1,
+    minHeight: 0,
+    backgroundColor: macOSColors.background.base
+  },
+  inlineHeader: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: macOSColors.border.default,
+    backgroundColor: macOSColors.background.card
+  },
   headerSearchContainer: {
     flex: 1
   },
@@ -761,6 +897,12 @@ const styles = StyleSheet.create({
     marginTop: 8,
     marginHorizontal: 16
   },
+  /** Gutter matching the event cards below it, so the pills line up with them. */
+  eventFilterBar: {
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 4
+  },
   emptyState: {
     flex: 1,
     justifyContent: "center",

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

@@ -0,0 +1,42 @@
+"use strict";
+
+/**
+ * Editing a key whose value is a single string, number or boolean.
+ *
+ * A tree of one row is not a tree, so there's nothing here to select, reorder
+ * or append to — which means none of the structural editor applies. And with
+ * one edit producing one write, there's nothing to buffer either: a draft would
+ * only add a step between typing the value and storing it.
+ *
+ * So this is just the value modal over whatever the user was looking at, on
+ * both the phone and the dashboard. Changing one string shouldn't black out the
+ * screen it came from.
+ */
+
+import { useCallback, useState } from "react";
+import { Alert } from "react-native";
+import { StorageValueEditModal } from "./StorageValueEditModal";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function StorageScalarKeyEditor({
+  storageKey,
+  value,
+  onSave,
+  onClose
+}) {
+  const [saving, setSaving] = useState(false);
+  const save = useCallback(next => {
+    if (saving) return;
+    setSaving(true);
+    onSave(JSON.stringify(next)).then(onClose).catch(e => {
+      setSaving(false);
+      Alert.alert("Couldn't save", e instanceof Error ? e.message : String(e));
+    });
+  }, [onClose, onSave, saving]);
+  return /*#__PURE__*/_jsx(StorageValueEditModal, {
+    path: [storageKey.key],
+    value: value,
+    onSave: save,
+    onCancel: onClose,
+    busy: saving
+  });
+}