@buoy-gg/time-machine 7.0.17 → 7.0.18

package/src/components/TimeMachineBody.tsx

@@ -1,27 +1,64 @@
 /**
- * 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,
+  ScrollView,
   StyleSheet,
   Text,
   TextInput,
   TouchableOpacity,
   View,
 } from "react-native";
-import { buoyColors } from "@buoy-gg/shared-ui";
+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 type {
+  EventPickerItem,
+  StateSnapshotPreviewItem,
+} from "@buoy-gg/shared-ui";
+import { useToolHost } from "@buoy-gg/core";
 import { useIsPro } from "@buoy-gg/license";
 import { useSnapshotProviders, useTimeMachineState } from "../hooks/useTimeMachine";
 import { timeMachineStore } from "../store/timeMachineStore";
-import type { RestoreOutcome } from "../store/timeMachineStore";
+import type { PreviewSideRef, RestoreOutcome } from "../store/timeMachineStore";
 import type { SnapshotMeta } from "../store/snapshotVault";
+import { RestorePreviewScreen } from "./preview/RestorePreviewScreen";
+import { ItemDetailScreen } from "./preview/ItemDetailScreen";
 
 const FREE_SNAPSHOT_LIMIT = 2;
 
+const SOURCE_ICONS: Record<
+  string,
+  React.ComponentType<{ size?: number; color?: string }>
+> = {
+  storage: StorageIcon,
+  redux: ReduxIcon,
+  zustand: ZustandIcon,
+  jotai: JotaiIcon,
+  query: QueryIcon,
+};
+
 function timeAgo(ts: number): string {
   const s = Math.max(0, Math.round((Date.now() - ts) / 1000));
   if (s < 60) return `${s}s ago`;
@@ -104,12 +141,31 @@ function OutcomePanel({ outcome }: { outcome: RestoreOutcome }) {
   );
 }
 
+type Screen =
+  | { kind: "list" }
+  | { kind: "preview" }
+  | {
+      kind: "item";
+      sourceId: string;
+      sourceLabel: string;
+      item: StateSnapshotPreviewItem;
+    };
+
 export function TimeMachineBody() {
-  const { snapshots, hasLoaded, busy, lastOutcome, remoteProviders } =
+  const { snapshots, hasLoaded, busy, lastOutcome, preview, remoteProviders } =
     useTimeMachineState();
   const localProviders = useSnapshotProviders();
   const isPro = useIsPro();
+  const host = useToolHost();
   const [name, setName] = useState("");
+  const [screen, setScreen] = useState<Screen>({ kind: "list" });
+  const [picker, setPicker] = useState<"left" | "right" | null>(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.
@@ -126,12 +182,11 @@ export function TimeMachineBody() {
     setName("");
   };
 
-  const captureBaseline = () => {
-    if (captureDisabled) return;
-    void timeMachineStore.captureBaseline();
-  };
-
-  const restore = (meta: SnapshotMeta, mode: "live" | "reload") => {
+  const restore = (
+    meta: SnapshotMeta,
+    mode: "live" | "reload",
+    excludeKeys?: string[]
+  ) => {
     if (busy) return;
     if (meta.baseline) {
       confirmDestructive(
@@ -142,7 +197,7 @@ export function TimeMachineBody() {
       );
       return;
     }
-    void timeMachineStore.restore(meta.id, mode);
+    void timeMachineStore.restore(meta.id, mode, excludeKeys);
   };
 
   const remove = (meta: SnapshotMeta) => {
@@ -154,27 +209,181 @@ export function TimeMachineBody() {
     );
   };
 
+  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: SnapshotMeta) => {
+    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 (
+      <ItemDetailScreen
+        sourceLabel={screen.sourceLabel}
+        item={screen.item}
+        leftLabel={
+          preview.left === "current"
+            ? "CURRENT"
+            : snapshots.find(
+                (s) => s.id === (preview.left as { snapshotId: string }).snapshotId
+              )?.name ?? "snapshot"
+        }
+        rightLabel={
+          preview.right === "current"
+            ? "CURRENT"
+            : snapshots.find(
+                (s) =>
+                  s.id === (preview.right as { snapshotId: string }).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 as { snapshotId: string }).snapshotId
+          );
+
+    const pickerItems: EventPickerItem[] = [];
+    if (picker) {
+      const otherRef = picker === "left" ? preview.right : preview.left;
+      const otherId =
+        otherRef === "current" ? null : (otherRef as { snapshotId: string }).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 as { snapshotId: string }).snapshotId === s.id,
+        });
+      });
+    }
+
+    const onPickerSelect = (index: number) => {
+      const side = picker;
+      setPicker(null);
+      if (!side) return;
+      let ref: PreviewSideRef;
+      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 (
+      <View style={styles.screenFill}>
+        <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 && (
+          <EventPickerModal
+            isOpen
+            onClose={() => setPicker(null)}
+            title={picker === "left" ? "Compare from" : "Compare to"}
+            position={picker}
+            items={pickerItems}
+            onSelect={onPickerSelect}
+          />
+        )}
+      </View>
+    );
+  }
+
+  // ── List screen ──
   const unavailable = providers.filter(
     (p) => p.detail && (!p.canCapture || !p.canRestore)
   );
 
   return (
-    <View style={styles.container}>
+    <ScrollView style={styles.screenFill} contentContainerStyle={styles.container}>
       {lastOutcome && <OutcomePanel outcome={lastOutcome} />}
 
-      {/* Capture bar */}
-      <View style={styles.captureRow}>
-        <TextInput
-          style={styles.nameInput}
-          value={name}
-          onChangeText={setName}
-          placeholder="Snapshot name…"
-          placeholderTextColor={buoyColors.textMuted}
-          editable={!captureDisabled}
-          onSubmitEditing={capture}
-          returnKeyType="done"
-          testID="time-machine-name-input"
-        />
+      {/* Capture card */}
+      <View style={styles.captureCard}>
+        <View style={styles.captureField}>
+          <Plus size={14} color={buoyColors.textMuted} />
+          <TextInput
+            style={styles.captureInput}
+            value={name}
+            onChangeText={setName}
+            placeholder="Name this restore point…"
+            placeholderTextColor={buoyColors.textMuted}
+            editable={!captureDisabled}
+            onSubmitEditing={capture}
+            returnKeyType="done"
+            testID="time-machine-name-input"
+          />
+        </View>
         <TouchableOpacity
           style={[styles.captureButton, captureDisabled && styles.buttonDisabled]}
           onPress={capture}
@@ -186,16 +395,6 @@ export function TimeMachineBody() {
           </Text>
         </TouchableOpacity>
       </View>
-      <TouchableOpacity
-        style={[styles.baselineButton, captureDisabled && styles.buttonDisabled]}
-        onPress={captureBaseline}
-        disabled={captureDisabled}
-        testID="time-machine-capture-baseline"
-      >
-        <Text style={styles.baselineButtonText}>
-          ⌂ CAPTURE FRESH-INSTALL BASELINE
-        </Text>
-      </TouchableOpacity>
       {atFreeLimit && (
         <Text style={styles.freeLimitNote}>
           Free plan: {FREE_SNAPSHOT_LIMIT} restore points. Upgrade to Pro for
@@ -203,24 +402,30 @@ export function TimeMachineBody() {
         </Text>
       )}
 
-      {/* Provider status */}
-      <View style={styles.providerStrip}>
-        {providers.map((p) => {
-          const dotColor = !p.canCapture
-            ? buoyColors.textMuted
-            : p.canRestore
-              ? buoyColors.success
-              : buoyColors.warning;
-          return (
-            <View key={p.id} style={styles.providerChip}>
-              <View style={[styles.providerDot, { backgroundColor: dotColor }]} />
-              <Text style={styles.providerLabel}>{p.label}</Text>
-            </View>
-          );
-        })}
-        {providers.length === 0 && (
-          <Text style={styles.emptyText}>No snapshot providers registered</Text>
-        )}
+      {/* Sources — detection at a glance */}
+      <View style={styles.sectionRow}>
+        <Text style={styles.sectionTitle}>Sources</Text>
+        <View style={styles.sourceTiles}>
+          {providers.map((p) => {
+            const IconComp = SOURCE_ICONS[p.id] ?? TimeMachineIcon;
+            const dotColor = !p.canCapture
+              ? buoyColors.textMuted
+              : p.canRestore
+                ? buoyColors.success
+                : buoyColors.warning;
+            return (
+              <View key={p.id} style={styles.sourceTile}>
+                <IconComp size={16} />
+                <View
+                  style={[styles.sourceTileDot, { backgroundColor: dotColor }]}
+                />
+              </View>
+            );
+          })}
+          {providers.length === 0 && (
+            <Text style={styles.emptyText}>none registered</Text>
+          )}
+        </View>
       </View>
       {unavailable.map((p) => (
         <Text key={p.id} style={styles.providerDetail}>
@@ -228,86 +433,129 @@ export function TimeMachineBody() {
         </Text>
       ))}
 
-      {/* Snapshot list */}
+      {/* Restore points */}
+      <Text style={[styles.sectionTitle, styles.sectionSpacing]}>
+        Restore points
+      </Text>
       {hasLoaded && snapshots.length === 0 && (
         <Text style={styles.emptyText}>
-          No snapshots yet. Capture one, test your flow, then restore to jump
-          right back.
+          No restore points yet. Set up the state you want to return to, then
+          capture it.
         </Text>
       )}
-      {snapshots.map((meta) => {
+      {visibleSnapshots.map((meta) => {
         const warnings = warningCount(meta);
         return (
-          <View key={meta.id} style={styles.snapshotRow} testID={`time-machine-snap-${meta.id}`}>
+          <TouchableOpacity
+            key={meta.id}
+            style={styles.snapshotCard}
+            onPress={() => openPreview(meta)}
+            testID={`time-machine-snap-${meta.id}`}
+          >
+            <View style={styles.snapshotIconTile}>
+              {meta.baseline ? (
+                <Home size={17} color={buoyColors.textSecondary} />
+              ) : (
+                <TimeMachineIcon size={18} />
+              )}
+            </View>
             <View style={styles.snapshotInfo}>
               <Text style={styles.snapshotName} numberOfLines={1}>
-                {meta.baseline ? "⌂ " : ""}
                 {meta.name}
               </Text>
-              <Text style={styles.snapshotMeta}>
-                {timeAgo(meta.createdAt)}
+              <Text style={styles.snapshotMeta} numberOfLines={1}>
                 {meta.baseline
-                  ? " · wipes to fresh install"
-                  : ` · ${formatBytes(meta.sizeBytes)} · ${Object.keys(meta.sources).join(", ") || "empty"}`}
+                  ? "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}` : ""}
               </Text>
             </View>
-            {!meta.baseline && (
+            {!meta.baseline ? (
               <TouchableOpacity
-                style={[styles.rowButton, busy && styles.buttonDisabled]}
+                style={[styles.rowAction, busy && styles.buttonDisabled]}
                 onPress={() => restore(meta, "live")}
                 disabled={busy !== null}
+                accessibilityLabel="Restore"
+              >
+                <Text style={styles.rowActionLabel}>RESTORE</Text>
+              </TouchableOpacity>
+            ) : (
+              <TouchableOpacity
+                style={[styles.rowAction, busy && styles.buttonDisabled]}
+                onPress={() => restore(meta, "reload")}
+                disabled={busy !== null}
+                accessibilityLabel="Wipe and reload"
               >
-                <Text style={styles.rowButtonText}>RESTORE</Text>
+                <Text style={styles.rowActionLabelDanger}>WIPE</Text>
               </TouchableOpacity>
             )}
             <TouchableOpacity
-              style={[styles.rowButton, busy && styles.buttonDisabled]}
-              onPress={() => restore(meta, "reload")}
-              disabled={busy !== null}
-            >
-              <Text style={styles.rowButtonText}>
-                {meta.baseline ? "RESTORE" : "↻"}
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={styles.deleteButton}
+              style={styles.rowAction}
               onPress={() => remove(meta)}
               hitSlop={{ top: 8, bottom: 8, left: 4, right: 8 }}
+              accessibilityLabel="Delete"
             >
-              <Text style={styles.deleteButtonText}>✕</Text>
+              <Trash2 size={14} color={buoyColors.error} />
             </TouchableOpacity>
-          </View>
+          </TouchableOpacity>
         );
       })}
-    </View>
+
+      {/* Destructive utility — deliberately last and understated. */}
+      <TouchableOpacity
+        style={[styles.wipeAllButton, busy && styles.buttonDisabled]}
+        onPress={wipeAll}
+        disabled={busy !== null}
+        testID="time-machine-wipe-all"
+      >
+        <Trash2 size={13} color={buoyColors.error} />
+        <Text style={styles.wipeAllText}>Wipe all app state…</Text>
+      </TouchableOpacity>
+      <Text style={styles.wipeAllCaption}>
+        Deletes all app storage and reloads — like a fresh install.
+      </Text>
+    </ScrollView>
   );
 }
 
 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,
-    color: buoyColors.text,
+    borderRadius: 10,
     paddingHorizontal: 10,
-    paddingVertical: 8,
+  },
+  captureInput: {
+    flex: 1,
+    color: buoyColors.text,
     fontSize: 13,
+    paddingVertical: 9,
   },
   captureButton: {
     backgroundColor: buoyColors.primary,
-    borderRadius: 6,
-    paddingHorizontal: 14,
+    borderRadius: 10,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
     justifyContent: "center",
   },
   captureButtonText: {
@@ -316,19 +564,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,
   },
@@ -336,83 +571,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",
   },
-  providerChip: {
+  sectionSpacing: {
+    marginTop: 14,
+  },
+  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,
+    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,
+    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,