@buoy-gg/storage 1.7.2

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

@@ -0,0 +1,1020 @@
+"use strict";
+
+import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native";
+import { useEffect, useState, useCallback, useRef } from "react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { formatRelativeTime, macOSColors, parseValue, devToolsStorageKeys, ChevronLeft, ChevronRight, AlertCircle, X, Database, GitBranch, EventStepperFooter, Lock } from "@buoy-gg/shared-ui";
+import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
+import { ThemedSplitView } from "./DiffViewer/modes/ThemedSplitView";
+import { diffThemes } from "./DiffViewer/themes/diffThemes";
+import { computeLineDiff, DiffType } from "../utils/lineDiff";
+import { TreeDiffViewer } from "./DiffViewer/TreeDiffViewer";
+import { translateStorageAction } from "../utils/storageActionHelpers";
+
+// Lazy load the license hooks to avoid circular dependencies
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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
+  }
+}
+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)
+
+export 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] = useState("current");
+  // Compare-any-two state for Diff tab
+  const [leftIndex, setLeftIndex] = useState(Math.max(0, selectedEventIndex - 1));
+  const [rightIndex, setRightIndex] = useState(selectedEventIndex);
+  const [isLeftPickerOpen, setIsLeftPickerOpen] = useState(false);
+  const [isRightPickerOpen, setIsRightPickerOpen] = useState(false);
+  const [diffViewerTab, setDiffViewerTab] = useState("tree");
+
+  // Track if preferences have been loaded
+  const hasLoadedPreferences = useRef(false);
+
+  // Load saved preferences on mount
+  useEffect(() => {
+    if (hasLoadedPreferences.current) return;
+    const loadPreferences = async () => {
+      try {
+        // Load detail view preference (current/diff)
+        const savedDetailView = await AsyncStorage.getItem(devToolsStorageKeys.storage.detailView());
+        if (savedDetailView === "current" || savedDetailView === "diff") {
+          setInternalActiveView(savedDetailView);
+        }
+
+        // Load diff viewer mode preference (split/tree)
+        const savedDiffMode = await AsyncStorage.getItem(devToolsStorageKeys.storage.diffViewerMode());
+        if (savedDiffMode === "split" || savedDiffMode === "tree") {
+          setDiffViewerTab(savedDiffMode);
+        }
+        hasLoadedPreferences.current = true;
+      } catch (error) {
+        // Failed to load view preferences
+      }
+    };
+    loadPreferences();
+  }, []);
+
+  // Save detail view preference when changed
+  const handleViewChange = useCallback(async view => {
+    setInternalActiveView(view);
+    try {
+      await AsyncStorage.setItem(devToolsStorageKeys.storage.detailView(), view);
+    } catch (error) {
+      // Failed to save detail view preference
+    }
+  }, []);
+
+  // Save diff viewer mode preference when changed
+  const handleDiffModeChange = useCallback(async mode => {
+    setDiffViewerTab(mode);
+    try {
+      await AsyncStorage.setItem(devToolsStorageKeys.storage.diffViewerMode(), mode);
+    } catch (error) {
+      // Failed to save diff viewer mode preference
+    }
+  }, []);
+  const getActionColor = action => {
+    switch (action) {
+      case "setItem":
+      case "multiSet":
+        return macOSColors.semantic.success;
+      case "removeItem":
+      case "multiRemove":
+      case "clear":
+        return macOSColors.semantic.error;
+      case "mergeItem":
+      case "multiMerge":
+        return macOSColors.semantic.info;
+      default:
+        return macOSColors.text.muted;
+    }
+  };
+  const renderValueContent = (value, label, action) => {
+    const parsed = parseValue(value);
+    const type = parsed === null ? "null" : parsed === undefined ? "undefined" : Array.isArray(parsed) ? "array" : typeof parsed;
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.valueContent,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.valueHeader,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.valueLabel,
+          children: label
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.valueHeaderBadges,
+          children: [action && /*#__PURE__*/_jsx(View, {
+            style: [styles.actionBadge, {
+              backgroundColor: `${getActionColor(action)}20`
+            }],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.actionText, {
+                color: getActionColor(action)
+              }],
+              children: translateStorageAction(action)
+            })
+          }), /*#__PURE__*/_jsx(View, {
+            style: [styles.typeBadge],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.typeText,
+              children: type.toUpperCase()
+            })
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(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__*/_jsx(DataViewer, {
+          title: "",
+          data: parsed,
+          showTypeFilter: false
+        }) : /*#__PURE__*/_jsx(Text, {
+          style: styles.valueText,
+          children: type === "array" ? "[]" : "{}"
+        }) : /*#__PURE__*/_jsx(Text, {
+          style: styles.valueText,
+          children: parsed === null ? "null" : parsed === undefined ? "undefined" : type === "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
+  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 = 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__*/_jsx(View, {
+      style: styles.fullPageSection,
+      children: /*#__PURE__*/_jsx(View, {
+        style: styles.contentCard,
+        children: renderValueContent(valueToShow, "CURRENT VALUE", action)
+      })
+    });
+  };
+
+  // Render diff tab
+  const renderDiff = () => {
+    if (navigationItems.length === 0) {
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.emptyState,
+        children: [/*#__PURE__*/_jsx(AlertCircle, {
+          size: 32,
+          color: macOSColors.text.muted
+        }), /*#__PURE__*/_jsx(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__*/_jsxs(View, {
+      style: styles.fullPageSection,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.diffViewerTabs,
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.diffViewerTab, diffViewerTab === "split" && styles.diffViewerTabActive],
+          onPress: () => handleDiffModeChange("split"),
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.diffViewerTabText, diffViewerTab === "split" && styles.diffViewerTabTextActive],
+            children: "SPLIT VIEW"
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.diffViewerTab, diffViewerTab === "tree" && styles.diffViewerTabActive],
+          onPress: () => handleDiffModeChange("tree"),
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.diffViewerTabText, diffViewerTab === "tree" && styles.diffViewerTabTextActive],
+            children: "TREE VIEW"
+          })
+        })]
+      }), totalEvents > 0 && /*#__PURE__*/_jsxs(View, {
+        style: styles.compareBar,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.compareSide,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.compareLabelRow,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [styles.compareLabel, {
+                color: macOSColors.semantic.debug
+              }],
+              children: "PREV"
+            }), /*#__PURE__*/_jsx(View, {
+              style: [styles.compareActionBadge, {
+                backgroundColor: `${getActionColor(leftEvent.action)}20`
+              }],
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.compareActionText, {
+                  color: getActionColor(leftEvent.action)
+                }],
+                children: translateStorageAction(leftEvent.action)
+              })
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.compareControls,
+            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: () => bumpLeft(-1),
+              disabled: leftIndex <= 0,
+              style: [styles.compareBtn, leftIndex <= 0 && styles.compareBtnDisabled],
+              children: /*#__PURE__*/_jsx(ChevronLeft, {
+                size: 14,
+                color: leftIndex <= 0 ? macOSColors.text.muted : macOSColors.text.secondary
+              })
+            }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+              style: styles.compareMeta,
+              onPress: () => setIsLeftPickerOpen(true),
+              activeOpacity: 0.8,
+              children: [/*#__PURE__*/_jsxs(Text, {
+                style: styles.compareIndex,
+                children: ["#", leftIndex + 1, " / ", totalEvents]
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.compareTime,
+                children: formatTimeWithMs(leftEvent.timestamp)
+              }), /*#__PURE__*/_jsxs(Text, {
+                style: styles.compareRelative,
+                children: ["(", formatRelativeTime(leftEvent.timestamp), ")"]
+              })]
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: () => bumpLeft(1),
+              disabled: leftIndex >= rightIndex - 1,
+              style: [styles.compareBtn, leftIndex >= rightIndex - 1 && styles.compareBtnDisabled],
+              children: /*#__PURE__*/_jsx(ChevronRight, {
+                size: 14,
+                color: leftIndex >= rightIndex - 1 ? macOSColors.text.muted : macOSColors.text.secondary
+              })
+            })]
+          })]
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.compareDivider
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.compareSide,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.compareLabelRow,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [styles.compareLabel, {
+                color: macOSColors.semantic.success
+              }],
+              children: "CUR"
+            }), /*#__PURE__*/_jsx(View, {
+              style: [styles.compareActionBadge, {
+                backgroundColor: `${getActionColor(rightEvent.action)}20`
+              }],
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.compareActionText, {
+                  color: getActionColor(rightEvent.action)
+                }],
+                children: translateStorageAction(rightEvent.action)
+              })
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.compareControls,
+            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: () => bumpRight(-1),
+              disabled: rightIndex <= leftIndex + 1,
+              style: [styles.compareBtn, rightIndex <= leftIndex + 1 && styles.compareBtnDisabled],
+              children: /*#__PURE__*/_jsx(ChevronLeft, {
+                size: 14,
+                color: rightIndex <= leftIndex + 1 ? macOSColors.text.muted : macOSColors.text.secondary
+              })
+            }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+              style: styles.compareMeta,
+              onPress: () => setIsRightPickerOpen(true),
+              activeOpacity: 0.8,
+              children: [/*#__PURE__*/_jsxs(Text, {
+                style: styles.compareIndex,
+                children: ["#", rightIndex + 1, " / ", totalEvents]
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.compareTime,
+                children: formatTimeWithMs(rightEvent.timestamp)
+              }), /*#__PURE__*/_jsxs(Text, {
+                style: styles.compareRelative,
+                children: ["(", formatRelativeTime(rightEvent.timestamp), ")"]
+              })]
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: () => bumpRight(1),
+              disabled: rightIndex >= totalEvents - 1,
+              style: [styles.compareBtn, rightIndex >= totalEvents - 1 && styles.compareBtnDisabled],
+              children: /*#__PURE__*/_jsx(ChevronRight, {
+                size: 14,
+                color: rightIndex >= totalEvents - 1 ? macOSColors.text.muted : macOSColors.text.secondary
+              })
+            })]
+          })]
+        })]
+      }), diffViewerTab === "split" && /*#__PURE__*/_jsx(ScrollView, {
+        style: {
+          flex: 1
+        },
+        showsVerticalScrollIndicator: true,
+        children: /*#__PURE__*/_jsx(ThemedSplitView, {
+          oldValue: parseValue(previousValue),
+          newValue: parseValue(currentValue),
+          differences: [],
+          theme: diffThemes.devToolsDefault,
+          options: {
+            hideLineNumbers: false,
+            disableWordDiff: false,
+            showDiffOnly: false,
+            compareMethod: "words",
+            contextLines: 3,
+            lineOffset: 0
+          },
+          showThemeName: false
+        })
+      }), diffViewerTab === "tree" && /*#__PURE__*/_jsx(TreeDiffViewer, {
+        oldValue: parseValue(previousValue),
+        newValue: parseValue(currentValue)
+      })]
+    });
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [styles.contentOnly, {
+        flex: 1,
+        paddingBottom: !disableInternalFooter && totalEvents > 1 ? 80 : 0
+      }],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.viewToggleContainer,
+        children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: [styles.viewToggleCard, internalActiveView === "current" && styles.viewToggleCardActive],
+          onPress: () => handleViewChange("current"),
+          activeOpacity: 0.8,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.viewToggleContent,
+            children: [/*#__PURE__*/_jsx(Database, {
+              size: 16,
+              color: internalActiveView === "current" ? macOSColors.semantic.info : macOSColors.text.secondary
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.viewToggleLabel, internalActiveView === "current" && styles.viewToggleLabelActive],
+              children: "CURRENT VALUE"
+            })]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.viewToggleDescription, internalActiveView === "current" && {
+              color: macOSColors.text.primary
+            }],
+            children: "View the current stored value"
+          })]
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: [styles.viewToggleCard, internalActiveView === "diff" && styles.viewToggleCardActive],
+          onPress: () => handleViewChange("diff"),
+          activeOpacity: 0.8,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.viewToggleContent,
+            children: [/*#__PURE__*/_jsx(GitBranch, {
+              size: 16,
+              color: internalActiveView === "diff" ? macOSColors.semantic.success : macOSColors.text.secondary
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.viewToggleLabel, internalActiveView === "diff" && styles.viewToggleLabelActive],
+              children: "DIFF VIEW"
+            })]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.viewToggleDescription, internalActiveView === "diff" && {
+              color: macOSColors.text.primary
+            }],
+            children: "Compare changes between versions"
+          })]
+        })]
+      }), lockedEventCount > 0 && /*#__PURE__*/_jsxs(View, {
+        style: styles.lockedEventsBannerGlobal,
+        children: [/*#__PURE__*/_jsx(Lock, {
+          size: 14,
+          color: macOSColors.semantic.warning
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.lockedEventsBannerText,
+          children: [lockedEventCount, " older ", lockedEventCount === 1 ? 'event' : 'events', " locked"]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.lockedEventsBannerSubtext,
+          children: "Upgrade to Pro for full history"
+        })]
+      }), internalActiveView === "current" && renderCurrentValue(), internalActiveView === "diff" && renderDiff()]
+    }), (isLeftPickerOpen || isRightPickerOpen) && /*#__PURE__*/_jsxs(View, {
+      style: styles.pickerOverlay,
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.pickerBackdrop,
+        activeOpacity: 1,
+        onPress: () => {
+          setIsLeftPickerOpen(false);
+          setIsRightPickerOpen(false);
+        }
+      }), /*#__PURE__*/_jsxs(View, {
+        style: [styles.pickerCard, isLeftPickerOpen && styles.pickerCardLeft, isRightPickerOpen && styles.pickerCardRight],
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.pickerHeader,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: [styles.pickerTitle, isLeftPickerOpen && styles.pickerTitleLeft, isRightPickerOpen && styles.pickerTitleRight],
+            children: ["Select ", isLeftPickerOpen ? "PREV" : "CUR", " Event"]
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: () => {
+              setIsLeftPickerOpen(false);
+              setIsRightPickerOpen(false);
+            },
+            style: styles.pickerClose,
+            accessibilityLabel: "Close event picker",
+            children: /*#__PURE__*/_jsx(X, {
+              size: 16,
+              color: macOSColors.text.secondary
+            })
+          })]
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.pickerDivider
+        }), /*#__PURE__*/_jsx(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__*/_jsxs(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__*/_jsxs(Text, {
+                style: styles.pickerIndex,
+                children: ["#", idx + 1]
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.pickerTime,
+                children: formatTimeWithMs(item.timestamp)
+              }), /*#__PURE__*/_jsxs(Text, {
+                style: styles.pickerRelative,
+                children: ["(", formatRelativeTime(item.timestamp), ")"]
+              }), (() => {
+                const targetOld = isLeftPickerOpen ? item : navigationItems[leftIndex];
+                const targetNew = isLeftPickerOpen ? navigationItems[rightIndex] : item;
+                const oldVal = parseValue(targetOld.data?.value);
+                const newVal = parseValue(targetNew.data?.value);
+                const diffs = computeLineDiff(oldVal, newVal, {
+                  compareMethod: "words",
+                  disableWordDiff: false,
+                  showDiffOnly: false,
+                  contextLines: 0
+                });
+                const added = diffs.filter(d => d.type === DiffType.ADDED).length;
+                const removed = diffs.filter(d => d.type === DiffType.REMOVED).length;
+                const modified = diffs.filter(d => d.type === DiffType.MODIFIED).length;
+                return /*#__PURE__*/_jsxs(View, {
+                  style: styles.pickerCounts,
+                  children: [/*#__PURE__*/_jsxs(Text, {
+                    style: [styles.pickerCountText, {
+                      color: diffThemes.devToolsDefault.summaryAddedText
+                    }],
+                    children: ["+", added]
+                  }), /*#__PURE__*/_jsxs(Text, {
+                    style: [styles.pickerCountText, {
+                      color: diffThemes.devToolsDefault.summaryRemovedText
+                    }],
+                    children: ["-", removed]
+                  }), /*#__PURE__*/_jsxs(Text, {
+                    style: [styles.pickerCountText, {
+                      color: diffThemes.devToolsDefault.summaryModifiedText
+                    }],
+                    children: ["~", modified]
+                  })]
+                });
+              })()]
+            }, idx);
+          })
+        })]
+      })]
+    }), !disableInternalFooter && /*#__PURE__*/_jsx(EventStepperFooter, {
+      currentIndex: selectedEventIndex,
+      totalItems: totalEvents,
+      onPrevious: () => onEventIndexChange(Math.max(0, selectedEventIndex - 1)),
+      onNext: () => onEventIndexChange(Math.min(totalEvents - 1, selectedEventIndex + 1)),
+      itemLabel: "Event",
+      subtitle: formatRelativeTime(navigationItems[selectedEventIndex]?.timestamp),
+      absolute: true
+    })]
+  });
+}
+
+// External footer component to be rendered by the modal outside the ScrollView
+export 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__*/_jsx(EventStepperFooter, {
+    currentIndex: selectedEventIndex,
+    totalItems: displayTotal,
+    onPrevious: () => onEventIndexChange(Math.max(0, selectedEventIndex - 1)),
+    onNext: () => onEventIndexChange(Math.min(maxAccessibleIndex, selectedEventIndex + 1)),
+    itemLabel: "Event",
+    subtitle: lockedCount > 0 ? `${formatRelativeTime(navigationItems[selectedEventIndex]?.timestamp)} • ${lockedCount} locked` : formatRelativeTime(navigationItems[selectedEventIndex]?.timestamp)
+  });
+}
+const styles = StyleSheet.create({
+  contentOnly: {
+    flex: 1,
+    backgroundColor: macOSColors.background.base
+  },
+  fullPageSection: {
+    flex: 1,
+    paddingHorizontal: 14,
+    paddingVertical: 10
+  },
+  emptyState: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 48
+  },
+  emptyText: {
+    marginTop: 12,
+    fontSize: 14,
+    color: macOSColors.text.secondary,
+    fontFamily: "monospace"
+  },
+  card: {
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 14,
+    padding: 14,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default
+  },
+  valueContent: {
+    marginTop: 4
+  },
+  valueHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 4
+  },
+  valueLabel: {
+    fontSize: 10,
+    color: 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,
+    borderWidth: 1,
+    borderColor: "transparent"
+  },
+  actionText: {
+    fontSize: 9,
+    fontWeight: "700",
+    fontFamily: "monospace",
+    letterSpacing: 0.3
+  },
+  typeBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4,
+    backgroundColor: macOSColors.background.input
+  },
+  typeText: {
+    fontSize: 9,
+    fontWeight: "600",
+    color: macOSColors.text.muted,
+    fontFamily: "monospace"
+  },
+  valueBox: {
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: macOSColors.border.input,
+    padding: 8
+  },
+  valueText: {
+    fontSize: 12,
+    color: macOSColors.text.primary,
+    fontFamily: "monospace",
+    lineHeight: 18
+  },
+  // Compare picker styles
+  compareBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: macOSColors.background.card,
+    borderWidth: 1,
+    borderColor: 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: {
+    paddingHorizontal: 6,
+    paddingVertical: 1,
+    borderRadius: 3
+  },
+  compareActionText: {
+    fontSize: 8,
+    fontWeight: "700",
+    fontFamily: "monospace",
+    letterSpacing: 0.3
+  },
+  compareControls: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  compareBtn: {
+    width: 26,
+    height: 26,
+    borderRadius: 6,
+    backgroundColor: macOSColors.background.card,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  compareBtnDisabled: {
+    opacity: 0.4
+  },
+  compareMeta: {
+    flex: 1
+  },
+  compareTime: {
+    fontSize: 11,
+    color: macOSColors.text.primary,
+    fontFamily: "monospace"
+  },
+  compareIndex: {
+    fontSize: 10,
+    color: macOSColors.text.secondary,
+    fontFamily: "monospace"
+  },
+  compareRelative: {
+    fontSize: 10,
+    color: macOSColors.text.secondary,
+    fontFamily: "monospace"
+  },
+  compareDivider: {
+    width: 1,
+    height: 34,
+    backgroundColor: macOSColors.background.input
+  },
+  pickerOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 20,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  pickerBackdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0,0,0,0.65)"
+  },
+  pickerCard: {
+    width: "86%",
+    maxHeight: 320,
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 16,
+    borderWidth: 2,
+    padding: 16,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.5,
+    shadowRadius: 40,
+    elevation: 15
+  },
+  pickerCardLeft: {
+    borderColor: macOSColors.semantic.debug,
+    shadowColor: macOSColors.semantic.debug
+  },
+  pickerCardRight: {
+    borderColor: macOSColors.semantic.success,
+    shadowColor: macOSColors.semantic.success
+  },
+  pickerHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  pickerClose: {
+    padding: 6,
+    borderRadius: 6,
+    backgroundColor: macOSColors.background.card,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default
+  },
+  pickerDivider: {
+    height: 1,
+    backgroundColor: macOSColors.background.input,
+    marginVertical: 8
+  },
+  pickerScroll: {
+    maxHeight: 260
+  },
+  pickerTitle: {
+    fontSize: 13,
+    fontWeight: "700",
+    fontFamily: "monospace",
+    textTransform: "uppercase",
+    marginBottom: 8,
+    letterSpacing: 0.6
+  },
+  pickerTitleLeft: {
+    color: macOSColors.semantic.debug
+  },
+  pickerTitleRight: {
+    color: macOSColors.semantic.success
+  },
+  pickerList: {
+    gap: 4
+  },
+  pickerItem: {
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    borderRadius: 10,
+    backgroundColor: macOSColors.background.base,
+    borderWidth: 1,
+    borderColor: 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: macOSColors.semantic.debug + "1A",
+    borderColor: macOSColors.semantic.debug,
+    shadowColor: macOSColors.semantic.debug
+  },
+  pickerItemSelectedRight: {
+    backgroundColor: macOSColors.semantic.successBackground + "30",
+    borderColor: macOSColors.semantic.success,
+    shadowColor: macOSColors.semantic.success
+  },
+  pickerItemDisabled: {
+    opacity: 0.4
+  },
+  pickerIndex: {
+    fontSize: 10,
+    color: macOSColors.text.secondary,
+    fontFamily: "monospace",
+    width: 40
+  },
+  pickerTime: {
+    fontSize: 11,
+    color: macOSColors.text.primary,
+    fontFamily: "monospace",
+    flex: 1
+  },
+  pickerRelative: {
+    fontSize: 10,
+    color: 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: macOSColors.background.card,
+    borderWidth: 1,
+    borderColor: 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: macOSColors.semantic.infoBackground,
+    borderWidth: 1,
+    borderColor: macOSColors.semantic.info + "40"
+  },
+  diffViewerTabText: {
+    fontSize: 11,
+    fontFamily: "monospace",
+    fontWeight: "600",
+    color: macOSColors.text.secondary,
+    letterSpacing: 0.5
+  },
+  diffViewerTabTextActive: {
+    color: macOSColors.text.primary
+  },
+  contentCard: {
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 14,
+    padding: 14,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    shadowColor: 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: macOSColors.background.base
+  },
+  viewToggleCard: {
+    flex: 1,
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    padding: 14,
+    gap: 8
+  },
+  viewToggleCardActive: {
+    borderWidth: 1.5,
+    borderColor: macOSColors.semantic.info,
+    backgroundColor: macOSColors.semantic.infoBackground + "30",
+    shadowColor: 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: macOSColors.text.secondary,
+    textTransform: "uppercase"
+  },
+  viewToggleLabelActive: {
+    color: macOSColors.text.primary
+  },
+  viewToggleDescription: {
+    fontSize: 11,
+    color: macOSColors.text.muted,
+    lineHeight: 16
+  },
+  lockedEventsBannerGlobal: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    backgroundColor: macOSColors.semantic.warning + "15",
+    borderWidth: 1,
+    borderColor: macOSColors.semantic.warning + "30",
+    borderRadius: 10,
+    paddingVertical: 12,
+    paddingHorizontal: 14,
+    marginHorizontal: 14,
+    marginBottom: 4
+  },
+  lockedEventsBannerText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: macOSColors.semantic.warning,
+    fontFamily: "monospace"
+  },
+  lockedEventsBannerSubtext: {
+    fontSize: 11,
+    color: macOSColors.text.secondary,
+    marginLeft: "auto"
+  }
+});