@buoy-gg/storage 7.0.17 → 7.0.18

package/lib/module/storage/components/DiffViewer/modes/ThemedSplitView.js

@@ -1,605 +1,9 @@
 "use strict";
 
-import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { View, Text, FlatList, StyleSheet, TouchableOpacity } from "react-native";
-import { computeLineDiff, DiffType } from "../../../utils/lineDiff";
-import { DiffSummary } from "../components/DiffSummary";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_OPTIONS = {
-  hideLineNumbers: false,
-  disableWordDiff: false,
-  showDiffOnly: false,
-  compareMethod: "words",
-  contextLines: 3,
-  lineOffset: 0
-};
-export function ThemedSplitView({
-  oldValue,
-  newValue,
-  theme,
-  options = DEFAULT_OPTIONS,
-  showThemeName = false,
-  scrollEnabled = true
-}) {
-  // Inline mode drops the fixed 400pt pane so the container grows with the
-  // rows; the ancestor ScrollView is what scrolls them.
-  const dynamicStyles = useMemo(() => createDynamicStyles(theme, scrollEnabled), [theme, scrollEnabled]);
-  const diffComputeOptions = useMemo(() => ({
-    compareMethod: options.compareMethod,
-    disableWordDiff: options.disableWordDiff,
-    showDiffOnly: options.showDiffOnly,
-    contextLines: options.contextLines
-  }), [options.compareMethod, options.disableWordDiff, options.showDiffOnly, options.contextLines]);
-  const lineDiffs = useMemo(() => computeLineDiff(oldValue, newValue, diffComputeOptions), [oldValue, newValue, diffComputeOptions]);
-
-  // One pass for the summary instead of three .filter() calls per render.
-  const summary = useMemo(() => {
-    let added = 0;
-    let removed = 0;
-    let modified = 0;
-    for (const d of lineDiffs) {
-      if (d.type === DiffType.ADDED) added++;else if (d.type === DiffType.REMOVED) removed++;else if (d.type === DiffType.MODIFIED) modified++;
-    }
-    return {
-      added,
-      removed,
-      modified
-    };
-  }, [lineDiffs]);
-
-  // Auto-collapse runs of unchanged lines that aren't near a change. Keeps
-  // CONTEXT_LINES on either side of every change visible (GitHub-style), folds
-  // the rest into a tappable header.
-  const [expandedFolds, setExpandedFolds] = useState(() => new Set());
-
-  // Reset fold expansion when the user actually switches comparisons. Parent
-  // memoizes oldValue/newValue, so this only fires on a real change — not on
-  // every re-render. First run is a no-op (initial state is already empty).
-  const hasMountedRef = useRef(false);
-  useEffect(() => {
-    if (!hasMountedRef.current) {
-      hasMountedRef.current = true;
-      return;
-    }
-    setExpandedFolds(new Set());
-  }, [oldValue, newValue]);
-  const items = useMemo(() => buildSplitItems(lineDiffs, expandedFolds), [lineDiffs, expandedFolds]);
-  const toggleFold = useCallback(foldId => {
-    setExpandedFolds(prev => {
-      const next = new Set(prev);
-      if (next.has(foldId)) next.delete(foldId);else next.add(foldId);
-      return next;
-    });
-  }, []);
-  const keyExtractor = useCallback(item => item.kind === "row" ? `r:${item.diffIndex}` : `f:${item.foldId}`, []);
-  const renderSplitItem = useCallback(item => {
-    if (item.kind === "fold") {
-      return /*#__PURE__*/_jsx(FoldHeader, {
-        foldId: item.foldId,
-        count: item.count,
-        expanded: item.expanded,
-        theme: theme,
-        styles: dynamicStyles,
-        onToggle: toggleFold
-      });
-    }
-    return /*#__PURE__*/_jsx(DiffRow, {
-      diff: item.diff,
-      showSeparator: false,
-      theme: theme,
-      options: options,
-      styles: dynamicStyles
-    });
-  }, [theme, options, dynamicStyles, toggleFold]);
-  const renderItem = useCallback(({
-    item
-  }) => renderSplitItem(item), [renderSplitItem]);
-  return /*#__PURE__*/_jsxs(View, {
-    style: [dynamicStyles.container, theme.glowColor && {
-      shadowColor: theme.glowColor,
-      shadowOffset: {
-        width: 0,
-        height: 0
-      },
-      shadowOpacity: theme.neonIntensity && theme.neonIntensity > 0.7 ? 0.5 : theme.neonIntensity && theme.neonIntensity > 0.3 ? 0.3 : 0.1,
-      shadowRadius: theme.neonIntensity && theme.neonIntensity > 0.7 ? 10 : theme.neonIntensity && theme.neonIntensity > 0.3 ? 5 : 2
-    }],
-    children: [showThemeName && /*#__PURE__*/_jsxs(View, {
-      style: dynamicStyles.themeBadge,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: dynamicStyles.themeName,
-        children: theme.name
-      }), /*#__PURE__*/_jsx(Text, {
-        style: dynamicStyles.themeDescription,
-        children: theme.description
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: dynamicStyles.header,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: dynamicStyles.headerLeft,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: dynamicStyles.headerTitle,
-          children: "PREV"
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: dynamicStyles.divider
-      }), /*#__PURE__*/_jsx(View, {
-        style: dynamicStyles.headerRight,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: dynamicStyles.headerTitle,
-          children: "CUR"
-        })
-      })]
-    }), /*#__PURE__*/_jsx(DiffSummary, {
-      added: summary.added,
-      removed: summary.removed,
-      modified: summary.modified,
-      theme: theme
-    }), lineDiffs.length === 0 ? /*#__PURE__*/_jsx(View, {
-      style: dynamicStyles.emptyState,
-      children: /*#__PURE__*/_jsx(Text, {
-        style: dynamicStyles.emptyText,
-        children: options.showDiffOnly ? "No differences found" : "No content to display"
-      })
-    }) : scrollEnabled ? /*#__PURE__*/_jsx(FlatList, {
-      style: dynamicStyles.scrollView,
-      contentContainerStyle: dynamicStyles.scrollContent,
-      data: items,
-      renderItem: renderItem,
-      keyExtractor: keyExtractor,
-      showsVerticalScrollIndicator: false,
-      initialNumToRender: 20,
-      maxToRenderPerBatch: 20,
-      windowSize: 7,
-      removeClippedSubviews: true
-    }) :
-    /*#__PURE__*/
-    // A FlatList can't virtualize inside a page ScrollView — it has no
-    // viewport of its own to measure against — so render the rows directly.
-    // Folding already keeps this list short (unchanged runs collapse).
-    _jsx(View, {
-      style: dynamicStyles.scrollContent,
-      children: items.map(item => /*#__PURE__*/_jsx(Fragment, {
-        children: renderSplitItem(item)
-      }, keyExtractor(item)))
-    })]
-  });
-}
-
-// Number of context lines kept visible on either side of every change.
-const CONTEXT_LINES = 3;
-// Don't bother folding tiny gaps — toggling them is more friction than scroll.
-const MIN_FOLD_SIZE = 4;
-function buildSplitItems(lineDiffs, expandedFolds) {
-  const n = lineDiffs.length;
-  if (n === 0) return [];
-
-  // Mark every line that should always be visible: any change, plus
-  // CONTEXT_LINES on either side of it.
-  const visible = new Array(n).fill(false);
-  for (let i = 0; i < n; i++) {
-    if (lineDiffs[i].type !== DiffType.DEFAULT) {
-      const start = Math.max(0, i - CONTEXT_LINES);
-      const end = Math.min(n - 1, i + CONTEXT_LINES);
-      for (let k = start; k <= end; k++) visible[k] = true;
-    }
-  }
-  const items = [];
-  let foldId = 0;
-  let i = 0;
-  while (i < n) {
-    if (visible[i]) {
-      items.push({
-        kind: "row",
-        diff: lineDiffs[i],
-        diffIndex: i
-      });
-      i++;
-      continue;
-    }
-    let j = i;
-    while (j < n && !visible[j]) j++;
-    const runLength = j - i;
-    if (runLength < MIN_FOLD_SIZE) {
-      for (let k = i; k < j; k++) {
-        items.push({
-          kind: "row",
-          diff: lineDiffs[k],
-          diffIndex: k
-        });
-      }
-    } else {
-      const id = foldId++;
-      const expanded = expandedFolds.has(id);
-      items.push({
-        kind: "fold",
-        foldId: id,
-        count: runLength,
-        expanded
-      });
-      if (expanded) {
-        for (let k = i; k < j; k++) {
-          items.push({
-            kind: "row",
-            diff: lineDiffs[k],
-            diffIndex: k
-          });
-        }
-      }
-    }
-    i = j;
-  }
-  return items;
-}
-const FoldHeader = /*#__PURE__*/memo(function FoldHeader({
-  foldId,
-  count,
-  expanded,
-  theme,
-  styles,
-  onToggle
-}) {
-  return /*#__PURE__*/_jsx(TouchableOpacity, {
-    style: [styles.foldHeader, {
-      backgroundColor: theme.separatorBackground
-    }],
-    onPress: () => onToggle(foldId),
-    activeOpacity: 0.7,
-    children: /*#__PURE__*/_jsx(Text, {
-      style: [styles.foldHeaderText, {
-        color: theme.separatorText
-      }],
-      children: expanded ? `▼  ${count} unchanged line${count === 1 ? "" : "s"}  —  tap to hide` : `▶  ${count} unchanged line${count === 1 ? "" : "s"}  —  tap to expand`
-    })
-  });
-});
-const DiffRow = /*#__PURE__*/memo(function DiffRow({
-  diff,
-  showSeparator,
-  theme,
-  options,
-  styles
-}) {
-  const isRemoved = diff.type === DiffType.REMOVED;
-  const isAdded = diff.type === DiffType.ADDED;
-  const isModified = diff.type === DiffType.MODIFIED;
-  const isDefault = diff.type === DiffType.DEFAULT;
-  return /*#__PURE__*/_jsxs(Fragment, {
-    children: [showSeparator && /*#__PURE__*/_jsx(View, {
-      style: styles.separator,
-      children: /*#__PURE__*/_jsx(Text, {
-        style: styles.separatorText,
-        children: "\u2022 \u2022 \u2022"
-      })
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.row,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.leftSide,
-        children: isRemoved || isModified || isDefault ? /*#__PURE__*/_jsx(LineSide, {
-          lineNumber: diff.leftLineNumber,
-          content: diff.leftContent,
-          type: isModified ? DiffType.REMOVED : diff.type,
-          marker: isRemoved || isModified ? "-" : " ",
-          theme: theme,
-          options: options,
-          styles: styles
-        }) : /*#__PURE__*/_jsx(EmptyLineSide, {
-          options: options,
-          styles: styles
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.centerDivider
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.rightSide,
-        children: isAdded || isModified || isDefault ? /*#__PURE__*/_jsx(LineSide, {
-          lineNumber: diff.rightLineNumber,
-          content: diff.rightContent,
-          type: isModified ? DiffType.ADDED : diff.type,
-          marker: isAdded || isModified ? "+" : " ",
-          theme: theme,
-          options: options,
-          styles: styles
-        }) : /*#__PURE__*/_jsx(EmptyLineSide, {
-          options: options,
-          styles: styles
-        })
-      })]
-    })]
-  });
-});
-function LineSide({
-  lineNumber,
-  content,
-  type,
-  marker,
-  theme,
-  options,
-  styles
-}) {
-  const colors = getDiffColors(type, theme);
-  return /*#__PURE__*/_jsxs(Fragment, {
-    children: [!options.hideLineNumbers && /*#__PURE__*/_jsx(View, {
-      style: [styles.gutter, {
-        backgroundColor: theme.lineNumberBackground
-      }],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: styles.lineNumber,
-        children: lineNumber || " "
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      style: [styles.marker, {
-        backgroundColor: colors.markerBg
-      }],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.markerText, {
-          color: theme.markerText
-        }],
-        children: marker
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      style: [styles.contentCell, {
-        backgroundColor: colors.background
-      }],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.content, {
-          color: colors.text
-        }],
-        children: Array.isArray(content) ? content.map((word, idx) => {
-          let backgroundColor = "transparent";
-          if (word.type === DiffType.ADDED) {
-            backgroundColor = theme.addedWordHighlight;
-          } else if (word.type === DiffType.REMOVED) {
-            backgroundColor = theme.removedWordHighlight;
-          }
-          return /*#__PURE__*/_jsx(Text, {
-            style: [styles.wordDiff, {
-              backgroundColor
-            }],
-            children: word.value
-          }, idx);
-        }) : content || " "
-      })
-    })]
-  });
-}
-function EmptyLineSide({
-  options,
-  styles
-}) {
-  return /*#__PURE__*/_jsxs(Fragment, {
-    children: [!options.hideLineNumbers && /*#__PURE__*/_jsx(View, {
-      style: [styles.gutter, styles.emptyGutter],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: styles.lineNumber,
-        children: " "
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      style: [styles.marker, styles.emptyMarker],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: styles.markerText,
-        children: " "
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      style: [styles.contentCell, styles.emptyContent],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: styles.content,
-        children: " "
-      })
-    })]
-  });
-}
-function getDiffColors(type, theme) {
-  switch (type) {
-    case DiffType.ADDED:
-      return {
-        background: theme.addedBackground,
-        text: theme.addedText,
-        markerBg: theme.markerAddedBackground
-      };
-    case DiffType.REMOVED:
-      return {
-        background: theme.removedBackground,
-        text: theme.removedText,
-        markerBg: theme.markerRemovedBackground
-      };
-    case DiffType.DEFAULT:
-    default:
-      return {
-        background: theme.unchangedBackground,
-        text: theme.unchangedText,
-        markerBg: "transparent"
-      };
-  }
-}
-
-// Create dynamic styles based on theme
-function createDynamicStyles(theme, scrollEnabled) {
-  return StyleSheet.create({
-    container: {
-      // Fixed pane only when the rows scroll themselves; inline mode sizes to
-      // content so the page scroll reveals it.
-      ...(scrollEnabled ? {
-        height: 400
-      } : null),
-      backgroundColor: theme.background,
-      borderRadius: 8,
-      overflow: "hidden",
-      borderWidth: 1,
-      borderColor: theme.borderColor
-    },
-    themeBadge: {
-      backgroundColor: theme.panelBackground,
-      paddingHorizontal: 12,
-      paddingVertical: 8,
-      borderBottomWidth: 1,
-      borderBottomColor: theme.borderColor
-    },
-    themeName: {
-      fontSize: 12,
-      fontWeight: "700",
-      color: theme.accentColor || theme.unchangedText,
-      fontFamily: "monospace",
-      letterSpacing: 0.5
-    },
-    themeDescription: {
-      fontSize: 10,
-      color: theme.unchangedText,
-      fontFamily: "monospace",
-      marginTop: 2,
-      opacity: 0.8
-    },
-    header: {
-      flexDirection: "row",
-      backgroundColor: theme.headerBackground,
-      borderBottomWidth: 1,
-      borderBottomColor: theme.borderColor
-    },
-    headerLeft: {
-      flex: 1,
-      paddingVertical: 8,
-      paddingHorizontal: 12
-    },
-    headerRight: {
-      flex: 1,
-      paddingVertical: 8,
-      paddingHorizontal: 12
-    },
-    headerTitle: {
-      fontSize: 10,
-      fontWeight: "700",
-      color: theme.accentColor || theme.unchangedText,
-      fontFamily: "monospace",
-      letterSpacing: 0.5,
-      textTransform: "uppercase"
-    },
-    divider: {
-      width: 1,
-      backgroundColor: theme.dividerColor
-    },
-    scrollView: {
-      flex: 1
-    },
-    scrollContent: {
-      paddingBottom: 10
-    },
-    row: {
-      flexDirection: "row",
-      minHeight: 20
-    },
-    leftSide: {
-      flex: 1,
-      flexDirection: "row"
-    },
-    rightSide: {
-      flex: 1,
-      flexDirection: "row"
-    },
-    centerDivider: {
-      width: 1,
-      backgroundColor: theme.dividerColor
-    },
-    gutter: {
-      width: 35,
-      paddingHorizontal: 4,
-      justifyContent: "center",
-      alignItems: "flex-end",
-      backgroundColor: theme.lineNumberBackground,
-      borderRightWidth: 1,
-      borderRightColor: theme.lineNumberBorder
-    },
-    emptyGutter: {
-      backgroundColor: theme.contextBackground
-    },
-    lineNumber: {
-      fontSize: 9,
-      fontFamily: "monospace",
-      color: theme.lineNumberText
-    },
-    marker: {
-      width: 20,
-      justifyContent: "center",
-      alignItems: "center"
-    },
-    emptyMarker: {
-      backgroundColor: theme.contextBackground
-    },
-    markerText: {
-      fontSize: 10,
-      fontFamily: "monospace",
-      fontWeight: "600"
-    },
-    contentCell: {
-      flex: 1,
-      paddingHorizontal: 8,
-      paddingVertical: 2
-    },
-    emptyContent: {
-      backgroundColor: theme.contextBackground
-    },
-    content: {
-      fontSize: 10,
-      fontFamily: "monospace",
-      lineHeight: 16
-    },
-    wordDiff: {
-      fontSize: 10,
-      fontFamily: "monospace"
-    },
-    summaryBar: {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: 16,
-      paddingVertical: 6,
-      backgroundColor: theme.summaryBackground,
-      borderTopWidth: 1,
-      borderTopColor: theme.borderColor
-    },
-    summaryItem: {
-      flexDirection: "row",
-      alignItems: "center"
-    },
-    summaryText: {
-      fontSize: 10,
-      fontFamily: "monospace",
-      fontWeight: "700"
-    },
-    separator: {
-      height: 20,
-      justifyContent: "center",
-      alignItems: "center",
-      backgroundColor: theme.separatorBackground
-    },
-    separatorText: {
-      fontSize: 8,
-      color: theme.separatorText,
-      fontFamily: "monospace",
-      letterSpacing: 2
-    },
-    foldHeader: {
-      paddingVertical: 6,
-      paddingHorizontal: 12,
-      alignItems: "center",
-      justifyContent: "center",
-      borderTopWidth: 1,
-      borderBottomWidth: 1,
-      borderColor: theme.borderColor
-    },
-    foldHeaderText: {
-      fontSize: 10,
-      fontFamily: "monospace",
-      letterSpacing: 0.5
-    },
-    emptyState: {
-      padding: 40,
-      alignItems: "center",
-      justifyContent: "center"
-    },
-    emptyText: {
-      fontSize: 11,
-      color: theme.emptyStateText,
-      fontStyle: "italic",
-      fontFamily: "monospace"
-    }
-  });
-}
+/**
+ * Re-export shim — ThemedSplitView now lives in @buoy-gg/shared-ui/dataViewer
+ * (promoted so redux/zustand/jotai/time-machine share one copy; this used to
+ * be the only fork with folding + virtualization, and fixes had to be made
+ * twice). Keep importing from here inside the storage package.
+ */
+export { ThemedSplitView } from "@buoy-gg/shared-ui/dataViewer";

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

@@ -29,7 +29,8 @@ export function StorageModalWithTabs({
   requiredStorageKeys = [],
   inline = false,
   onTabChange,
-  onRefresh
+  onRefresh,
+  onEventSelect
 }) {
   const isPro = useIsPro();
   const [activeTab, setActiveTab] = useState("browser");
@@ -457,6 +458,21 @@ export function StorageModalWithTabs({
     return conversations.find(c => c.key === selectedHistoryKey) || null;
   }, [selectedHistoryKey, conversations]);
 
+  // Wire-form snapshots omit oversized values. Tell a remote host which
+  // event(s) are on screen so it can fetch them — selected + previous, because
+  // the detail pane diffs those two.
+  useEffect(() => {
+    if (!onEventSelect) return;
+    const conversation = selectedConversation ? selectedConversation : selectedHistoryEventIndex !== null ? selectedHistoryConversation : null;
+    const index = selectedConversation ? selectedEventIndex : selectedHistoryEventIndex;
+    if (!conversation || index == null) return;
+    const sorted = [...conversation.events].sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
+    const selected = sorted[index];
+    const previous = sorted[index - 1];
+    if (selected) onEventSelect(selected);
+    if (previous) onEventSelect(previous);
+  }, [onEventSelect, selectedConversation, selectedEventIndex, selectedHistoryConversation, selectedHistoryEventIndex]);
+
   /**
    * Events passing everything EXCEPT the backend pills.
    *