@buoy-gg/storage 1.7.7 → 2.1.1

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

@@ -9,377 +9,276 @@ var _reactNative = require("react-native");
 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 _ThemedSplitView = require("./DiffViewer/modes/ThemedSplitView");
 var _diffThemes = require("./DiffViewer/themes/diffThemes");
-var _lineDiff = require("../utils/lineDiff");
 var _TreeDiffViewer = require("./DiffViewer/TreeDiffViewer");
 var _storageActionHelpers = require("../utils/storageActionHelpers");
+var _StorageEventActionButton = require("./StorageEventActionButton");
+var _storageTimeTravelUtils = require("../utils/storageTimeTravelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// Lazy load the license hooks to avoid circular dependencies
-let _useIsPro = null;
-let _licenseLoadAttempted = false;
-function loadLicenseModule() {
-  if (_licenseLoadAttempted) return;
-  _licenseLoadAttempted = true;
-  try {
-    const mod = require("@buoy-gg/license");
-    if (mod) {
-      _useIsPro = mod.useIsPro ?? null;
-    }
-  } catch {
-    // License package not available
+/**
+ * StorageEventDetailContent
+ *
+ * Detail view for storage events using the shared EventHistoryViewer component.
+ */
+
+// Unified storage event type (supports both AsyncStorage and MMKV)
+
+/**
+ * Get color for storage action
+ */
+function getActionColor(action) {
+  switch (action) {
+    case "setItem":
+    case "multiSet":
+      return _sharedUi.macOSColors.semantic.success;
+    case "removeItem":
+    case "multiRemove":
+    case "clear":
+      return _sharedUi.macOSColors.semantic.error;
+    case "mergeItem":
+    case "multiMerge":
+      return _sharedUi.macOSColors.semantic.info;
+    default:
+      return _sharedUi.macOSColors.text.muted;
   }
 }
-function getUseIsPro() {
-  loadLicenseModule();
-  return _useIsPro ?? (() => false);
-}
 
-// Free tier limit for event history navigation
-const FREE_TIER_EVENT_HISTORY_LIMIT = 3;
-
-// Unified storage event type (supports both AsyncStorage and MMKV)
+/**
+ * Get the type of a value
+ */
+function getValueType(value) {
+  if (value === null) return "null";
+  if (value === undefined) return "undefined";
+  if (Array.isArray(value)) return "array";
+  return typeof value;
+}
 
+/**
+ * Format timestamp with milliseconds
+ */
+function formatTimeWithMs(date) {
+  const h = String(date.getHours()).padStart(2, "0");
+  const m = String(date.getMinutes()).padStart(2, "0");
+  const s = String(date.getSeconds()).padStart(2, "0");
+  const ms = String(date.getMilliseconds()).padStart(3, "0");
+  return `${h}:${m}:${s}.${ms}`;
+}
 function StorageEventDetailContent({
   conversation,
   selectedEventIndex = 0,
   onEventIndexChange = () => {},
   disableInternalFooter = false
 }) {
-  // Check Pro status internally
-  const useIsPro = getUseIsPro();
-  const isPro = useIsPro();
-  // Internal view state - now managed internally instead of via props
-  const [internalActiveView, setInternalActiveView] = (0, _react.useState)("current");
-  // Compare-any-two state for Diff tab
+  // Pro feature gating
+  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");
+
+  // Compare indices for diff view
   const [leftIndex, setLeftIndex] = (0, _react.useState)(Math.max(0, selectedEventIndex - 1));
   const [rightIndex, setRightIndex] = (0, _react.useState)(selectedEventIndex);
-  const [isLeftPickerOpen, setIsLeftPickerOpen] = (0, _react.useState)(false);
-  const [isRightPickerOpen, setIsRightPickerOpen] = (0, _react.useState)(false);
-  const [diffViewerTab, setDiffViewerTab] = (0, _react.useState)("tree");
 
   // Track if preferences have been loaded
   const hasLoadedPreferences = (0, _react.useRef)(false);
 
+  // Get sorted events
+  const navigationItems = (0, _react.useMemo)(() => conversation.events.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime()), [conversation.events]);
+  const totalEvents = navigationItems.length;
+
   // Load saved preferences on mount
   (0, _react.useEffect)(() => {
     if (hasLoadedPreferences.current) return;
     const loadPreferences = async () => {
       try {
-        // Load detail view preference (current/diff)
         const savedDetailView = await _asyncStorage.default.getItem(_sharedUi.devToolsStorageKeys.storage.detailView());
         if (savedDetailView === "current" || savedDetailView === "diff") {
-          setInternalActiveView(savedDetailView);
+          setActiveView(savedDetailView);
         }
-
-        // Load diff viewer mode preference (split/tree)
         const savedDiffMode = await _asyncStorage.default.getItem(_sharedUi.devToolsStorageKeys.storage.diffViewerMode());
         if (savedDiffMode === "split" || savedDiffMode === "tree") {
-          setDiffViewerTab(savedDiffMode);
+          setDiffMode(savedDiffMode);
         }
         hasLoadedPreferences.current = true;
-      } catch (error) {
-        // Failed to load view preferences
+      } catch {
+        // Failed to load preferences
       }
     };
     loadPreferences();
   }, []);
 
-  // Save detail view preference when changed
+  // Keep compare indices synced to selection
+  (0, _react.useEffect)(() => {
+    const newRight = Math.min(totalEvents - 1, Math.max(0, selectedEventIndex));
+    const newLeft = Math.max(0, Math.min(newRight - 1, selectedEventIndex - 1));
+    setLeftIndex(newLeft);
+    setRightIndex(newRight);
+  }, [selectedEventIndex, totalEvents]);
+
+  // Save view preference when changed
   const handleViewChange = (0, _react.useCallback)(async view => {
-    setInternalActiveView(view);
+    setActiveView(view);
     try {
       await _asyncStorage.default.setItem(_sharedUi.devToolsStorageKeys.storage.detailView(), view);
-    } catch (error) {
-      // Failed to save detail view preference
+    } catch {
+      // Failed to save preference
     }
   }, []);
 
-  // Save diff viewer mode preference when changed
+  // Save diff mode preference when changed
   const handleDiffModeChange = (0, _react.useCallback)(async mode => {
-    setDiffViewerTab(mode);
+    setDiffMode(mode);
     try {
       await _asyncStorage.default.setItem(_sharedUi.devToolsStorageKeys.storage.diffViewerMode(), mode);
-    } catch (error) {
-      // Failed to save diff viewer mode preference
+    } catch {
+      // Failed to save preference
     }
   }, []);
-  const getActionColor = action => {
-    switch (action) {
-      case "setItem":
-      case "multiSet":
-        return _sharedUi.macOSColors.semantic.success;
-      case "removeItem":
-      case "multiRemove":
-      case "clear":
-        return _sharedUi.macOSColors.semantic.error;
-      case "mergeItem":
-      case "multiMerge":
-        return _sharedUi.macOSColors.semantic.info;
-      default:
-        return _sharedUi.macOSColors.text.muted;
+
+  // Get current event
+  const selectedEvent = navigationItems[selectedEventIndex];
+  const valueToShow = selectedEvent?.data?.value ?? conversation.currentValue;
+  const action = selectedEvent?.action;
+  const valueType = getValueType(valueToShow);
+  const actionColor = getActionColor(action || "");
+
+  // Get events for diff comparison
+  const leftEvent = navigationItems[Math.max(0, Math.min(totalEvents - 1, leftIndex))];
+  const rightEvent = navigationItems[Math.max(0, Math.min(totalEvents - 1, rightIndex))];
+
+  // Create event display info for compare bar
+  const leftEventInfo = (0, _react.useMemo)(() => ({
+    index: leftIndex,
+    label: `#${leftIndex + 1} / ${totalEvents}`,
+    timestamp: leftEvent ? formatTimeWithMs(leftEvent.timestamp) : "",
+    relativeTime: leftEvent ? (0, _sharedUi.formatRelativeTime)(leftEvent.timestamp) : "",
+    badge: leftEvent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.actionBadgeSmall, {
+        backgroundColor: `${getActionColor(leftEvent.action)}20`
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.actionTextSmall, {
+          color: getActionColor(leftEvent.action)
+        }],
+        children: (0, _storageActionHelpers.translateStorageAction)(leftEvent.action)
+      })
+    }) : undefined
+  }), [leftIndex, leftEvent, totalEvents]);
+  const rightEventInfo = (0, _react.useMemo)(() => ({
+    index: rightIndex,
+    label: `#${rightIndex + 1} / ${totalEvents}`,
+    timestamp: rightEvent ? formatTimeWithMs(rightEvent.timestamp) : "",
+    relativeTime: rightEvent ? (0, _sharedUi.formatRelativeTime)(rightEvent.timestamp) : "",
+    badge: rightEvent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.actionBadgeSmall, {
+        backgroundColor: `${getActionColor(rightEvent.action)}20`
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.actionTextSmall, {
+          color: getActionColor(rightEvent.action)
+        }],
+        children: (0, _storageActionHelpers.translateStorageAction)(rightEvent.action)
+      })
+    }) : undefined
+  }), [rightIndex, rightEvent, totalEvents]);
+
+  // Diff mode tabs
+  const diffModeTabs = (0, _react.useMemo)(() => [{
+    key: "tree",
+    label: "TREE VIEW"
+  }, {
+    key: "split",
+    label: "SPLIT VIEW"
+  }], []);
+
+  // Navigation handlers for compare bar
+  const handleLeftPrevious = (0, _react.useCallback)(() => {
+    if (leftIndex > 0) {
+      setLeftIndex(leftIndex - 1);
+    }
+  }, [leftIndex]);
+  const handleLeftNext = (0, _react.useCallback)(() => {
+    if (leftIndex < rightIndex - 1) {
+      setLeftIndex(leftIndex + 1);
+    }
+  }, [leftIndex, rightIndex]);
+  const handleRightPrevious = (0, _react.useCallback)(() => {
+    if (rightIndex > leftIndex + 1) {
+      setRightIndex(rightIndex - 1);
     }
-  };
-  const renderValueContent = (value, label, action) => {
-    const parsed = (0, _sharedUi.parseValue)(value);
-    const type = parsed === null ? "null" : parsed === undefined ? "undefined" : Array.isArray(parsed) ? "array" : typeof parsed;
+  }, [rightIndex, leftIndex]);
+  const handleRightNext = (0, _react.useCallback)(() => {
+    if (rightIndex < totalEvents - 1) {
+      setRightIndex(rightIndex + 1);
+    }
+  }, [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.valueContent,
+      style: styles.contentCard,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.valueHeader,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.valueLabel,
-          children: label
+          children: "CURRENT VALUE"
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.valueHeaderBadges,
           children: [action && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: [styles.actionBadge, {
-              backgroundColor: `${getActionColor(action)}20`
+              backgroundColor: `${actionColor}20`
             }],
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.actionText, {
-                color: getActionColor(action)
+                color: actionColor
               }],
               children: (0, _storageActionHelpers.translateStorageAction)(action)
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.typeBadge],
+            style: styles.typeBadge,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: styles.typeText,
-              children: type.toUpperCase()
+              children: valueType.toUpperCase()
             })
           })]
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.valueBox,
-        children: type === "object" || type === "array" ? parsed && (Array.isArray(parsed) && parsed.length > 0 || typeof parsed === "object" && Object.keys(parsed).length > 0) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
+        children: (valueType === "object" || valueType === "array") && parsed ? Array.isArray(parsed) && parsed.length > 0 || typeof parsed === "object" && Object.keys(parsed).length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
           title: "",
           data: parsed,
           showTypeFilter: false
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.valueText,
-          children: type === "array" ? "[]" : "{}"
+          children: valueType === "array" ? "[]" : "{}"
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.valueText,
-          children: parsed === null ? "null" : parsed === undefined ? "undefined" : type === "string" ? `"${parsed}"` : String(parsed)
+          children: parsed === null ? "null" : parsed === undefined ? "undefined" : valueType === "string" ? `"${parsed}"` : String(parsed)
         })
       })]
     });
-  };
-
-  // Get all events sorted by time
-  const navigationItems = conversation.events.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
-  const totalEvents = navigationItems.length;
-
-  // Free tier limit - max event index accessible
-  const maxAccessibleEventIndex = isPro ? totalEvents - 1 : Math.min(FREE_TIER_EVENT_HISTORY_LIMIT - 1, totalEvents - 1);
-  const lockedEventCount = isPro ? 0 : Math.max(0, totalEvents - FREE_TIER_EVENT_HISTORY_LIMIT);
-
-  // Keep compare indices synced to selection
-  (0, _react.useEffect)(() => {
-    const newRight = Math.min(totalEvents - 1, Math.max(0, selectedEventIndex));
-    const newLeft = Math.max(0, Math.min(newRight - 1, selectedEventIndex - 1));
-    setLeftIndex(newLeft);
-    setRightIndex(newRight);
-  }, [selectedEventIndex, totalEvents]);
-
-  // Precise time HH:MM:SS.mmm
-  const formatTimeWithMs = (0, _react.useCallback)(date => {
-    const h = String(date.getHours()).padStart(2, "0");
-    const m = String(date.getMinutes()).padStart(2, "0");
-    const s = String(date.getSeconds()).padStart(2, "0");
-    const ms = String(date.getMilliseconds()).padStart(3, "0");
-    return `${h}:${m}:${s}.${ms}`;
-  }, []);
-  const bumpLeft = delta => {
-    if (totalEvents < 2) return;
-    const maxLeft = isPro ? totalEvents - 2 : Math.min(maxAccessibleEventIndex - 1, totalEvents - 2);
-    let next = Math.max(0, Math.min(maxLeft, leftIndex + delta));
-    if (next >= rightIndex) next = Math.max(0, rightIndex - 1);
-    setLeftIndex(next);
-  };
-  const bumpRight = delta => {
-    if (totalEvents < 2) return;
-    const maxRight = isPro ? totalEvents - 1 : maxAccessibleEventIndex;
-    let next = Math.max(1, Math.min(maxRight, rightIndex + delta));
-    if (next <= leftIndex) next = Math.min(maxRight, leftIndex + 1);
-    setRightIndex(next);
-  };
-
-  // Render current value tab
-  const renderCurrentValue = () => {
-    const selectedEvent = navigationItems[selectedEventIndex];
-    const valueToShow = selectedEvent?.data?.value ?? conversation.currentValue;
-    const action = selectedEvent?.action;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.fullPageSection,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.contentCard,
-        children: renderValueContent(valueToShow, "CURRENT VALUE", action)
-      })
-    });
-  };
+  }, [valueToShow, action, actionColor, valueType]);
 
-  // Render diff tab
-  const renderDiff = () => {
-    if (navigationItems.length === 0) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.emptyState,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertCircle, {
-          size: 32,
-          color: _sharedUi.macOSColors.text.muted
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.emptyText,
-          children: "No changes to display"
-        })]
-      });
-    }
-    const leftEvent = navigationItems[Math.max(0, Math.min(totalEvents - 1, leftIndex))];
-    const rightEvent = navigationItems[Math.max(0, Math.min(totalEvents - 1, rightIndex))];
-    const previousValue = leftEvent?.data?.value ?? null;
-    const currentValue = rightEvent?.data?.value;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.fullPageSection,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.diffViewerTabs,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          style: [styles.diffViewerTab, diffViewerTab === "split" && styles.diffViewerTabActive],
-          onPress: () => handleDiffModeChange("split"),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.diffViewerTabText, diffViewerTab === "split" && styles.diffViewerTabTextActive],
-            children: "SPLIT VIEW"
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          style: [styles.diffViewerTab, diffViewerTab === "tree" && styles.diffViewerTabActive],
-          onPress: () => handleDiffModeChange("tree"),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.diffViewerTabText, diffViewerTab === "tree" && styles.diffViewerTabTextActive],
-            children: "TREE VIEW"
-          })
-        })]
-      }), totalEvents > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.compareBar,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.compareSide,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.compareLabelRow,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.compareLabel, {
-                color: _sharedUi.macOSColors.semantic.debug
-              }],
-              children: "PREV"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: [styles.compareActionBadge, {
-                backgroundColor: `${getActionColor(leftEvent.action)}20`
-              }],
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.compareActionText, {
-                  color: getActionColor(leftEvent.action)
-                }],
-                children: (0, _storageActionHelpers.translateStorageAction)(leftEvent.action)
-              })
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.compareControls,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-              onPress: () => bumpLeft(-1),
-              disabled: leftIndex <= 0,
-              style: [styles.compareBtn, leftIndex <= 0 && styles.compareBtnDisabled],
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronLeft, {
-                size: 14,
-                color: leftIndex <= 0 ? _sharedUi.macOSColors.text.muted : _sharedUi.macOSColors.text.secondary
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-              style: styles.compareMeta,
-              onPress: () => setIsLeftPickerOpen(true),
-              activeOpacity: 0.8,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-                style: styles.compareIndex,
-                children: ["#", leftIndex + 1, " / ", totalEvents]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.compareTime,
-                children: formatTimeWithMs(leftEvent.timestamp)
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-                style: styles.compareRelative,
-                children: ["(", (0, _sharedUi.formatRelativeTime)(leftEvent.timestamp), ")"]
-              })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-              onPress: () => bumpLeft(1),
-              disabled: leftIndex >= rightIndex - 1,
-              style: [styles.compareBtn, leftIndex >= rightIndex - 1 && styles.compareBtnDisabled],
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
-                size: 14,
-                color: leftIndex >= rightIndex - 1 ? _sharedUi.macOSColors.text.muted : _sharedUi.macOSColors.text.secondary
-              })
-            })]
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.compareDivider
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.compareSide,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.compareLabelRow,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.compareLabel, {
-                color: _sharedUi.macOSColors.semantic.success
-              }],
-              children: "CUR"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: [styles.compareActionBadge, {
-                backgroundColor: `${getActionColor(rightEvent.action)}20`
-              }],
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.compareActionText, {
-                  color: getActionColor(rightEvent.action)
-                }],
-                children: (0, _storageActionHelpers.translateStorageAction)(rightEvent.action)
-              })
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.compareControls,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-              onPress: () => bumpRight(-1),
-              disabled: rightIndex <= leftIndex + 1,
-              style: [styles.compareBtn, rightIndex <= leftIndex + 1 && styles.compareBtnDisabled],
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronLeft, {
-                size: 14,
-                color: rightIndex <= leftIndex + 1 ? _sharedUi.macOSColors.text.muted : _sharedUi.macOSColors.text.secondary
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-              style: styles.compareMeta,
-              onPress: () => setIsRightPickerOpen(true),
-              activeOpacity: 0.8,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-                style: styles.compareIndex,
-                children: ["#", rightIndex + 1, " / ", totalEvents]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.compareTime,
-                children: formatTimeWithMs(rightEvent.timestamp)
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-                style: styles.compareRelative,
-                children: ["(", (0, _sharedUi.formatRelativeTime)(rightEvent.timestamp), ")"]
-              })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-              onPress: () => bumpRight(1),
-              disabled: rightIndex >= totalEvents - 1,
-              style: [styles.compareBtn, rightIndex >= totalEvents - 1 && styles.compareBtnDisabled],
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
-                size: 14,
-                color: rightIndex >= totalEvents - 1 ? _sharedUi.macOSColors.text.muted : _sharedUi.macOSColors.text.secondary
-              })
-            })]
-          })]
-        })]
-      }), diffViewerTab === "split" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+  // Render diff content
+  const renderDiffContent = (0, _react.useCallback)(() => {
+    const previousValue = (0, _sharedUi.parseValue)(leftEvent?.data?.value ?? null);
+    const currentValue = (0, _sharedUi.parseValue)(rightEvent?.data?.value);
+    if (diffMode === "split") {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
         style: {
           flex: 1
         },
         showsVerticalScrollIndicator: true,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemedSplitView.ThemedSplitView, {
-          oldValue: (0, _sharedUi.parseValue)(previousValue),
-          newValue: (0, _sharedUi.parseValue)(currentValue),
+          oldValue: previousValue,
+          newValue: currentValue,
           differences: [],
           theme: _diffThemes.diffThemes.devToolsDefault,
           options: {
@@ -392,245 +291,185 @@ function StorageEventDetailContent({
           },
           showThemeName: false
         })
-      }), diffViewerTab === "tree" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeDiffViewer.TreeDiffViewer, {
-        oldValue: (0, _sharedUi.parseValue)(previousValue),
-        newValue: (0, _sharedUi.parseValue)(currentValue)
-      })]
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeDiffViewer.TreeDiffViewer, {
+      oldValue: previousValue,
+      newValue: currentValue
     });
-  };
+  }, [leftEvent, rightEvent, diffMode]);
+
+  // Footer navigation handlers
+  const handleFooterPrevious = (0, _react.useCallback)(() => {
+    onEventIndexChange(Math.max(0, selectedEventIndex - 1));
+  }, [selectedEventIndex, onEventIndexChange]);
+  const handleFooterNext = (0, _react.useCallback)(() => {
+    onEventIndexChange(Math.min(totalEvents - 1, selectedEventIndex + 1));
+  }, [selectedEventIndex, totalEvents, onEventIndexChange]);
+
+  // Time-travel action handlers
+  const handleUndo = (0, _react.useCallback)(async () => {
+    if (!isPro) {
+      setShowProModal(true);
+      return;
+    }
+    if (!selectedEvent || selectedEvent.storageType === "mmkv") return;
+    try {
+      await (0, _storageTimeTravelUtils.undoOperation)(selectedEvent);
+    } catch {
+      // Silent fail
+    }
+  }, [selectedEvent, isPro]);
+  const handleJump = (0, _react.useCallback)(async () => {
+    if (!isPro) {
+      setShowProModal(true);
+      return;
+    }
+    if (!selectedEvent || selectedEvent.storageType === "mmkv") return;
+    const asyncEvents = navigationItems.filter(e => e.storageType !== "mmkv");
+    const targetIndex = asyncEvents.findIndex(e => e.timestamp.getTime() === selectedEvent.timestamp.getTime());
+    if (targetIndex === -1) return;
+    try {
+      await (0, _storageTimeTravelUtils.jumpToState)(asyncEvents, targetIndex);
+    } catch {
+      // Silent fail
+    }
+  }, [selectedEvent, navigationItems, isPro]);
+  const handleCopy = (0, _react.useCallback)(async () => {
+    if (!selectedEvent) return;
+    const eventData = {
+      action: selectedEvent.action,
+      timestamp: selectedEvent.timestamp.toISOString(),
+      data: selectedEvent.data
+    };
+    await (0, _sharedUi.copyToClipboard)(eventData);
+  }, [selectedEvent]);
+
+  // Check if current event supports actions
+  const isAsyncStorageEvent = selectedEvent?.storageType !== "mmkv";
+  const canUndoEvent = isAsyncStorageEvent && selectedEvent && (0, _storageTimeTravelUtils.canUndo)(selectedEvent);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [styles.contentOnly, {
-        flex: 1,
-        paddingBottom: !disableInternalFooter && totalEvents > 1 ? 80 : 0
-      }],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.viewToggleContainer,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: [styles.viewToggleCard, internalActiveView === "current" && styles.viewToggleCardActive],
-          onPress: () => handleViewChange("current"),
-          activeOpacity: 0.8,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.viewToggleContent,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Database, {
-              size: 16,
-              color: internalActiveView === "current" ? _sharedUi.macOSColors.semantic.info : _sharedUi.macOSColors.text.secondary
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.viewToggleLabel, internalActiveView === "current" && styles.viewToggleLabelActive],
-              children: "CURRENT VALUE"
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.viewToggleDescription, internalActiveView === "current" && {
-              color: _sharedUi.macOSColors.text.primary
-            }],
-            children: "View the current stored value"
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: [styles.viewToggleCard, internalActiveView === "diff" && styles.viewToggleCardActive],
-          onPress: () => handleViewChange("diff"),
-          activeOpacity: 0.8,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.viewToggleContent,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.GitBranch, {
-              size: 16,
-              color: internalActiveView === "diff" ? _sharedUi.macOSColors.semantic.success : _sharedUi.macOSColors.text.secondary
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.viewToggleLabel, internalActiveView === "diff" && styles.viewToggleLabelActive],
-              children: "DIFF VIEW"
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.viewToggleDescription, internalActiveView === "diff" && {
-              color: _sharedUi.macOSColors.text.primary
-            }],
-            children: "Compare changes between versions"
-          })]
-        })]
-      }), lockedEventCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.lockedEventsBannerGlobal,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Lock, {
-          size: 14,
-          color: _sharedUi.macOSColors.semantic.warning
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: styles.lockedEventsBannerText,
-          children: [lockedEventCount, " older ", lockedEventCount === 1 ? 'event' : 'events', " locked"]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.lockedEventsBannerSubtext,
-          children: "Upgrade to Pro for full history"
-        })]
-      }), internalActiveView === "current" && renderCurrentValue(), internalActiveView === "diff" && renderDiff()]
-    }), (isLeftPickerOpen || isRightPickerOpen) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.pickerOverlay,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: styles.pickerBackdrop,
-        activeOpacity: 1,
-        onPress: () => {
-          setIsLeftPickerOpen(false);
-          setIsRightPickerOpen(false);
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [styles.pickerCard, isLeftPickerOpen && styles.pickerCardLeft, isRightPickerOpen && styles.pickerCardRight],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.pickerHeader,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-            style: [styles.pickerTitle, isLeftPickerOpen && styles.pickerTitleLeft, isRightPickerOpen && styles.pickerTitleRight],
-            children: ["Select ", isLeftPickerOpen ? "PREV" : "CUR", " Event"]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            onPress: () => {
-              setIsLeftPickerOpen(false);
-              setIsRightPickerOpen(false);
-            },
-            style: styles.pickerClose,
-            accessibilityLabel: "Close event picker",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
-              size: 16,
-              color: _sharedUi.macOSColors.text.secondary
-            })
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.pickerDivider
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-          style: styles.pickerScroll,
-          contentContainerStyle: styles.pickerList,
-          showsVerticalScrollIndicator: true,
-          nestedScrollEnabled: true,
-          children: navigationItems.slice(0, maxAccessibleEventIndex + 1).map((item, idx) => {
-            const disabled = isLeftPickerOpen ? idx >= rightIndex : idx <= leftIndex;
-            const isSelected = isLeftPickerOpen ? idx === leftIndex : idx === rightIndex;
-            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-              disabled: disabled,
-              onPress: () => {
-                if (isLeftPickerOpen) {
-                  setLeftIndex(Math.min(idx, rightIndex - 1));
-                  setIsLeftPickerOpen(false);
-                } else {
-                  setRightIndex(Math.max(idx, leftIndex + 1));
-                  setIsRightPickerOpen(false);
-                }
-              },
-              style: [styles.pickerItem, isSelected && styles.pickerItemSelected, isSelected && isLeftPickerOpen && styles.pickerItemSelectedLeft, isSelected && isRightPickerOpen && styles.pickerItemSelectedRight, disabled && styles.pickerItemDisabled],
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-                style: styles.pickerIndex,
-                children: ["#", idx + 1]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.pickerTime,
-                children: formatTimeWithMs(item.timestamp)
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-                style: styles.pickerRelative,
-                children: ["(", (0, _sharedUi.formatRelativeTime)(item.timestamp), ")"]
-              }), (() => {
-                const targetOld = isLeftPickerOpen ? item : navigationItems[leftIndex];
-                const targetNew = isLeftPickerOpen ? navigationItems[rightIndex] : item;
-                const oldVal = (0, _sharedUi.parseValue)(targetOld.data?.value);
-                const newVal = (0, _sharedUi.parseValue)(targetNew.data?.value);
-                const diffs = (0, _lineDiff.computeLineDiff)(oldVal, newVal, {
-                  compareMethod: "words",
-                  disableWordDiff: false,
-                  showDiffOnly: false,
-                  contextLines: 0
-                });
-                const added = diffs.filter(d => d.type === _lineDiff.DiffType.ADDED).length;
-                const removed = diffs.filter(d => d.type === _lineDiff.DiffType.REMOVED).length;
-                const modified = diffs.filter(d => d.type === _lineDiff.DiffType.MODIFIED).length;
-                return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-                  style: styles.pickerCounts,
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-                    style: [styles.pickerCountText, {
-                      color: _diffThemes.diffThemes.devToolsDefault.summaryAddedText
-                    }],
-                    children: ["+", added]
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-                    style: [styles.pickerCountText, {
-                      color: _diffThemes.diffThemes.devToolsDefault.summaryRemovedText
-                    }],
-                    children: ["-", removed]
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-                    style: [styles.pickerCountText, {
-                      color: _diffThemes.diffThemes.devToolsDefault.summaryModifiedText
-                    }],
-                    children: ["~", modified]
-                  })]
-                });
-              })()]
-            }, idx);
-          })
-        })]
+    children: [isAsyncStorageEvent && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.actionButtonsContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageEventActionButton.StorageEventActionButton, {
+        type: "undo",
+        text: "UNDO",
+        onPress: handleUndo,
+        disabled: !canUndoEvent,
+        locked: !isPro
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageEventActionButton.StorageEventActionButton, {
+        type: "jump",
+        text: "JUMP",
+        onPress: handleJump,
+        locked: !isPro
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageEventActionButton.StorageEventActionButton, {
+        type: "copy",
+        text: "COPY",
+        onPress: handleCopy
       })]
-    }), !disableInternalFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EventStepperFooter, {
-      currentIndex: selectedEventIndex,
-      totalItems: totalEvents,
-      onPrevious: () => onEventIndexChange(Math.max(0, selectedEventIndex - 1)),
-      onNext: () => onEventIndexChange(Math.min(totalEvents - 1, selectedEventIndex + 1)),
-      itemLabel: "Event",
-      subtitle: (0, _sharedUi.formatRelativeTime)(navigationItems[selectedEventIndex]?.timestamp),
-      absolute: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EventHistoryViewer
+    // View Toggle
+    , {
+      activeView: activeView,
+      onViewChange: handleViewChange,
+      currentViewLabel: "CURRENT VALUE",
+      currentViewDescription: "View the current stored value",
+      currentViewIcon: _sharedUi.Database,
+      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
+      // Compare Bar
+      ,
+      leftEvent: leftEventInfo,
+      rightEvent: rightEventInfo,
+      showCompareNavigation: true,
+      onLeftPrevious: handleLeftPrevious,
+      onLeftNext: handleLeftNext,
+      onRightPrevious: handleRightPrevious,
+      onRightNext: handleRightNext,
+      canLeftPrevious: leftIndex > 0,
+      canLeftNext: leftIndex < rightIndex - 1,
+      canRightPrevious: rightIndex > leftIndex + 1,
+      canRightNext: rightIndex < totalEvents - 1
+      // Footer
+      ,
+      disableInternalFooter: disableInternalFooter,
+      footerCurrentIndex: selectedEventIndex,
+      footerTotalItems: totalEvents,
+      footerItemLabel: "Event",
+      footerSubtitle: (0, _sharedUi.formatRelativeTime)(selectedEvent?.timestamp),
+      onFooterPrevious: handleFooterPrevious,
+      onFooterNext: handleFooterNext
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProUpgradeModal, {
+      visible: showProModal,
+      onClose: () => setShowProModal(false),
+      featureName: "Storage Time-Travel"
     })]
   });
 }
 
-// External footer component to be rendered by the modal outside the ScrollView
+/**
+ * External footer component for modal use
+ */
 function StorageEventDetailFooter({
   conversation,
   selectedEventIndex = 0,
   onEventIndexChange = () => {}
 }) {
-  // Check Pro status internally
-  const useIsPro = getUseIsPro();
-  const isPro = useIsPro();
   const navigationItems = conversation.events.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
   const totalEvents = navigationItems.length;
-
-  // Free tier limit for navigation
-  const maxAccessibleIndex = isPro ? totalEvents - 1 : Math.min(FREE_TIER_EVENT_HISTORY_LIMIT - 1, totalEvents - 1);
-  const lockedCount = isPro ? 0 : Math.max(0, totalEvents - FREE_TIER_EVENT_HISTORY_LIMIT);
-
-  // Calculate display total (accessible events for free users)
-  const displayTotal = isPro ? totalEvents : Math.min(totalEvents, FREE_TIER_EVENT_HISTORY_LIMIT);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EventStepperFooter, {
     currentIndex: selectedEventIndex,
-    totalItems: displayTotal,
+    totalItems: totalEvents,
     onPrevious: () => onEventIndexChange(Math.max(0, selectedEventIndex - 1)),
-    onNext: () => onEventIndexChange(Math.min(maxAccessibleIndex, selectedEventIndex + 1)),
+    onNext: () => onEventIndexChange(Math.min(totalEvents - 1, selectedEventIndex + 1)),
     itemLabel: "Event",
-    subtitle: lockedCount > 0 ? `${(0, _sharedUi.formatRelativeTime)(navigationItems[selectedEventIndex]?.timestamp)} • ${lockedCount} locked` : (0, _sharedUi.formatRelativeTime)(navigationItems[selectedEventIndex]?.timestamp)
+    subtitle: (0, _sharedUi.formatRelativeTime)(navigationItems[selectedEventIndex]?.timestamp)
   });
 }
 const styles = _reactNative.StyleSheet.create({
-  contentOnly: {
-    flex: 1,
-    backgroundColor: _sharedUi.macOSColors.background.base
-  },
-  fullPageSection: {
-    flex: 1,
-    paddingHorizontal: 14,
-    paddingVertical: 10
-  },
-  emptyState: {
-    flex: 1,
-    alignItems: "center",
+  // Action Buttons
+  actionButtonsContainer: {
+    flexDirection: "row",
     justifyContent: "center",
-    paddingVertical: 48
-  },
-  emptyText: {
-    marginTop: 12,
-    fontSize: 14,
-    color: _sharedUi.macOSColors.text.secondary,
-    fontFamily: "monospace"
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.buoyColors.border
   },
-  card: {
+  // Content Card
+  contentCard: {
     backgroundColor: _sharedUi.macOSColors.background.card,
     borderRadius: 14,
     padding: 14,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default
-  },
-  valueContent: {
-    marginTop: 4
+    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: 4
+    marginBottom: 8
   },
   valueLabel: {
     fontSize: 10,
@@ -648,9 +487,7 @@ const styles = _reactNative.StyleSheet.create({
   actionBadge: {
     paddingHorizontal: 8,
     paddingVertical: 2,
-    borderRadius: 4,
-    borderWidth: 1,
-    borderColor: "transparent"
+    borderRadius: 4
   },
   actionText: {
     fontSize: 9,
@@ -671,7 +508,7 @@ const styles = _reactNative.StyleSheet.create({
     fontFamily: "monospace"
   },
   valueBox: {
-    backgroundColor: _sharedUi.macOSColors.background.card,
+    backgroundColor: _sharedUi.macOSColors.background.base,
     borderRadius: 6,
     borderWidth: 1,
     borderColor: _sharedUi.macOSColors.border.input,
@@ -683,343 +520,15 @@ const styles = _reactNative.StyleSheet.create({
     fontFamily: "monospace",
     lineHeight: 18
   },
-  // Compare picker styles
-  compareBar: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    backgroundColor: _sharedUi.macOSColors.background.card,
-    borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
-    borderRadius: 6,
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    marginBottom: 8,
-    gap: 8
-  },
-  compareSide: {
-    flex: 1
-  },
-  compareLabelRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    marginBottom: 2
-  },
-  compareLabel: {
-    fontSize: 10,
-    fontFamily: "monospace",
-    fontWeight: "700",
-    letterSpacing: 0.5,
-    textTransform: "uppercase"
-  },
-  compareActionBadge: {
+  // Action badges for compare bar
+  actionBadgeSmall: {
     paddingHorizontal: 6,
     paddingVertical: 1,
     borderRadius: 3
   },
-  compareActionText: {
+  actionTextSmall: {
     fontSize: 8,
     fontWeight: "700",
-    fontFamily: "monospace",
-    letterSpacing: 0.3
-  },
-  compareControls: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  compareBtn: {
-    width: 26,
-    height: 26,
-    borderRadius: 6,
-    backgroundColor: _sharedUi.macOSColors.background.card,
-    borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  compareBtnDisabled: {
-    opacity: 0.4
-  },
-  compareMeta: {
-    flex: 1
-  },
-  compareTime: {
-    fontSize: 11,
-    color: _sharedUi.macOSColors.text.primary,
-    fontFamily: "monospace"
-  },
-  compareIndex: {
-    fontSize: 10,
-    color: _sharedUi.macOSColors.text.secondary,
-    fontFamily: "monospace"
-  },
-  compareRelative: {
-    fontSize: 10,
-    color: _sharedUi.macOSColors.text.secondary,
-    fontFamily: "monospace"
-  },
-  compareDivider: {
-    width: 1,
-    height: 34,
-    backgroundColor: _sharedUi.macOSColors.background.input
-  },
-  pickerOverlay: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
-    zIndex: 20,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  pickerBackdrop: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
-    backgroundColor: "rgba(0,0,0,0.65)"
-  },
-  pickerCard: {
-    width: "86%",
-    maxHeight: 320,
-    backgroundColor: _sharedUi.macOSColors.background.card,
-    borderRadius: 16,
-    borderWidth: 2,
-    padding: 16,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.5,
-    shadowRadius: 40,
-    elevation: 15
-  },
-  pickerCardLeft: {
-    borderColor: _sharedUi.macOSColors.semantic.debug,
-    shadowColor: _sharedUi.macOSColors.semantic.debug
-  },
-  pickerCardRight: {
-    borderColor: _sharedUi.macOSColors.semantic.success,
-    shadowColor: _sharedUi.macOSColors.semantic.success
-  },
-  pickerHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between"
-  },
-  pickerClose: {
-    padding: 6,
-    borderRadius: 6,
-    backgroundColor: _sharedUi.macOSColors.background.card,
-    borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default
-  },
-  pickerDivider: {
-    height: 1,
-    backgroundColor: _sharedUi.macOSColors.background.input,
-    marginVertical: 8
-  },
-  pickerScroll: {
-    maxHeight: 260
-  },
-  pickerTitle: {
-    fontSize: 13,
-    fontWeight: "700",
-    fontFamily: "monospace",
-    textTransform: "uppercase",
-    marginBottom: 8,
-    letterSpacing: 0.6
-  },
-  pickerTitleLeft: {
-    color: _sharedUi.macOSColors.semantic.debug
-  },
-  pickerTitleRight: {
-    color: _sharedUi.macOSColors.semantic.success
-  },
-  pickerList: {
-    gap: 4
-  },
-  pickerItem: {
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    borderRadius: 10,
-    backgroundColor: _sharedUi.macOSColors.background.base,
-    borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginBottom: 6
-  },
-  pickerItemSelected: {
-    borderWidth: 1.5,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 12,
-    elevation: 4
-  },
-  pickerItemSelectedLeft: {
-    backgroundColor: _sharedUi.macOSColors.semantic.debug + "1A",
-    borderColor: _sharedUi.macOSColors.semantic.debug,
-    shadowColor: _sharedUi.macOSColors.semantic.debug
-  },
-  pickerItemSelectedRight: {
-    backgroundColor: _sharedUi.macOSColors.semantic.successBackground + "30",
-    borderColor: _sharedUi.macOSColors.semantic.success,
-    shadowColor: _sharedUi.macOSColors.semantic.success
-  },
-  pickerItemDisabled: {
-    opacity: 0.4
-  },
-  pickerIndex: {
-    fontSize: 10,
-    color: _sharedUi.macOSColors.text.secondary,
-    fontFamily: "monospace",
-    width: 40
-  },
-  pickerTime: {
-    fontSize: 11,
-    color: _sharedUi.macOSColors.text.primary,
-    fontFamily: "monospace",
-    flex: 1
-  },
-  pickerRelative: {
-    fontSize: 10,
-    color: _sharedUi.macOSColors.text.secondary,
     fontFamily: "monospace"
-  },
-  pickerCounts: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginLeft: "auto"
-  },
-  pickerCountText: {
-    fontSize: 10,
-    fontFamily: "monospace",
-    fontWeight: "700"
-  },
-  diffViewerTabs: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-around",
-    backgroundColor: _sharedUi.macOSColors.background.card,
-    borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
-    borderRadius: 6,
-    paddingHorizontal: 4,
-    paddingVertical: 4,
-    marginBottom: 8,
-    gap: 4
-  },
-  diffViewerTab: {
-    flex: 1,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    borderRadius: 4,
-    alignItems: "center",
-    backgroundColor: "transparent"
-  },
-  diffViewerTabActive: {
-    backgroundColor: _sharedUi.macOSColors.semantic.infoBackground,
-    borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.semantic.info + "40"
-  },
-  diffViewerTabText: {
-    fontSize: 11,
-    fontFamily: "monospace",
-    fontWeight: "600",
-    color: _sharedUi.macOSColors.text.secondary,
-    letterSpacing: 0.5
-  },
-  diffViewerTabTextActive: {
-    color: _sharedUi.macOSColors.text.primary
-  },
-  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
-  },
-  // View Toggle Cards
-  viewToggleContainer: {
-    flexDirection: "row",
-    gap: 12,
-    padding: 14,
-    backgroundColor: _sharedUi.macOSColors.background.base
-  },
-  viewToggleCard: {
-    flex: 1,
-    backgroundColor: _sharedUi.macOSColors.background.card,
-    borderRadius: 14,
-    borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
-    padding: 14,
-    gap: 8
-  },
-  viewToggleCardActive: {
-    borderWidth: 1.5,
-    borderColor: _sharedUi.macOSColors.semantic.info,
-    backgroundColor: _sharedUi.macOSColors.semantic.infoBackground + "30",
-    shadowColor: _sharedUi.macOSColors.semantic.info,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 8,
-    elevation: 3
-  },
-  viewToggleContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  viewToggleLabel: {
-    fontSize: 12,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-    color: _sharedUi.macOSColors.text.secondary,
-    textTransform: "uppercase"
-  },
-  viewToggleLabelActive: {
-    color: _sharedUi.macOSColors.text.primary
-  },
-  viewToggleDescription: {
-    fontSize: 11,
-    color: _sharedUi.macOSColors.text.muted,
-    lineHeight: 16
-  },
-  lockedEventsBannerGlobal: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    backgroundColor: _sharedUi.macOSColors.semantic.warning + "15",
-    borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.semantic.warning + "30",
-    borderRadius: 10,
-    paddingVertical: 12,
-    paddingHorizontal: 14,
-    marginHorizontal: 14,
-    marginBottom: 4
-  },
-  lockedEventsBannerText: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: _sharedUi.macOSColors.semantic.warning,
-    fontFamily: "monospace"
-  },
-  lockedEventsBannerSubtext: {
-    fontSize: 11,
-    color: _sharedUi.macOSColors.text.secondary,
-    marginLeft: "auto"
   }
 });