@buoy-gg/time-machine 7.0.22 → 7.0.24

package/lib/module/components/TimeMachineBody.js

@@ -1,726 +1,196 @@
 "use strict";
 
 /**
- * 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).
+ * Time Machine body — the screen router plus the restore-point list.
  *
- * 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).
+ * Screens: list → preview. Each is its own component that mounts and
+ * unmounts whole (no branching inside a single tree), and each owns its own
+ * scrolling — the host must NOT wrap this in a scroll view, or the preview's
+ * virtualized FlatList is defeated. Item diffs expand inline in that list
+ * rather than being a third screen.
+ *
+ * The list follows the grouped-inset surface in ../ui: capture bar, the
+ * Sources strip, one card of restore points with swipe-to-delete, and the
+ * app-wide wipe kept last and understated.
  */
 import { useState } from "react";
-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, RoutesIcon, StorageIcon, TimeMachineIcon, ZustandIcon } from "@buoy-gg/floating-tools-core";
+import { ScrollView, StyleSheet, Text, View } from "react-native";
+import { useSafeAreaInsets, useLimit } from "@buoy-gg/shared-ui";
 import { useToolHost } from "@buoy-gg/core";
 import { useIsPro } from "@buoy-gg/license";
-import { useSnapshotProviders, useTimeMachineState } from "../hooks/useTimeMachine";
+import { useTimeMachineState } from "../hooks/useTimeMachine";
 import { timeMachineStore } from "../store/timeMachineStore";
-import { canNavigate, currentRoute } from "../store/routeRestore";
-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,
-  route: RoutesIcon
-};
-
-/** Id of the route tile — a device capability, not a snapshot provider. */
-const ROUTE_SOURCE_ID = "route";
-function timeAgo(ts) {
-  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) {
-  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) {
-  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, message, confirmLabel, onConfirm) {
-  if (Platform.OS === "web") {
-    const confirmFn = globalThis.confirm;
-    if (!confirmFn || confirmFn(`${title}\n\n${message}`)) onConfirm();
-    return;
-  }
-  Alert.alert(title, message, [{
-    text: "Cancel",
-    style: "cancel"
-  }, {
-    text: confirmLabel,
-    style: "destructive",
-    onPress: onConfirm
-  }]);
-}
-
-/**
- * "Also go back to the screen this was captured on?"
- *
- * Asked BEFORE the restore runs, because a reload-mode restore has to park the
- * route in storage before the JS realm dies — there is no "after" to ask in.
- * `onChoose(withRoute)` runs the restore; dismissing cancels it entirely.
- *
- * RN-web's Alert renders no buttons, so the web (Buoy Desktop) path uses the
- * browser dialog: OK = state + route, Cancel = state only.
- */
-function confirmRestoreRoute(snapshotName, href, onChoose) {
-  const message = `“${snapshotName}” was captured on ${href}. Go back to that screen too, or restore state only?`;
-  if (Platform.OS === "web") {
-    const confirmFn = globalThis.confirm;
-    onChoose(confirmFn ? confirmFn(`Also return to ${href}?\n\n${message}`) : false);
-    return;
-  }
-  Alert.alert("Restore route too?", message, [{
-    text: "Cancel",
-    style: "cancel"
-  }, {
-    text: "State only",
-    onPress: () => onChoose(false)
-  }, {
-    text: `Go to ${href}`,
-    onPress: () => onChoose(true)
-  }]);
-}
+import { Footnote, Group, SectionLabel } from "../ui/primitives";
+import { tm } from "../ui/tmTheme";
+import { useSourceStatuses } from "./sources";
+import { confirmDestructive } from "./confirm";
+import { CaptureBar } from "./list/CaptureBar";
+import { RestoreOutcomeCard, restoreNeedsAttention } from "./list/RestoreOutcomeCard";
+import { SnapshotRow } from "./list/SnapshotRow";
+import { UndoDeleteBar } from "./list/UndoDeleteBar";
+import { SourcesStrip } from "./list/SourcesStrip";
+import { WipeAllRow } from "./list/WipeAllRow";
+import { PreviewScreen } from "./preview/PreviewFlow";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function TimeMachineBody() {
+  const [screen, setScreen] = useState({
+    kind: "list"
+  });
+  const {
+    snapshots,
+    busy,
+    preview
+  } = useTimeMachineState();
+  const sources = useSourceStatuses();
+  const backToList = () => {
+    timeMachineStore.clearPreview();
+    setScreen({
+      kind: "list"
+    });
+  };
 
-/**
- * Route leg of a restore: prompt when the snapshot has a captured route we
- * aren't already sitting on, otherwise restore straight away. On Buoy Desktop
- * the device's live route is unknown (no local router), so we always ask.
- */
-function restoreWithRoutePrompt(meta, run) {
-  const route = meta.route;
-  if (!route) {
-    run(false);
-    return;
-  }
-  if (currentRoute()?.href === route.href) {
-    run(false); // already on that screen — nothing to ask
-    return;
-  }
-  confirmRestoreRoute(meta.name, route.href, run);
-}
-function OutcomePanel({
-  outcome
-}) {
-  const entries = Object.entries(outcome.results);
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.outcomePanel,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.outcomeHeaderRow,
-      children: [/*#__PURE__*/_jsxs(Text, {
-        style: styles.outcomeTitle,
-        children: ["Restored \u201C", outcome.snapshotName, "\u201D", outcome.mode === "reload" || outcome.willReload ? " · reloading" : ""]
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: () => timeMachineStore.clearLastOutcome(),
-        hitSlop: {
-          top: 8,
-          bottom: 8,
-          left: 8,
-          right: 8
-        },
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.outcomeDismiss,
-          children: "\u2715"
-        })
-      })]
-    }), entries.length === 0 && /*#__PURE__*/_jsx(Text, {
-      style: styles.outcomeLine,
-      children: "no sources restored"
-    }), outcome.route && /*#__PURE__*/_jsx(Text, {
-      style: [styles.outcomeLine, (outcome.route.status === "failed" || outcome.route.status === "unavailable") && styles.outcomeLineBad],
-      children: outcome.route.status === "navigated" ? `✓ route — ${outcome.route.href}` : outcome.route.status === "deferred" ? `↻ route — ${outcome.route.href} after reload` : `✕ route — ${outcome.route.error ?? outcome.route.status}`
-    }), entries.map(([sourceId, r]) => /*#__PURE__*/_jsxs(View, {
-      style: styles.outcomeSource,
-      children: [/*#__PURE__*/_jsxs(Text, {
-        style: [styles.outcomeLine, !r.ok && styles.outcomeLineBad],
-        children: [r.ok ? "✓" : "✕", " ", sourceId, " \u2014 applied ", r.applied, r.skipped.length > 0 ? `, skipped ${r.skipped.length}` : ""]
-      }), r.skipped.slice(0, 3).map(skip => /*#__PURE__*/_jsxs(Text, {
-        style: styles.outcomeDetail,
-        children: ["\xB7 ", skip.id, ": ", skip.reason]
-      }, skip.id)), r.warnings.slice(0, 3).map(warning => /*#__PURE__*/_jsxs(Text, {
-        style: styles.outcomeDetail,
-        children: ["\u26A0 ", warning]
-      }, warning))]
-    }, sourceId))]
+  // The preview can't render without a built diff (clearPreview races a
+  // back-navigation) — fall through to the list rather than an empty shell.
+  if (screen.kind === "preview" && preview) return /*#__PURE__*/_jsx(PreviewScreen, {
+    preview: preview,
+    snapshots: snapshots,
+    busy: busy !== null,
+    onClose: backToList
+  });
+  return /*#__PURE__*/_jsx(RestorePointList, {
+    sources: sources,
+    onOpenPreview: meta => {
+      void timeMachineStore.buildPreview({
+        snapshotId: meta.id
+      });
+      setScreen({
+        kind: "preview"
+      });
+    }
   });
 }
-export function TimeMachineBody() {
+function RestorePointList({
+  sources,
+  onOpenPreview
+}) {
   const {
     snapshots,
     hasLoaded,
     busy,
     lastOutcome,
-    preview,
-    remoteProviders,
-    remoteRoute
+    recentlyDeleted
   } = useTimeMachineState();
-  const localProviders = useSnapshotProviders();
   const isPro = useIsPro();
+  const snapshotLimit = useLimit("timeMachine.snapshots");
   const host = useToolHost();
-  const [name, setName] = useState("");
-  const [screen, setScreen] = useState({
-    kind: "list"
+  const insets = useSafeAreaInsets({
+    minBottom: 16
   });
-  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;
+  // Header search (when hosted by the core shell) filters the list.
+  const query = host.search.trim().toLowerCase();
+  const visible = query ? snapshots.filter(s => s.name.toLowerCase().includes(query)) : snapshots;
 
-  // 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()
-  }));
+  // Infinity for Pro, so this is simply false for them.
+  const atCaptureLimit = snapshots.length >= snapshotLimit;
+  const captureDisabled = busy !== null || atCaptureLimit;
 
-  // Route sits in the same strip as the state sources so its availability is
-  // visible before you ever open a restore point — but it's a device
-  // capability, not a registered provider, so it's derived separately (from
-  // the live router here, from the device's payload on Buoy Desktop).
-  const routeAvailable = remoteProviders ? remoteRoute?.available === true : canNavigate();
-  const routeSource = {
-    id: ROUTE_SOURCE_ID,
-    label: "Route",
-    canCapture: routeAvailable,
-    canRestore: routeAvailable,
-    // No live route in the caption: this screen only re-renders on store
-    // changes, so a pathname printed here goes stale the moment you navigate
-    // with the tool still open. Each restore point shows the route it holds.
-    detail: routeAvailable ? "recorded with every snapshot — restore can take you back" : "no Expo Router detected — snapshots record no route"
-  };
-  const sourceTiles = [...providers, routeSource];
-  const atFreeLimit = !isPro && snapshots.length >= FREE_SNAPSHOT_LIMIT;
-  const captureDisabled = busy !== null || atFreeLimit;
-  const capture = () => {
-    if (captureDisabled) return;
-    void timeMachineStore.capture(name);
-    setName("");
-  };
-  const restore = (meta, mode, excludeKeys) => {
+  /**
+   * Restoring is the last thing anyone wants from this screen, so the tool
+   * gets out of the way the moment it worked — with no toast and no banner.
+   * The restored app IS the confirmation, and anything announcing it is one
+   * more thing to dismiss on a flow people run dozens of times an hour.
+   *
+   * It MINIMIZES rather than closes: the list, the search and the screen you
+   * were on all survive, and coming back is one tap on the dock. A partial
+   * restore stays open instead, because the outcome card is the only place
+   * the per-source failures are reported.
+   */
+  const restore = meta => {
     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;
     }
-    restoreWithRoutePrompt(meta, restoreRoute => {
-      void timeMachineStore.restore(meta.id, mode, excludeKeys, {
-        restoreRoute
-      });
+    void timeMachineStore.restore(meta.id, "live").then(outcome => {
+      const clean = Object.values(outcome.results).every(r => r.ok);
+      if (!clean || outcome.willReload) return;
+      host.minimize();
     });
   };
-  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.
-          restoreWithRoutePrompt(rightMeta, restoreRoute => {
-            void timeMachineStore.restore(rightMeta.id, mode, excludeKeys, {
-              restoreRoute
-            }).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 = sourceTiles.filter(p => p.detail && (!p.canCapture || !p.canRestore));
   return /*#__PURE__*/_jsxs(ScrollView, {
-    style: styles.screenFill,
-    contentContainerStyle: styles.container,
-    children: [lastOutcome && /*#__PURE__*/_jsx(OutcomePanel, {
+    style: styles.fill,
+    contentContainerStyle: [styles.content, {
+      paddingBottom: insets.bottom
+    }],
+    children: [lastOutcome && restoreNeedsAttention(lastOutcome) ? /*#__PURE__*/_jsx(RestoreOutcomeCard, {
       outcome: lastOutcome
-    }), /*#__PURE__*/_jsxs(View, {
-      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,
+    }) : null, recentlyDeleted ? /*#__PURE__*/_jsx(UndoDeleteBar, {
+      name: recentlyDeleted.stored.meta.name,
+      at: recentlyDeleted.at,
+      onUndo: () => void timeMachineStore.undoDelete(),
+      onExpire: () => timeMachineStore.clearRecentlyDeleted()
+    }) : null, /*#__PURE__*/_jsx(View, {
+      children: /*#__PURE__*/_jsx(CaptureBar, {
         disabled: captureDisabled,
-        testID: "time-machine-capture",
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.captureButtonText,
-          children: busy === "capture" ? "…" : "CAPTURE"
-        })
-      })]
-    }), 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.sectionRow,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.sectionTitle,
-        children: "Sources"
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.sourceTiles,
-        children: [sourceTiles.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,
-            testID: `time-machine-source-${p.id}`,
-            accessibilityLabel: `${p.label}: ${p.canCapture ? p.canRestore ? "capture and restore" : "capture only" : "unavailable"}`,
-            children: [/*#__PURE__*/_jsx(IconComp, {
-              size: 16
-            }), /*#__PURE__*/_jsx(View, {
-              style: [styles.sourceTileDot, {
-                backgroundColor: dotColor
-              }]
-            })]
-          }, p.id);
-        }), providers.length === 0 && !routeAvailable && /*#__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)), routeAvailable && /*#__PURE__*/_jsxs(Text, {
-      style: styles.providerDetail,
-      numberOfLines: 1,
-      children: [routeSource.label, ": ", routeSource.detail]
-    }), /*#__PURE__*/_jsx(Text, {
-      style: [styles.sectionTitle, styles.sectionSpacing],
-      children: "Restore points"
-    }), hasLoaded && snapshots.length === 0 && /*#__PURE__*/_jsx(Text, {
-      style: styles.emptyText,
-      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(TouchableOpacity, {
-        style: styles.snapshotCard,
-        onPress: () => openPreview(meta),
-        testID: `time-machine-snap-${meta.id}`,
-        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__*/_jsx(Text, {
-            style: styles.snapshotName,
-            numberOfLines: 1,
-            children: meta.name
-          }), /*#__PURE__*/_jsxs(Text, {
-            style: styles.snapshotMeta,
-            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 && meta.route && /*#__PURE__*/_jsxs(Text, {
-            style: styles.snapshotRoute,
-            numberOfLines: 1,
-            children: ["\u2316 ", meta.route.href]
-          })]
-        }), !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.rowActionLabel,
-            children: "RESTORE"
-          })
-        }) : /*#__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.rowActionLabelDanger,
-            children: "WIPE"
-          })
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.rowAction,
-          onPress: () => remove(meta),
-          hitSlop: {
-            top: 8,
-            bottom: 8,
-            left: 4,
-            right: 8
-          },
-          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,
+        busy: busy === "capture",
+        onCapture: name => void timeMachineStore.capture(name)
+      })
+    }), atCaptureLimit ? /*#__PURE__*/_jsxs(Footnote, {
+      tone: "warning",
+      children: ["Free plan keeps ", snapshotLimit, " restore points. Upgrade to Pro for unlimited snapshots."]
+    }) : null, /*#__PURE__*/_jsx(SectionLabel, {
+      children: "Sources"
+    }), /*#__PURE__*/_jsx(SourcesStrip, {
+      sources: sources
+    }), sources.filter(s => s.detail && !(s.canCapture && s.canRestore)).map(s => /*#__PURE__*/_jsxs(Footnote, {
+      children: [s.label, ": ", s.detail]
+    }, s.id)), /*#__PURE__*/_jsx(SectionLabel, {
+      children: "Restore Points"
+    }), /*#__PURE__*/_jsxs(Group, {
+      children: [visible.map(meta => /*#__PURE__*/_jsx(SnapshotRow, {
+        meta: meta,
+        busy: busy !== null,
+        onOpen: () => onOpenPreview(meta),
+        onRestore: () => restore(meta),
+        onDelete: () => void timeMachineStore.delete(meta.id),
+        onDuplicate: () => void timeMachineStore.duplicate(meta.id)
+      }, meta.id)), visible.length === 0 ? /*#__PURE__*/_jsx(Text, {
+        style: styles.empty,
+        children: !hasLoaded ? "Loading restore points…" : snapshots.length > 0 ? "No restore point matches that name." : "Set up the state you want to come back to, then capture it."
+      }) : null]
+    }), visible.length > 0 ? /*#__PURE__*/_jsx(Footnote, {
+      children: "Swipe a restore point to rename, copy or delete it."
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: styles.spacer
+    }), /*#__PURE__*/_jsx(Group, {
+      children: /*#__PURE__*/_jsx(WipeAllRow, {
+        disabled: busy !== null,
+        onWipe: () => confirmDestructive("Wipe all app state?", "This deletes all app storage and reloads the app — like a fresh install.", "Wipe & reload", () => void timeMachineStore.wipeAll())
+      })
+    }), /*#__PURE__*/_jsx(Footnote, {
+      centered: true,
       children: "Deletes all app storage and reloads \u2014 like a fresh install."
     })]
   });
 }
 const styles = StyleSheet.create({
-  screenFill: {
-    flex: 1
-  },
-  container: {
-    padding: 12,
-    gap: 8
-  },
-  captureCard: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  captureField: {
+  fill: {
     flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    backgroundColor: buoyColors.card,
-    borderColor: buoyColors.border,
-    borderWidth: 1,
-    borderRadius: 10,
-    paddingHorizontal: 10
-  },
-  captureInput: {
-    flex: 1,
-    color: buoyColors.text,
-    fontSize: 13,
-    paddingVertical: 9
-  },
-  captureButton: {
-    backgroundColor: buoyColors.primary,
-    borderRadius: 10,
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-    justifyContent: "center"
-  },
-  captureButtonText: {
-    color: "#0A0A0A",
-    fontSize: 12,
-    fontWeight: "700",
-    letterSpacing: 0.5
-  },
-  buttonDisabled: {
-    opacity: 0.4
-  },
-  freeLimitNote: {
-    color: buoyColors.warning,
-    fontSize: 11
-  },
-  sectionRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginTop: 12,
-    gap: 10
-  },
-  sectionTitle: {
-    color: buoyColors.text,
-    fontSize: 14,
-    fontWeight: "700"
-  },
-  sectionSpacing: {
-    marginTop: 14
-  },
-  sourceTiles: {
-    flexDirection: "row",
-    gap: 6,
-    flexWrap: "wrap",
-    justifyContent: "flex-end",
-    flex: 1
-  },
-  sourceTile: {
-    width: 32,
-    height: 32,
-    borderRadius: 9,
-    backgroundColor: buoyColors.card,
-    borderColor: buoyColors.border,
-    borderWidth: 1,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  sourceTileDot: {
-    position: "absolute",
-    top: 3,
-    right: 3,
-    width: 6,
-    height: 6,
-    borderRadius: 3
-  },
-  providerDetail: {
-    color: buoyColors.textMuted,
-    fontSize: 10,
-    marginTop: 4
-  },
-  emptyText: {
-    color: buoyColors.textMuted,
-    fontSize: 12,
-    marginTop: 8
-  },
-  snapshotCard: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: buoyColors.card,
-    borderColor: buoyColors.border,
-    borderWidth: 1,
-    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: 14,
-    fontWeight: "700"
-  },
-  snapshotMeta: {
-    color: buoyColors.textMuted,
-    fontSize: 10,
-    fontVariant: ["tabular-nums"]
-  },
-  snapshotRoute: {
-    color: buoyColors.textSecondary,
-    fontSize: 10
-  },
-  rowAction: {
-    padding: 4,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  rowActionLabel: {
-    color: buoyColors.primary,
-    fontSize: 12,
-    fontWeight: "600"
-  },
-  rowActionLabelDanger: {
-    color: buoyColors.error,
-    fontSize: 12,
-    fontWeight: "600"
-  },
-  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: 10,
-    textAlign: "center",
-    marginTop: 6
-  },
-  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
+    backgroundColor: tm.color.sheet
   },
-  outcomeLine: {
-    color: buoyColors.success,
-    fontSize: 11
+  content: {
+    paddingTop: 14
   },
-  outcomeLineBad: {
-    color: buoyColors.warning
+  empty: {
+    color: tm.color.labelSecondary,
+    fontSize: tm.font.footnote,
+    lineHeight: tm.font.footnote * 1.4,
+    paddingHorizontal: tm.textInset,
+    paddingVertical: 16
   },
-  outcomeDetail: {
-    color: buoyColors.textMuted,
-    fontSize: 10,
-    paddingLeft: 12
+  spacer: {
+    height: 24
   }
 });
 //# sourceMappingURL=TimeMachineBody.js.map