@buoy-gg/time-machine 7.0.17

package/src/components/TimeMachineBody.tsx

@@ -0,0 +1,455 @@
+/**
+ * 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.
+ */
+import { useState } from "react";
+import {
+  Alert,
+  Platform,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { buoyColors } from "@buoy-gg/shared-ui";
+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 { SnapshotMeta } from "../store/snapshotVault";
+
+const FREE_SNAPSHOT_LIMIT = 2;
+
+function timeAgo(ts: number): string {
+  const s = Math.max(0, Math.round((Date.now() - ts) / 1000));
+  if (s < 60) return `${s}s ago`;
+  const m = Math.round(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.round(m / 60);
+  if (h < 24) return `${h}h ago`;
+  return `${Math.round(h / 24)}d ago`;
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function warningCount(meta: SnapshotMeta): number {
+  return Object.values(meta.sources).reduce(
+    (sum, s) => sum + s.warnings.length,
+    0
+  );
+}
+
+/** RN-web's Alert renders no buttons — fall back to the browser dialog there. */
+function confirmDestructive(
+  title: string,
+  message: string,
+  confirmLabel: string,
+  onConfirm: () => void
+) {
+  if (Platform.OS === "web") {
+    const confirmFn = (globalThis as { confirm?: (msg: string) => boolean }).confirm;
+    if (!confirmFn || confirmFn(`${title}\n\n${message}`)) onConfirm();
+    return;
+  }
+  Alert.alert(title, message, [
+    { text: "Cancel", style: "cancel" },
+    { text: confirmLabel, style: "destructive", onPress: onConfirm },
+  ]);
+}
+
+function OutcomePanel({ outcome }: { outcome: RestoreOutcome }) {
+  const entries = Object.entries(outcome.results);
+  return (
+    <View style={styles.outcomePanel}>
+      <View style={styles.outcomeHeaderRow}>
+        <Text style={styles.outcomeTitle}>
+          Restored “{outcome.snapshotName}”
+          {outcome.mode === "reload" || outcome.willReload ? " · reloading" : ""}
+        </Text>
+        <TouchableOpacity
+          onPress={() => timeMachineStore.clearLastOutcome()}
+          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+        >
+          <Text style={styles.outcomeDismiss}>✕</Text>
+        </TouchableOpacity>
+      </View>
+      {entries.length === 0 && (
+        <Text style={styles.outcomeLine}>no sources restored</Text>
+      )}
+      {entries.map(([sourceId, r]) => (
+        <View key={sourceId} style={styles.outcomeSource}>
+          <Text style={[styles.outcomeLine, !r.ok && styles.outcomeLineBad]}>
+            {r.ok ? "✓" : "✕"} {sourceId} — applied {r.applied}
+            {r.skipped.length > 0 ? `, skipped ${r.skipped.length}` : ""}
+          </Text>
+          {r.skipped.slice(0, 3).map((skip) => (
+            <Text key={skip.id} style={styles.outcomeDetail}>
+              · {skip.id}: {skip.reason}
+            </Text>
+          ))}
+          {r.warnings.slice(0, 3).map((warning) => (
+            <Text key={warning} style={styles.outcomeDetail}>
+              ⚠ {warning}
+            </Text>
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+export function TimeMachineBody() {
+  const { snapshots, hasLoaded, busy, lastOutcome, remoteProviders } =
+    useTimeMachineState();
+  const localProviders = useSnapshotProviders();
+  const isPro = useIsPro();
+  const [name, setName] = useState("");
+
+  // On-device: live registry probes. Buoy Desktop: statuses mirrored from
+  // the device's sync payload.
+  const providers =
+    remoteProviders ??
+    localProviders.map((p) => ({ id: p.id, label: p.label, ...p.status() }));
+
+  const atFreeLimit = !isPro && snapshots.length >= FREE_SNAPSHOT_LIMIT;
+  const captureDisabled = busy !== null || atFreeLimit;
+
+  const capture = () => {
+    if (captureDisabled) return;
+    void timeMachineStore.capture(name);
+    setName("");
+  };
+
+  const captureBaseline = () => {
+    if (captureDisabled) return;
+    void timeMachineStore.captureBaseline();
+  };
+
+  const restore = (meta: SnapshotMeta, mode: "live" | "reload") => {
+    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);
+  };
+
+  const remove = (meta: SnapshotMeta) => {
+    confirmDestructive(
+      "Delete snapshot?",
+      `“${meta.name}” cannot be recovered.`,
+      "Delete",
+      () => void timeMachineStore.delete(meta.id)
+    );
+  };
+
+  const unavailable = providers.filter(
+    (p) => p.detail && (!p.canCapture || !p.canRestore)
+  );
+
+  return (
+    <View style={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"
+        />
+        <TouchableOpacity
+          style={[styles.captureButton, captureDisabled && styles.buttonDisabled]}
+          onPress={capture}
+          disabled={captureDisabled}
+          testID="time-machine-capture"
+        >
+          <Text style={styles.captureButtonText}>
+            {busy === "capture" ? "…" : "CAPTURE"}
+          </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
+          unlimited snapshots.
+        </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>
+        )}
+      </View>
+      {unavailable.map((p) => (
+        <Text key={p.id} style={styles.providerDetail}>
+          {p.label}: {p.detail}
+        </Text>
+      ))}
+
+      {/* Snapshot list */}
+      {hasLoaded && snapshots.length === 0 && (
+        <Text style={styles.emptyText}>
+          No snapshots yet. Capture one, test your flow, then restore to jump
+          right back.
+        </Text>
+      )}
+      {snapshots.map((meta) => {
+        const warnings = warningCount(meta);
+        return (
+          <View key={meta.id} style={styles.snapshotRow} testID={`time-machine-snap-${meta.id}`}>
+            <View style={styles.snapshotInfo}>
+              <Text style={styles.snapshotName} numberOfLines={1}>
+                {meta.baseline ? "⌂ " : ""}
+                {meta.name}
+              </Text>
+              <Text style={styles.snapshotMeta}>
+                {timeAgo(meta.createdAt)}
+                {meta.baseline
+                  ? " · wipes to fresh install"
+                  : ` · ${formatBytes(meta.sizeBytes)} · ${Object.keys(meta.sources).join(", ") || "empty"}`}
+                {warnings > 0 ? ` · ⚠ ${warnings}` : ""}
+              </Text>
+            </View>
+            {!meta.baseline && (
+              <TouchableOpacity
+                style={[styles.rowButton, busy && styles.buttonDisabled]}
+                onPress={() => restore(meta, "live")}
+                disabled={busy !== null}
+              >
+                <Text style={styles.rowButtonText}>RESTORE</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}
+              onPress={() => remove(meta)}
+              hitSlop={{ top: 8, bottom: 8, left: 4, right: 8 }}
+            >
+              <Text style={styles.deleteButtonText}>✕</Text>
+            </TouchableOpacity>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 12,
+    gap: 8,
+  },
+  captureRow: {
+    flexDirection: "row",
+    gap: 8,
+  },
+  nameInput: {
+    flex: 1,
+    backgroundColor: buoyColors.input,
+    borderColor: buoyColors.border,
+    borderWidth: 1,
+    borderRadius: 6,
+    color: buoyColors.text,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    fontSize: 13,
+  },
+  captureButton: {
+    backgroundColor: buoyColors.primary,
+    borderRadius: 6,
+    paddingHorizontal: 14,
+    justifyContent: "center",
+  },
+  captureButtonText: {
+    color: "#0A0A0A",
+    fontSize: 12,
+    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,
+  },
+  freeLimitNote: {
+    color: buoyColors.warning,
+    fontSize: 11,
+  },
+  providerStrip: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 6,
+    marginTop: 4,
+  },
+  providerChip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 5,
+    backgroundColor: buoyColors.card,
+    borderColor: buoyColors.border,
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+  },
+  providerDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+  },
+  providerLabel: {
+    color: buoyColors.textSecondary,
+    fontSize: 11,
+  },
+  providerDetail: {
+    color: buoyColors.textMuted,
+    fontSize: 10,
+  },
+  emptyText: {
+    color: buoyColors.textMuted,
+    fontSize: 12,
+    marginTop: 8,
+  },
+  snapshotRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: buoyColors.card,
+    borderColor: buoyColors.border,
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 10,
+    gap: 8,
+  },
+  snapshotInfo: {
+    flex: 1,
+    minWidth: 0,
+  },
+  snapshotName: {
+    color: buoyColors.text,
+    fontSize: 13,
+    fontWeight: "600",
+  },
+  snapshotMeta: {
+    color: buoyColors.textMuted,
+    fontSize: 10,
+    marginTop: 2,
+  },
+  rowButton: {
+    borderColor: buoyColors.primary,
+    borderWidth: 1,
+    borderRadius: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+  },
+  rowButtonText: {
+    color: buoyColors.primary,
+    fontSize: 10,
+    fontWeight: "700",
+  },
+  deleteButton: {
+    paddingHorizontal: 2,
+  },
+  deleteButtonText: {
+    color: buoyColors.textMuted,
+    fontSize: 13,
+  },
+  outcomePanel: {
+    backgroundColor: buoyColors.card,
+    borderColor: buoyColors.borderStrong,
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 10,
+    gap: 4,
+  },
+  outcomeHeaderRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  outcomeTitle: {
+    color: buoyColors.text,
+    fontSize: 12,
+    fontWeight: "700",
+    flex: 1,
+  },
+  outcomeDismiss: {
+    color: buoyColors.textMuted,
+    fontSize: 13,
+  },
+  outcomeSource: {
+    gap: 2,
+  },
+  outcomeLine: {
+    color: buoyColors.success,
+    fontSize: 11,
+  },
+  outcomeLineBad: {
+    color: buoyColors.warning,
+  },
+  outcomeDetail: {
+    color: buoyColors.textMuted,
+    fontSize: 10,
+    paddingLeft: 12,
+  },
+});

package/src/components/TimeMachineModal.tsx

@@ -0,0 +1,75 @@
+/**
+ * TimeMachineModal — bottom-sheet wrapper rendered by FloatingDevTools when
+ * the Time Machine tool is opened. TimeMachineToolView is the inline variant
+ * for Buoy Desktop.
+ */
+import { StyleSheet, Text, View } from "react-native";
+import { JsModal, buoyColors } from "@buoy-gg/shared-ui";
+import type { ModalState } from "@buoy-gg/shared-ui";
+import { TimeMachineBody } from "./TimeMachineBody";
+
+export interface TimeMachineModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onBack?: () => void;
+  onMinimize?: (modalState: ModalState) => void;
+  persistenceKey?: string;
+}
+
+function Header() {
+  return (
+    <View style={styles.header}>
+      <Text style={styles.headerTitle}>TIME MACHINE</Text>
+      <Text style={styles.headerSubtitle}>snapshot & restore app state</Text>
+    </View>
+  );
+}
+
+export function TimeMachineModal({
+  visible,
+  onClose,
+  onBack: _onBack,
+  onMinimize,
+  persistenceKey,
+}: TimeMachineModalProps) {
+  return (
+    <JsModal
+      visible={visible}
+      onClose={onClose}
+      onMinimize={onMinimize}
+      persistenceKey={persistenceKey}
+      header={{
+        showToggleButton: true,
+        customContent: <Header />,
+      }}
+      enablePersistence
+      initialMode="bottomSheet"
+    >
+      <TimeMachineBody />
+    </JsModal>
+  );
+}
+
+/** Inline variant (no modal chrome) — used by Buoy Desktop. */
+export function TimeMachineToolView() {
+  return <TimeMachineBody />;
+}
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: 8,
+    paddingHorizontal: 4,
+  },
+  headerTitle: {
+    color: buoyColors.text,
+    fontSize: 13,
+    fontWeight: "700",
+    letterSpacing: 1,
+  },
+  headerSubtitle: {
+    color: buoyColors.textMuted,
+    fontSize: 10,
+  },
+});

package/src/hooks/useTimeMachine.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState, useSyncExternalStore } from "react";
+import {
+  getStateSnapshotProviders,
+  subscribeToStateSnapshotProviders,
+  type StateSnapshotProvider,
+} from "@buoy-gg/shared-ui";
+import { timeMachineStore } from "../store/timeMachineStore";
+import type { TimeMachineState } from "../store/timeMachineStore";
+
+export function useTimeMachineState(): TimeMachineState {
+  return useSyncExternalStore(timeMachineStore.subscribe, () =>
+    timeMachineStore.getState()
+  );
+}
+
+/** Registered snapshot providers (query registers late, hence the subscribe). */
+export function useSnapshotProviders(): StateSnapshotProvider[] {
+  const [providers, setProviders] = useState(getStateSnapshotProviders);
+  useEffect(() => {
+    setProviders(getStateSnapshotProviders());
+    return subscribeToStateSnapshotProviders(() =>
+      setProviders(getStateSnapshotProviders())
+    );
+  }, []);
+  return providers;
+}

package/src/index.tsx

@@ -0,0 +1,45 @@
+/**
+ * @buoy-gg/time-machine
+ *
+ * Time Machine — snapshot & restore app state for React Native DevTools.
+ *
+ * Capture the complete client-side state of the app (storage, Redux,
+ * Zustand, Jotai, React Query) as a named snapshot; restore any snapshot in
+ * one tap to iterate on multi-step test flows without rebuilding state.
+ *
+ * PUBLIC API - Only these exports are supported for external use.
+ */
+
+// Tool preset for FloatingDevTools
+export { timeMachineToolPreset, createTimeMachineTool } from "./preset";
+
+// Components
+export {
+  TimeMachineModal,
+  TimeMachineToolView,
+  type TimeMachineModalProps,
+} from "./components/TimeMachineModal";
+
+// External-sync adapter (auto-registered by @buoy-gg/core)
+export { timeMachineSyncAdapter } from "./sync/timeMachineSyncAdapter";
+
+// Programmatic snapshot control (also used by tests / power users)
+export {
+  timeMachineStore,
+  RESTORE_ORDER,
+  type RestoreMode,
+  type RestoreOutcome,
+  type TimeMachineState,
+  type RemoteProviderStatus,
+} from "./store/timeMachineStore";
+
+// Buoy Desktop remote-mirror seam
+export {
+  setRemoteTimeMachineHandler,
+  replaceTimeMachineFromSnapshot,
+} from "./store/timeMachineStore";
+export type {
+  SnapshotMeta,
+  SnapshotSourceMeta,
+  StoredSnapshot,
+} from "./store/snapshotVault";

package/src/preset.tsx

@@ -0,0 +1,38 @@
+/**
+ * Pre-configured Time Machine tool for FloatingDevTools.
+ *
+ * @example
+ * ```tsx
+ * import { timeMachineToolPreset } from '@buoy-gg/time-machine';
+ *
+ * <FloatingDevTools apps={[timeMachineToolPreset]} />
+ * ```
+ */
+
+import {
+  TimeMachineIcon,
+  TIME_MACHINE_ICON_COLOR,
+} from "@buoy-gg/shared-ui";
+import { TimeMachineModal } from "./components/TimeMachineModal";
+
+export const timeMachineToolPreset = {
+  id: "time-machine",
+  name: "TIME MACHINE",
+  description: "Snapshot & restore app state (storage, stores, query cache)",
+  slot: "both" as const,
+  icon: ({ size, color }: { size: number; color?: string }) => (
+    <TimeMachineIcon size={size} color={color || TIME_MACHINE_ICON_COLOR} />
+  ),
+  component: TimeMachineModal,
+};
+
+/** Create a custom Time Machine tool configuration. */
+export function createTimeMachineTool(
+  options: { name?: string; description?: string } = {}
+) {
+  return {
+    ...timeMachineToolPreset,
+    name: options.name ?? timeMachineToolPreset.name,
+    description: options.description ?? timeMachineToolPreset.description,
+  };
+}