@buoy-gg/time-machine 7.0.17 → 7.0.18

package/lib/module/components/TimeMachineBody.js

@@ -1,18 +1,33 @@
 "use strict";
 
 /**
- * Time Machine body — capture bar, provider status strip, snapshot list and
- * the last-restore results panel. Shared by the RN modal and the inline
- * (desktop) tool view.
+ * Time Machine body — snapshot list, capture bar, provider status strip and
+ * the Restore Preview flow (tap a snapshot row → item-level diff of what a
+ * restore would change; tap an item → tree/split detail).
+ *
+ * Shared by the RN modal and the inline (desktop) tool view. The host must
+ * NOT wrap this in a scroll view — each screen owns its scrolling (the
+ * preview is a virtualized FlatList; wrapping it would defeat that).
  */
 import { useState } from "react";
-import { Alert, Platform, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
-import { buoyColors } from "@buoy-gg/shared-ui";
+import { Alert, Platform, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
+import { Plus, EventPickerModal, Home, Trash2, buoyColors } from "@buoy-gg/shared-ui";
+import { JotaiIcon, QueryIcon, ReduxIcon, StorageIcon, TimeMachineIcon, ZustandIcon } from "@buoy-gg/floating-tools-core";
+import { useToolHost } from "@buoy-gg/core";
 import { useIsPro } from "@buoy-gg/license";
 import { useSnapshotProviders, useTimeMachineState } from "../hooks/useTimeMachine";
 import { timeMachineStore } from "../store/timeMachineStore";
+import { RestorePreviewScreen } from "./preview/RestorePreviewScreen";
+import { ItemDetailScreen } from "./preview/ItemDetailScreen";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const FREE_SNAPSHOT_LIMIT = 2;
+const SOURCE_ICONS = {
+  storage: StorageIcon,
+  redux: ReduxIcon,
+  zustand: ZustandIcon,
+  jotai: JotaiIcon,
+  query: QueryIcon
+};
 function timeAgo(ts) {
   const s = Math.max(0, Math.round((Date.now() - ts) / 1000));
   if (s < 60) return `${s}s ago`;
@@ -95,11 +110,21 @@ export function TimeMachineBody() {
     hasLoaded,
     busy,
     lastOutcome,
+    preview,
     remoteProviders
   } = useTimeMachineState();
   const localProviders = useSnapshotProviders();
   const isPro = useIsPro();
+  const host = useToolHost();
   const [name, setName] = useState("");
+  const [screen, setScreen] = useState({
+    kind: "list"
+  });
+  const [picker, setPicker] = useState(null);
+
+  // Header search (when hosted by the core shell) filters the snapshot list.
+  const listQuery = host.search.trim().toLowerCase();
+  const visibleSnapshots = listQuery ? snapshots.filter(s => s.name.toLowerCase().includes(listQuery)) : snapshots;
 
   // On-device: live registry probes. Buoy Desktop: statuses mirrored from
   // the device's sync payload.
@@ -115,38 +140,159 @@ export function TimeMachineBody() {
     void timeMachineStore.capture(name);
     setName("");
   };
-  const captureBaseline = () => {
-    if (captureDisabled) return;
-    void timeMachineStore.captureBaseline();
-  };
-  const restore = (meta, mode) => {
+  const restore = (meta, mode, excludeKeys) => {
     if (busy) return;
     if (meta.baseline) {
       confirmDestructive("Restore fresh install?", "This wipes all app storage and reloads the app.", "Wipe & reload", () => void timeMachineStore.restore(meta.id, "reload"));
       return;
     }
-    void timeMachineStore.restore(meta.id, mode);
+    void timeMachineStore.restore(meta.id, mode, excludeKeys);
   };
   const remove = meta => {
     confirmDestructive("Delete snapshot?", `“${meta.name}” cannot be recovered.`, "Delete", () => void timeMachineStore.delete(meta.id));
   };
+  const wipeAll = () => {
+    if (busy) return;
+    confirmDestructive("Wipe all app state?", "This deletes all app storage and reloads the app — like a fresh install.", "Wipe & reload", () => void timeMachineStore.wipeAll());
+  };
+  const openPreview = meta => {
+    void timeMachineStore.buildPreview({
+      snapshotId: meta.id
+    });
+    setScreen({
+      kind: "preview"
+    });
+  };
+  const closePreview = () => {
+    timeMachineStore.clearPreview();
+    setScreen({
+      kind: "list"
+    });
+  };
+
+  // ── Preview / item screens ──
+  if (screen.kind === "item" && preview) {
+    return /*#__PURE__*/_jsx(ItemDetailScreen, {
+      sourceLabel: screen.sourceLabel,
+      item: screen.item,
+      leftLabel: preview.left === "current" ? "CURRENT" : snapshots.find(s => s.id === preview.left.snapshotId)?.name ?? "snapshot",
+      rightLabel: preview.right === "current" ? "CURRENT" : snapshots.find(s => s.id === preview.right.snapshotId)?.name ?? "snapshot",
+      onBack: () => setScreen({
+        kind: "preview"
+      })
+    });
+  }
+  if (screen.kind === "preview" && preview) {
+    const rightMeta = preview.right === "current" ? undefined : snapshots.find(s => s.id === preview.right.snapshotId);
+    const pickerItems = [];
+    if (picker) {
+      const otherRef = picker === "left" ? preview.right : preview.left;
+      const otherId = otherRef === "current" ? null : otherRef.snapshotId;
+      if (picker === "left") {
+        pickerItems.push({
+          index: 0,
+          label: "Current state",
+          timestamp: "live",
+          relativeTime: "now",
+          selected: preview.left === "current"
+        });
+      }
+      snapshots.forEach((s, i) => {
+        const ref = {
+          snapshotId: s.id
+        };
+        const current = picker === "left" ? preview.left : preview.right;
+        pickerItems.push({
+          index: picker === "left" ? i + 1 : i,
+          label: s.baseline ? `⌂ ${s.name}` : s.name,
+          timestamp: new Date(s.createdAt).toLocaleTimeString(),
+          relativeTime: timeAgo(s.createdAt),
+          disabled: s.id === otherId || picker === "right" && s.baseline,
+          selected: current !== "current" && current.snapshotId === s.id
+        });
+      });
+    }
+    const onPickerSelect = index => {
+      const side = picker;
+      setPicker(null);
+      if (!side) return;
+      let ref;
+      if (side === "left") {
+        ref = index === 0 ? "current" : {
+          snapshotId: snapshots[index - 1].id
+        };
+        void timeMachineStore.buildPreview(preview.right, ref);
+      } else {
+        ref = {
+          snapshotId: snapshots[index].id
+        };
+        void timeMachineStore.buildPreview(ref, preview.left);
+      }
+    };
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.screenFill,
+      children: [/*#__PURE__*/_jsx(RestorePreviewScreen, {
+        preview: preview,
+        snapshots: snapshots,
+        busy: busy !== null,
+        onBack: closePreview,
+        onOpenItem: (sourceId, item) => {
+          const source = preview.sources.find(s => s.id === sourceId);
+          setScreen({
+            kind: "item",
+            sourceId,
+            sourceLabel: source?.label ?? sourceId,
+            item
+          });
+        },
+        onRestore: (mode, excludeKeys) => {
+          if (!rightMeta || busy) return;
+          if (rightMeta.baseline) {
+            confirmDestructive("Restore fresh install?", "This wipes all app storage and reloads the app.", "Wipe & reload", () => void timeMachineStore.restore(rightMeta.id, "reload"));
+            return;
+          }
+          // Land back on the list, where the outcome panel reports the
+          // results — the preview's diff is stale the moment restore runs.
+          void timeMachineStore.restore(rightMeta.id, mode, excludeKeys).then(() => closePreview());
+        },
+        onPickSide: setPicker,
+        onRefresh: () => void timeMachineStore.buildPreview(preview.right, preview.left)
+      }), picker && /*#__PURE__*/_jsx(EventPickerModal, {
+        isOpen: true,
+        onClose: () => setPicker(null),
+        title: picker === "left" ? "Compare from" : "Compare to",
+        position: picker,
+        items: pickerItems,
+        onSelect: onPickerSelect
+      })]
+    });
+  }
+
+  // ── List screen ──
   const unavailable = providers.filter(p => p.detail && (!p.canCapture || !p.canRestore));
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.container,
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    style: styles.screenFill,
+    contentContainerStyle: styles.container,
     children: [lastOutcome && /*#__PURE__*/_jsx(OutcomePanel, {
       outcome: lastOutcome
     }), /*#__PURE__*/_jsxs(View, {
-      style: styles.captureRow,
-      children: [/*#__PURE__*/_jsx(TextInput, {
-        style: styles.nameInput,
-        value: name,
-        onChangeText: setName,
-        placeholder: "Snapshot name\u2026",
-        placeholderTextColor: buoyColors.textMuted,
-        editable: !captureDisabled,
-        onSubmitEditing: capture,
-        returnKeyType: "done",
-        testID: "time-machine-name-input"
+      style: styles.captureCard,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.captureField,
+        children: [/*#__PURE__*/_jsx(Plus, {
+          size: 14,
+          color: buoyColors.textMuted
+        }), /*#__PURE__*/_jsx(TextInput, {
+          style: styles.captureInput,
+          value: name,
+          onChangeText: setName,
+          placeholder: "Name this restore point\u2026",
+          placeholderTextColor: buoyColors.textMuted,
+          editable: !captureDisabled,
+          onSubmitEditing: capture,
+          returnKeyType: "done",
+          testID: "time-machine-name-input"
+        })]
       }), /*#__PURE__*/_jsx(TouchableOpacity, {
         style: [styles.captureButton, captureDisabled && styles.buttonDisabled],
         onPress: capture,
@@ -157,76 +303,88 @@ export function TimeMachineBody() {
           children: busy === "capture" ? "…" : "CAPTURE"
         })
       })]
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [styles.baselineButton, captureDisabled && styles.buttonDisabled],
-      onPress: captureBaseline,
-      disabled: captureDisabled,
-      testID: "time-machine-capture-baseline",
-      children: /*#__PURE__*/_jsx(Text, {
-        style: styles.baselineButtonText,
-        children: "\u2302 CAPTURE FRESH-INSTALL BASELINE"
-      })
     }), atFreeLimit && /*#__PURE__*/_jsxs(Text, {
       style: styles.freeLimitNote,
       children: ["Free plan: ", FREE_SNAPSHOT_LIMIT, " restore points. Upgrade to Pro for unlimited snapshots."]
     }), /*#__PURE__*/_jsxs(View, {
-      style: styles.providerStrip,
-      children: [providers.map(p => {
-        const dotColor = !p.canCapture ? buoyColors.textMuted : p.canRestore ? buoyColors.success : buoyColors.warning;
-        return /*#__PURE__*/_jsxs(View, {
-          style: styles.providerChip,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [styles.providerDot, {
-              backgroundColor: dotColor
-            }]
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.providerLabel,
-            children: p.label
-          })]
-        }, p.id);
-      }), providers.length === 0 && /*#__PURE__*/_jsx(Text, {
-        style: styles.emptyText,
-        children: "No snapshot providers registered"
+      style: styles.sectionRow,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.sectionTitle,
+        children: "Sources"
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.sourceTiles,
+        children: [providers.map(p => {
+          const IconComp = SOURCE_ICONS[p.id] ?? TimeMachineIcon;
+          const dotColor = !p.canCapture ? buoyColors.textMuted : p.canRestore ? buoyColors.success : buoyColors.warning;
+          return /*#__PURE__*/_jsxs(View, {
+            style: styles.sourceTile,
+            children: [/*#__PURE__*/_jsx(IconComp, {
+              size: 16
+            }), /*#__PURE__*/_jsx(View, {
+              style: [styles.sourceTileDot, {
+                backgroundColor: dotColor
+              }]
+            })]
+          }, p.id);
+        }), providers.length === 0 && /*#__PURE__*/_jsx(Text, {
+          style: styles.emptyText,
+          children: "none registered"
+        })]
       })]
     }), unavailable.map(p => /*#__PURE__*/_jsxs(Text, {
       style: styles.providerDetail,
       children: [p.label, ": ", p.detail]
-    }, p.id)), hasLoaded && snapshots.length === 0 && /*#__PURE__*/_jsx(Text, {
+    }, p.id)), /*#__PURE__*/_jsx(Text, {
+      style: [styles.sectionTitle, styles.sectionSpacing],
+      children: "Restore points"
+    }), hasLoaded && snapshots.length === 0 && /*#__PURE__*/_jsx(Text, {
       style: styles.emptyText,
-      children: "No snapshots yet. Capture one, test your flow, then restore to jump right back."
-    }), snapshots.map(meta => {
+      children: "No restore points yet. Set up the state you want to return to, then capture it."
+    }), visibleSnapshots.map(meta => {
       const warnings = warningCount(meta);
-      return /*#__PURE__*/_jsxs(View, {
-        style: styles.snapshotRow,
+      return /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.snapshotCard,
+        onPress: () => openPreview(meta),
         testID: `time-machine-snap-${meta.id}`,
-        children: [/*#__PURE__*/_jsxs(View, {
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.snapshotIconTile,
+          children: meta.baseline ? /*#__PURE__*/_jsx(Home, {
+            size: 17,
+            color: buoyColors.textSecondary
+          }) : /*#__PURE__*/_jsx(TimeMachineIcon, {
+            size: 18
+          })
+        }), /*#__PURE__*/_jsxs(View, {
           style: styles.snapshotInfo,
-          children: [/*#__PURE__*/_jsxs(Text, {
+          children: [/*#__PURE__*/_jsx(Text, {
             style: styles.snapshotName,
             numberOfLines: 1,
-            children: [meta.baseline ? "⌂ " : "", meta.name]
+            children: meta.name
           }), /*#__PURE__*/_jsxs(Text, {
             style: styles.snapshotMeta,
-            children: [timeAgo(meta.createdAt), meta.baseline ? " · wipes to fresh install" : ` · ${formatBytes(meta.sizeBytes)} · ${Object.keys(meta.sources).join(", ") || "empty"}`, warnings > 0 ? ` · ⚠ ${warnings}` : ""]
+            numberOfLines: 1,
+            children: [meta.baseline ? "wipes to fresh install" : `${timeAgo(meta.createdAt)} · ${formatBytes(meta.sizeBytes)} · ${Object.keys(meta.sources).length} sources`, meta.scope?.length ? ` · scoped (${meta.scope.length})` : "", warnings > 0 ? ` · ⚠ ${warnings}` : ""]
           })]
-        }), !meta.baseline && /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.rowButton, busy && styles.buttonDisabled],
+        }), !meta.baseline ? /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.rowAction, busy && styles.buttonDisabled],
           onPress: () => restore(meta, "live"),
           disabled: busy !== null,
+          accessibilityLabel: "Restore",
           children: /*#__PURE__*/_jsx(Text, {
-            style: styles.rowButtonText,
+            style: styles.rowActionLabel,
             children: "RESTORE"
           })
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.rowButton, busy && styles.buttonDisabled],
+        }) : /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.rowAction, busy && styles.buttonDisabled],
           onPress: () => restore(meta, "reload"),
           disabled: busy !== null,
+          accessibilityLabel: "Wipe and reload",
           children: /*#__PURE__*/_jsx(Text, {
-            style: styles.rowButtonText,
-            children: meta.baseline ? "RESTORE" : "↻"
+            style: styles.rowActionLabelDanger,
+            children: "WIPE"
           })
         }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.deleteButton,
+          style: styles.rowAction,
           onPress: () => remove(meta),
           hitSlop: {
             top: 8,
@@ -234,39 +392,66 @@ export function TimeMachineBody() {
             left: 4,
             right: 8
           },
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.deleteButtonText,
-            children: "\u2715"
+          accessibilityLabel: "Delete",
+          children: /*#__PURE__*/_jsx(Trash2, {
+            size: 14,
+            color: buoyColors.error
           })
         })]
       }, meta.id);
+    }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: [styles.wipeAllButton, busy && styles.buttonDisabled],
+      onPress: wipeAll,
+      disabled: busy !== null,
+      testID: "time-machine-wipe-all",
+      children: [/*#__PURE__*/_jsx(Trash2, {
+        size: 13,
+        color: buoyColors.error
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.wipeAllText,
+        children: "Wipe all app state\u2026"
+      })]
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.wipeAllCaption,
+      children: "Deletes all app storage and reloads \u2014 like a fresh install."
     })]
   });
 }
 const styles = StyleSheet.create({
+  screenFill: {
+    flex: 1
+  },
   container: {
     padding: 12,
     gap: 8
   },
-  captureRow: {
+  captureCard: {
     flexDirection: "row",
+    alignItems: "center",
     gap: 8
   },
-  nameInput: {
+  captureField: {
     flex: 1,
-    backgroundColor: buoyColors.input,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    backgroundColor: buoyColors.card,
     borderColor: buoyColors.border,
     borderWidth: 1,
-    borderRadius: 6,
+    borderRadius: 10,
+    paddingHorizontal: 10
+  },
+  captureInput: {
+    flex: 1,
     color: buoyColors.text,
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    fontSize: 13
+    fontSize: 13,
+    paddingVertical: 9
   },
   captureButton: {
     backgroundColor: buoyColors.primary,
-    borderRadius: 6,
-    paddingHorizontal: 14,
+    borderRadius: 10,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
     justifyContent: "center"
   },
   captureButtonText: {
@@ -275,19 +460,6 @@ const styles = StyleSheet.create({
     fontWeight: "700",
     letterSpacing: 0.5
   },
-  baselineButton: {
-    borderColor: buoyColors.border,
-    borderWidth: 1,
-    borderRadius: 6,
-    paddingVertical: 8,
-    alignItems: "center"
-  },
-  baselineButtonText: {
-    color: buoyColors.textSecondary,
-    fontSize: 11,
-    fontWeight: "600",
-    letterSpacing: 0.5
-  },
   buttonDisabled: {
     opacity: 0.4
   },
@@ -295,83 +467,127 @@ const styles = StyleSheet.create({
     color: buoyColors.warning,
     fontSize: 11
   },
-  providerStrip: {
+  sectionRow: {
     flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 6,
-    marginTop: 4
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginTop: 12,
+    gap: 10
+  },
+  sectionTitle: {
+    color: buoyColors.text,
+    fontSize: 14,
+    fontWeight: "700"
+  },
+  sectionSpacing: {
+    marginTop: 14
   },
-  providerChip: {
+  sourceTiles: {
     flexDirection: "row",
-    alignItems: "center",
-    gap: 5,
+    gap: 6,
+    flexWrap: "wrap",
+    justifyContent: "flex-end",
+    flex: 1
+  },
+  sourceTile: {
+    width: 32,
+    height: 32,
+    borderRadius: 9,
     backgroundColor: buoyColors.card,
     borderColor: buoyColors.border,
     borderWidth: 1,
-    borderRadius: 12,
-    paddingHorizontal: 8,
-    paddingVertical: 3
+    alignItems: "center",
+    justifyContent: "center"
   },
-  providerDot: {
+  sourceTileDot: {
+    position: "absolute",
+    top: 3,
+    right: 3,
     width: 6,
     height: 6,
     borderRadius: 3
   },
-  providerLabel: {
-    color: buoyColors.textSecondary,
-    fontSize: 11
-  },
   providerDetail: {
     color: buoyColors.textMuted,
-    fontSize: 10
+    fontSize: 10,
+    marginTop: 4
   },
   emptyText: {
     color: buoyColors.textMuted,
     fontSize: 12,
     marginTop: 8
   },
-  snapshotRow: {
+  snapshotCard: {
     flexDirection: "row",
     alignItems: "center",
     backgroundColor: buoyColors.card,
     borderColor: buoyColors.border,
     borderWidth: 1,
-    borderRadius: 8,
-    padding: 10,
-    gap: 8
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    marginTop: 8,
+    gap: 10
+  },
+  snapshotIconTile: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    backgroundColor: buoyColors.hover,
+    alignItems: "center",
+    justifyContent: "center"
   },
   snapshotInfo: {
     flex: 1,
-    minWidth: 0
+    minWidth: 0,
+    gap: 2
   },
   snapshotName: {
     color: buoyColors.text,
-    fontSize: 13,
-    fontWeight: "600"
+    fontSize: 14,
+    fontWeight: "700"
   },
   snapshotMeta: {
     color: buoyColors.textMuted,
     fontSize: 10,
-    marginTop: 2
+    fontVariant: ["tabular-nums"]
   },
-  rowButton: {
-    borderColor: buoyColors.primary,
-    borderWidth: 1,
-    borderRadius: 6,
-    paddingHorizontal: 8,
-    paddingVertical: 6
+  rowAction: {
+    padding: 4,
+    justifyContent: "center",
+    alignItems: "center"
   },
-  rowButtonText: {
+  rowActionLabel: {
     color: buoyColors.primary,
-    fontSize: 10,
-    fontWeight: "700"
+    fontSize: 12,
+    fontWeight: "600"
   },
-  deleteButton: {
-    paddingHorizontal: 2
+  rowActionLabelDanger: {
+    color: buoyColors.error,
+    fontSize: 12,
+    fontWeight: "600"
   },
-  deleteButtonText: {
+  wipeAllButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 7,
+    borderColor: `${buoyColors.error}55`,
+    borderWidth: 1,
+    borderRadius: 10,
+    paddingVertical: 10,
+    marginTop: 18
+  },
+  wipeAllText: {
+    color: buoyColors.error,
+    fontSize: 12.5,
+    fontWeight: "600"
+  },
+  wipeAllCaption: {
     color: buoyColors.textMuted,
-    fontSize: 13
+    fontSize: 10,
+    textAlign: "center",
+    marginTop: 6
   },
   outcomePanel: {
     backgroundColor: buoyColors.card,