@buoy-gg/storage 7.0.3 → 7.0.5

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

@@ -19,10 +19,17 @@ function StorageBrowserMode({
   searchQuery = "",
   storageDataRef,
   eventCountByKey,
+  lastWriteByKey,
   onViewHistory,
   enabledStorageTypes,
+  statusFilter,
+  onStatusFilterChange,
+  onStatusCountsChange,
   pinnedKeys,
-  onTogglePin
+  onTogglePin,
+  applySafeAreaInset,
+  storageTypeFilter,
+  onStorageTypeFilterChange
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GameUIStorageBrowser.GameUIStorageBrowser, {
     requiredStorageKeys: requiredStorageKeys,
@@ -33,9 +40,16 @@ function StorageBrowserMode({
     searchQuery: searchQuery,
     storageDataRef: storageDataRef,
     eventCountByKey: eventCountByKey,
+    lastWriteByKey: lastWriteByKey,
     onViewHistory: onViewHistory,
     enabledStorageTypes: enabledStorageTypes,
+    statusFilter: statusFilter,
+    onStatusFilterChange: onStatusFilterChange,
+    onStatusCountsChange: onStatusCountsChange,
     pinnedKeys: pinnedKeys,
-    onTogglePin: onTogglePin
+    onTogglePin: onTogglePin,
+    applySafeAreaInset: applySafeAreaInset,
+    storageTypeFilter: storageTypeFilter,
+    onStorageTypeFilterChange: onStorageTypeFilterChange
   });
 }

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

@@ -10,7 +10,7 @@ var _react = require("react");
 var _asyncStorage = _interopRequireDefault(require("@react-native-async-storage/async-storage"));
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _license = require("@buoy-gg/license");
-var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
+var _lineDiff = require("../utils/lineDiff");
 var _ThemedSplitView = require("./DiffViewer/modes/ThemedSplitView");
 var _diffThemes = require("./DiffViewer/themes/diffThemes");
 var _TreeDiffViewer = require("./DiffViewer/TreeDiffViewer");
@@ -25,6 +25,36 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * Detail view for storage events using the shared EventHistoryViewer component.
  */
 
+/**
+ * Compare-bar index for "the state before the oldest event".
+ *
+ * Not an event — it's reconstructed from that event's own `prevValue`, which
+ * every write records. Without it a key's first event had nothing to diff
+ * against and both panes showed the same value.
+ */const ORIGIN_INDEX = -1;
+
+/** Compare-bar copy for each origin state. Kept in sync with the Flutter port. */
+const ORIGIN_LABELS = {
+  prior: {
+    label: "BEFORE #1",
+    timestamp: "value before first event",
+    relativeTime: "not captured",
+    badge: "PRIOR"
+  },
+  absent: {
+    label: "NO PRIOR VALUE",
+    timestamp: "key did not exist",
+    relativeTime: "created here",
+    badge: "ABSENT"
+  },
+  scanned: {
+    label: "ALREADY PRESENT",
+    timestamp: "value found at startup",
+    relativeTime: "not a write",
+    badge: "SCANNED"
+  }
+};
+
 // Unified storage event type (supports both AsyncStorage and MMKV)
 
 /**
@@ -86,12 +116,16 @@ function StorageEventDetailContent({
   const isPro = (0, _license.useIsPro)();
   const [showProModal, setShowProModal] = (0, _react.useState)(false);
 
-  // View state
-  const [activeView, setActiveView] = (0, _react.useState)("current");
-  const [diffMode, setDiffMode] = (0, _react.useState)("tree");
+  // There is only the diff view now. The current stored value is what the Keys
+  // table shows — repeating it behind a toggle here meant two places to look for
+  // one fact, and the toggle was the first thing between you and the diff you
+  // opened this screen for.
+  const [diffMode, setDiffMode] = (0, _react.useState)("split");
 
   // Compare indices for diff view
-  const [leftIndex, setLeftIndex] = (0, _react.useState)(Math.max(0, selectedEventIndex - 1));
+  // Matches what the sync effect below computes, so the first frame doesn't
+  // briefly pair the oldest event with itself.
+  const [leftIndex, setLeftIndex] = (0, _react.useState)(Math.max(ORIGIN_INDEX, selectedEventIndex - 1));
   const [rightIndex, setRightIndex] = (0, _react.useState)(selectedEventIndex);
 
   // Track if preferences have been loaded
@@ -106,10 +140,6 @@ function StorageEventDetailContent({
     if (hasLoadedPreferences.current) return;
     const loadPreferences = async () => {
       try {
-        const savedDetailView = await _asyncStorage.default.getItem(_sharedUi.devToolsStorageKeys.storage.detailView());
-        if (savedDetailView === "current" || savedDetailView === "diff") {
-          setActiveView(savedDetailView);
-        }
         const savedDiffMode = await _asyncStorage.default.getItem(_sharedUi.devToolsStorageKeys.storage.diffViewerMode());
         if (savedDiffMode === "split" || savedDiffMode === "tree") {
           setDiffMode(savedDiffMode);
@@ -122,24 +152,15 @@ function StorageEventDetailContent({
     loadPreferences();
   }, []);
 
-  // Keep compare indices synced to selection
+  // Keep compare indices synced to selection. Left may land on ORIGIN_INDEX,
+  // which is not an event — it's the state the oldest event overwrote.
   (0, _react.useEffect)(() => {
     const newRight = Math.min(totalEvents - 1, Math.max(0, selectedEventIndex));
-    const newLeft = Math.max(0, Math.min(newRight - 1, selectedEventIndex - 1));
+    const newLeft = Math.max(ORIGIN_INDEX, Math.min(newRight - 1, selectedEventIndex - 1));
     setLeftIndex(newLeft);
     setRightIndex(newRight);
   }, [selectedEventIndex, totalEvents]);
 
-  // Save view preference when changed
-  const handleViewChange = (0, _react.useCallback)(async view => {
-    setActiveView(view);
-    try {
-      await _asyncStorage.default.setItem(_sharedUi.devToolsStorageKeys.storage.detailView(), view);
-    } catch {
-      // Failed to save preference
-    }
-  }, []);
-
   // Save diff mode preference when changed
   const handleDiffModeChange = (0, _react.useCallback)(async mode => {
     setDiffMode(mode);
@@ -152,18 +173,53 @@ function StorageEventDetailContent({
 
   // Get current event
   const selectedEvent = navigationItems[selectedEventIndex];
-  const valueToShow = selectedEvent?.data?.value ?? conversation.currentValue;
   const action = selectedEvent?.action;
   // Compute type from the parsed value so it matches what we actually render
-  const valueType = getValueType((0, _sharedUi.parseValue)(valueToShow));
-  const actionColor = getActionColor(action || "");
 
-  // Get events for diff comparison
-  const leftEvent = navigationItems[Math.max(0, Math.min(totalEvents - 1, leftIndex))];
+  // Get events for diff comparison. leftIndex === ORIGIN_INDEX means "the state
+  // before the oldest event", which has no event object of its own.
+  const isOriginLeft = leftIndex === ORIGIN_INDEX;
+  const leftEvent = isOriginLeft ? undefined : navigationItems[Math.max(0, Math.min(totalEvents - 1, leftIndex))];
   const rightEvent = navigationItems[Math.max(0, Math.min(totalEvents - 1, rightIndex))];
 
+  // Every write records the value it overwrote (for time travel), so even the
+  // very first event can be diffed against what was actually there. Three
+  // distinct origins, and conflating them would misinform:
+  //   PRIOR   — the write replaced a real value (including `[]`, `""`, `null`)
+  //   ABSENT  — the write created the key; there was nothing before it
+  //   SCANNED — not a write at all, just the startup snapshot of a key that
+  //             already existed, so nothing changed at this event
+  const originKind = (0, _react.useMemo)(() => {
+    const data = rightEvent?.data;
+    if (data?.initialScan) return "scanned";
+    return data?.prevValue === null || data?.prevValue === undefined ? "absent" : "prior";
+  }, [rightEvent]);
+  const originValue = (0, _react.useMemo)(() => {
+    if (originKind === "absent") return _lineDiff.ABSENT_VALUE;
+    // A scanned key was already holding the event's own value, so diffing
+    // against it correctly reports no change.
+    if (originKind === "scanned") return (0, _sharedUi.parseValue)(rightEvent?.data?.value);
+    return (0, _sharedUi.parseValue)(rightEvent?.data?.prevValue);
+  }, [originKind, rightEvent]);
+
   // Create event display info for compare bar
-  const leftEventInfo = (0, _react.useMemo)(() => ({
+  const leftEventInfo = (0, _react.useMemo)(() => isOriginLeft ? {
+    index: ORIGIN_INDEX,
+    label: ORIGIN_LABELS[originKind].label,
+    timestamp: ORIGIN_LABELS[originKind].timestamp,
+    relativeTime: ORIGIN_LABELS[originKind].relativeTime,
+    badge: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.actionBadgeSmall, {
+        backgroundColor: `${_sharedUi.macOSColors.text.muted}20`
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.actionTextSmall, {
+          color: _sharedUi.macOSColors.text.muted
+        }],
+        children: ORIGIN_LABELS[originKind].badge
+      })
+    })
+  } : {
     index: leftIndex,
     label: `#${leftIndex + 1} / ${totalEvents}`,
     timestamp: leftEvent ? formatTimeWithMs(leftEvent.timestamp) : "",
@@ -179,7 +235,7 @@ function StorageEventDetailContent({
         children: (0, _storageActionHelpers.translateStorageAction)(leftEvent.action)
       })
     }) : undefined
-  }), [leftIndex, leftEvent, totalEvents]);
+  }, [leftIndex, leftEvent, totalEvents, isOriginLeft, originKind]);
   const rightEventInfo = (0, _react.useMemo)(() => ({
     index: rightIndex,
     label: `#${rightIndex + 1} / ${totalEvents}`,
@@ -209,7 +265,8 @@ function StorageEventDetailContent({
 
   // Navigation handlers for compare bar
   const handleLeftPrevious = (0, _react.useCallback)(() => {
-    if (leftIndex > 0) {
+    // Stops at ORIGIN_INDEX — one step past event #1 is the state it overwrote.
+    if (leftIndex > ORIGIN_INDEX) {
       setLeftIndex(leftIndex - 1);
     }
   }, [leftIndex]);
@@ -229,54 +286,11 @@ function StorageEventDetailContent({
     }
   }, [rightIndex, totalEvents]);
 
-  // Render current value view
-  const renderCurrentView = (0, _react.useCallback)(() => {
-    const parsed = (0, _sharedUi.parseValue)(valueToShow);
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.contentCard,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.valueHeader,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.valueLabel,
-          children: "CURRENT VALUE"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.valueHeaderBadges,
-          children: [action ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.actionBadge, {
-              backgroundColor: `${actionColor}20`
-            }],
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.actionText, {
-                color: actionColor
-              }],
-              children: (0, _storageActionHelpers.translateStorageAction)(action)
-            })
-          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.typeBadge,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.typeText,
-              children: valueType.toUpperCase()
-            })
-          })]
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.dataViewerContainer,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
-          title: "",
-          data: parsed,
-          showTypeFilter: true,
-          rawMode: true,
-          initialExpanded: true
-        })
-      })]
-    });
-  }, [valueToShow, action, actionColor, valueType]);
-
   // Memoized so the diff viewers don't see new oldValue/newValue refs on every
   // re-render. parseValue runs JSON.parse, which would otherwise produce fresh
   // object identities every time and force expensive recomputations downstream
   // (line diff, tree diff, expansion-state effects, etc.).
-  const previousValue = (0, _react.useMemo)(() => (0, _sharedUi.parseValue)(leftEvent?.data?.value ?? null), [leftEvent]);
+  const previousValue = (0, _react.useMemo)(() => isOriginLeft ? originValue : (0, _sharedUi.parseValue)(leftEvent?.data?.value ?? null), [isOriginLeft, originValue, leftEvent]);
   const currentValue = (0, _react.useMemo)(() => (0, _sharedUi.parseValue)(rightEvent?.data?.value), [rightEvent]);
 
   // Render diff content
@@ -288,12 +302,17 @@ function StorageEventDetailContent({
         differences: SPLIT_VIEW_DIFFERENCES,
         theme: _diffThemes.diffThemes.devToolsDefault,
         options: SPLIT_VIEW_OPTIONS,
-        showThemeName: false
+        showThemeName: false,
+        scrollEnabled: false
       });
     }
+
+    // Inline: the whole diff section scrolls as one page (see
+    // `scrollDiffSection` below), so the tree must not scroll itself.
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeDiffViewer.TreeDiffViewer, {
       oldValue: previousValue,
-      newValue: currentValue
+      newValue: currentValue,
+      scrollEnabled: false
     });
   }, [previousValue, currentValue, diffMode]);
 
@@ -366,25 +385,23 @@ function StorageEventDetailContent({
         onPress: handleCopy
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EventHistoryViewer
-    // View Toggle
+    // Diff only: no `renderCurrentView`, so the viewer drops the toggle
+    // cards entirely rather than showing a one-option switch.
     , {
-      activeView: activeView,
-      onViewChange: handleViewChange,
-      currentViewLabel: "CURRENT VALUE",
-      currentViewDescription: "View the current stored value",
-      currentViewIcon: _sharedUi.Database,
+      activeView: "diff",
       diffViewLabel: "DIFF VIEW",
       diffViewDescription: "Compare changes between versions",
       diffViewIcon: _sharedUi.GitBranch
-      // Current View
-      ,
-      renderCurrentView: renderCurrentView
       // Diff View
       ,
       diffModeTabs: diffModeTabs,
       activeDiffMode: diffMode,
       onDiffModeChange: handleDiffModeChange,
       renderDiffContent: renderDiffContent
+      // Both diff modes render inline now, so the whole section scrolls as
+      // one page rather than confining the rows to a nested pane.
+      ,
+      scrollDiffSection: true
       // Compare Bar
       ,
       leftEvent: leftEventInfo,
@@ -394,7 +411,7 @@ function StorageEventDetailContent({
       onLeftNext: handleLeftNext,
       onRightPrevious: handleRightPrevious,
       onRightNext: handleRightNext,
-      canLeftPrevious: leftIndex > 0,
+      canLeftPrevious: leftIndex > ORIGIN_INDEX,
       canLeftNext: leftIndex < rightIndex - 1,
       canRightPrevious: rightIndex > leftIndex + 1,
       canRightNext: rightIndex < totalEvents - 1
@@ -421,7 +438,8 @@ function StorageEventDetailContent({
 function StorageEventDetailFooter({
   conversation,
   selectedEventIndex = 0,
-  onEventIndexChange = () => {}
+  onEventIndexChange = () => {},
+  applySafeAreaInset = true
 }) {
   const navigationItems = conversation.events.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
   const totalEvents = navigationItems.length;
@@ -431,7 +449,8 @@ function StorageEventDetailFooter({
     onPrevious: () => onEventIndexChange(Math.max(0, selectedEventIndex - 1)),
     onNext: () => onEventIndexChange(Math.min(totalEvents - 1, selectedEventIndex + 1)),
     itemLabel: "Event",
-    subtitle: (0, _sharedUi.formatRelativeTime)(navigationItems[selectedEventIndex]?.timestamp)
+    subtitle: (0, _sharedUi.formatRelativeTime)(navigationItems[selectedEventIndex]?.timestamp),
+    applySafeAreaInset: applySafeAreaInset
   });
 }
 const styles = _reactNative.StyleSheet.create({
@@ -448,63 +467,6 @@ const styles = _reactNative.StyleSheet.create({
     borderBottomColor: _sharedUi.buoyColors.border
   },
   // Content Card
-  contentCard: {
-    backgroundColor: _sharedUi.macOSColors.background.card,
-    borderRadius: 14,
-    padding: 14,
-    borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
-    shadowColor: _sharedUi.macOSColors.semantic.info,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.04,
-    shadowRadius: 16,
-    elevation: 2
-  },
-  valueHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: 8
-  },
-  valueLabel: {
-    fontSize: 10,
-    color: _sharedUi.macOSColors.text.secondary,
-    fontFamily: "monospace",
-    letterSpacing: 0.5,
-    fontWeight: "600",
-    textTransform: "uppercase"
-  },
-  valueHeaderBadges: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  actionBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 4
-  },
-  actionText: {
-    fontSize: 9,
-    fontWeight: "700",
-    fontFamily: "monospace",
-    letterSpacing: 0.3
-  },
-  typeBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 4,
-    backgroundColor: _sharedUi.macOSColors.background.input
-  },
-  typeText: {
-    fontSize: 9,
-    fontWeight: "600",
-    color: _sharedUi.macOSColors.text.muted,
-    fontFamily: "monospace"
-  },
   valueBox: {
     backgroundColor: _sharedUi.macOSColors.background.base,
     borderRadius: 6,
@@ -528,10 +490,5 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 8,
     fontWeight: "700",
     fontFamily: "monospace"
-  },
-  dataViewerContainer: {
-    marginTop: -12,
-    marginHorizontal: -12,
-    marginBottom: -12
   }
 });

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

@@ -152,7 +152,7 @@ function StorageEventListener() {
         return "#3B82F6";
       // Blue for merge
       default:
-        return "#6B7280";
+        return _sharedUi.macOSColors.text.icon;
     }
   };
   if (!isAsyncStorageAvailable) {
@@ -198,7 +198,7 @@ function StorageEventListener() {
           disabled: events.length === 0,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
             size: 14,
-            color: events.length > 0 ? "#6B7280" : "#374151"
+            color: events.length > 0 ? _sharedUi.macOSColors.text.icon : _sharedUi.macOSColors.border.toggle
           })
         })]
       })]
@@ -241,10 +241,10 @@ function StorageEventListener() {
 }
 const styles = _reactNative.StyleSheet.create({
   container: {
-    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    backgroundColor: "rgba(128, 128, 128, 0.06)",
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.08)",
+    borderColor: "rgba(128, 128, 128, 0.16)",
     marginBottom: 12,
     maxHeight: 200
   },
@@ -255,7 +255,7 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 8,
     borderBottomWidth: 1,
-    borderBottomColor: "rgba(255, 255, 255, 0.06)"
+    borderBottomColor: "rgba(128, 128, 128, 0.12)"
   },
   headerLeft: {
     flexDirection: "row",
@@ -265,7 +265,7 @@ const styles = _reactNative.StyleSheet.create({
   title: {
     fontSize: 12,
     fontWeight: "500",
-    color: "#9CA3AF",
+    color: _sharedUi.buoyColors.textSecondary,
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
@@ -280,7 +280,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   statsText: {
     fontSize: 11,
-    color: "#6B7280",
+    color: _sharedUi.macOSColors.text.icon,
     fontWeight: "500"
   },
   listeningIndicator: {
@@ -298,9 +298,9 @@ const styles = _reactNative.StyleSheet.create({
     width: 28,
     height: 28,
     borderRadius: 6,
-    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    backgroundColor: "rgba(128, 128, 128, 0.06)",
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.08)",
+    borderColor: "rgba(128, 128, 128, 0.16)",
     alignItems: "center",
     justifyContent: "center"
   },
@@ -321,7 +321,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   emptyText: {
     fontSize: 11,
-    color: "#6B7280",
+    color: _sharedUi.macOSColors.text.icon,
     fontStyle: "italic"
   },
   eventItem: {
@@ -331,7 +331,7 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 6,
     borderBottomWidth: 1,
-    borderBottomColor: "rgba(255, 255, 255, 0.03)"
+    borderBottomColor: "rgba(128, 128, 128, 0.06)"
   },
   eventLeft: {
     flex: 1,
@@ -347,11 +347,11 @@ const styles = _reactNative.StyleSheet.create({
   },
   eventData: {
     fontSize: 11,
-    color: "#9CA3AF",
+    color: _sharedUi.buoyColors.textSecondary,
     flex: 1
   },
   eventTime: {
     fontSize: 10,
-    color: "#6B7280"
+    color: _sharedUi.macOSColors.text.icon
   }
 });