@buoy-gg/time-machine 7.0.22 → 7.0.24

package/src/components/TimeMachineBody.tsx

@@ -1,296 +1,110 @@
 /**
- * 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 type {
-  EventPickerItem,
-  StateSnapshotPreviewItem,
-} from "@buoy-gg/shared-ui";
+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 type { PreviewSideRef, RestoreOutcome } from "../store/timeMachineStore";
-import { canNavigate, currentRoute } from "../store/routeRestore";
 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,
-  route: RoutesIcon,
-};
-
-/** Id of the route tile — a device capability, not a snapshot provider. */
-const ROUTE_SOURCE_ID = "route";
-
-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`;
-}
+import { Footnote, Group, SectionLabel } from "../ui/primitives";
+import { tm } from "../ui/tmTheme";
+import { useSourceStatuses, type SourceStatus } 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";
 
-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`;
-}
+type Screen = { kind: "list" } | { kind: "preview" };
 
-function warningCount(meta: SnapshotMeta): number {
-  return Object.values(meta.sources).reduce(
-    (sum, s) => sum + s.warnings.length,
-    0
-  );
-}
+export function TimeMachineBody() {
+  const [screen, setScreen] = useState<Screen>({ kind: "list" });
+  const { snapshots, busy, preview } = useTimeMachineState();
+  const sources = useSourceStatuses();
 
-/** 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 },
-  ]);
-}
+  const backToList = () => {
+    timeMachineStore.clearPreview();
+    setScreen({ kind: "list" });
+  };
 
-/**
- * "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: string,
-  href: string,
-  onChoose: (withRoute: boolean) => void
-) {
-  const message = `“${snapshotName}” was captured on ${href}. Go back to that screen too, or restore state only?`;
-  if (Platform.OS === "web") {
-    const confirmFn = (globalThis as { confirm?: (msg: string) => boolean })
-      .confirm;
-    onChoose(
-      confirmFn
-        ? confirmFn(`Also return to ${href}?\n\n${message}`)
-        : false
+  // 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 (
+      <PreviewScreen
+        preview={preview}
+        snapshots={snapshots}
+        busy={busy !== null}
+        onClose={backToList}
+      />
     );
-    return;
-  }
-  Alert.alert("Restore route too?", message, [
-    { text: "Cancel", style: "cancel" },
-    { text: "State only", onPress: () => onChoose(false) },
-    { text: `Go to ${href}`, onPress: () => onChoose(true) },
-  ]);
-}
 
-/**
- * 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: SnapshotMeta,
-  run: (restoreRoute: boolean) => void
-) {
-  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 }: { 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>
-      )}
-      {outcome.route && (
-        <Text
-          style={[
-            styles.outcomeLine,
-            (outcome.route.status === "failed" ||
-              outcome.route.status === "unavailable") &&
-              styles.outcomeLineBad,
-          ]}
-        >
-          {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}`}
-        </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>
+    <RestorePointList
+      sources={sources}
+      onOpenPreview={(meta) => {
+        void timeMachineStore.buildPreview({ snapshotId: meta.id });
+        setScreen({ kind: "preview" });
+      }}
+    />
   );
 }
 
-type Screen =
-  | { kind: "list" }
-  | { kind: "preview" }
-  | {
-      kind: "item";
-      sourceId: string;
-      sourceLabel: string;
-      item: StateSnapshotPreviewItem;
-    };
-
-export function TimeMachineBody() {
-  const {
-    snapshots,
-    hasLoaded,
-    busy,
-    lastOutcome,
-    preview,
-    remoteProviders,
-    remoteRoute,
-  } = useTimeMachineState();
-  const localProviders = useSnapshotProviders();
+function RestorePointList({
+  sources,
+  onOpenPreview,
+}: {
+  sources: SourceStatus[];
+  onOpenPreview: (meta: SnapshotMeta) => void;
+}) {
+  const { snapshots, hasLoaded, busy, lastOutcome, recentlyDeleted } =
+    useTimeMachineState();
   const isPro = useIsPro();
+  const snapshotLimit = useLimit("timeMachine.snapshots");
   const host = useToolHost();
-  const [name, setName] = useState("");
-  const [screen, setScreen] = useState<Screen>({ kind: "list" });
-  const [picker, setPicker] = useState<"left" | "right" | null>(null);
+  const insets = useSafeAreaInsets({ minBottom: 16 });
 
-  // 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))
+  // 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() }));
-
-  // 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: SnapshotMeta,
-    mode: "live" | "reload",
-    excludeKeys?: string[]
-  ) => {
+  // Infinity for Pro, so this is simply false for them.
+  const atCaptureLimit = snapshots.length >= snapshotLimit;
+  const captureDisabled = busy !== null || atCaptureLimit;
+
+  /**
+   * 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: SnapshotMeta) => {
     if (busy) return;
     if (meta.baseline) {
       confirmDestructive(
@@ -301,570 +115,122 @@ export function TimeMachineBody() {
       );
       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: SnapshotMeta) => {
-    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: 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.
-            restoreWithRoutePrompt(rightMeta, (restoreRoute) => {
-              void timeMachineStore
-                .restore(rightMeta.id, mode, excludeKeys, { restoreRoute })
-                .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 = sourceTiles.filter(
-    (p) => p.detail && (!p.canCapture || !p.canRestore)
-  );
-
   return (
-    <ScrollView style={styles.screenFill} contentContainerStyle={styles.container}>
-      {lastOutcome && <OutcomePanel outcome={lastOutcome} />}
+    <ScrollView
+      style={styles.fill}
+      contentContainerStyle={[styles.content, { paddingBottom: insets.bottom }]}
+    >
+      {/* Only when the restore did something the app itself won't show you. */}
+      {lastOutcome && restoreNeedsAttention(lastOutcome) ? (
+        <RestoreOutcomeCard outcome={lastOutcome} />
+      ) : null}
+
+      {recentlyDeleted ? (
+        <UndoDeleteBar
+          name={recentlyDeleted.stored.meta.name}
+          at={recentlyDeleted.at}
+          onUndo={() => void timeMachineStore.undoDelete()}
+          onExpire={() => timeMachineStore.clearRecentlyDeleted()}
+        />
+      ) : null}
 
-      {/* 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}
+      <View>
+        <CaptureBar
           disabled={captureDisabled}
-          testID="time-machine-capture"
-        >
-          <Text style={styles.captureButtonText}>
-            {busy === "capture" ? "…" : "CAPTURE"}
-          </Text>
-        </TouchableOpacity>
-      </View>
-      {atFreeLimit && (
-        <Text style={styles.freeLimitNote}>
-          Free plan: {FREE_SNAPSHOT_LIMIT} restore points. Upgrade to Pro for
-          unlimited snapshots.
-        </Text>
-      )}
-
-      {/* Sources — detection at a glance */}
-      <View style={styles.sectionRow}>
-        <Text style={styles.sectionTitle}>Sources</Text>
-        <View style={styles.sourceTiles}>
-          {sourceTiles.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}
-                testID={`time-machine-source-${p.id}`}
-                accessibilityLabel={`${p.label}: ${
-                  p.canCapture
-                    ? p.canRestore
-                      ? "capture and restore"
-                      : "capture only"
-                    : "unavailable"
-                }`}
-              >
-                <IconComp size={16} />
-                <View
-                  style={[styles.sourceTileDot, { backgroundColor: dotColor }]}
-                />
-              </View>
-            );
-          })}
-          {providers.length === 0 && !routeAvailable && (
-            <Text style={styles.emptyText}>none registered</Text>
-          )}
-        </View>
+          busy={busy === "capture"}
+          onCapture={(name) => void timeMachineStore.capture(name)}
+        />
       </View>
-      {unavailable.map((p) => (
-        <Text key={p.id} style={styles.providerDetail}>
-          {p.label}: {p.detail}
-        </Text>
-      ))}
-      {/* Route is opt-in per restore, so say so where the tiles are read. */}
-      {routeAvailable && (
-        <Text style={styles.providerDetail} numberOfLines={1}>
-          {routeSource.label}: {routeSource.detail}
-        </Text>
-      )}
-
-      {/* Restore points */}
-      <Text style={[styles.sectionTitle, styles.sectionSpacing]}>
-        Restore points
-      </Text>
-      {hasLoaded && snapshots.length === 0 && (
-        <Text style={styles.emptyText}>
-          No restore points yet. Set up the state you want to return to, then
-          capture it.
-        </Text>
-      )}
-      {visibleSnapshots.map((meta) => {
-        const warnings = warningCount(meta);
-        return (
-          <TouchableOpacity
+      {atCaptureLimit ? (
+        <Footnote tone="warning">
+          Free plan keeps {snapshotLimit} restore points. Upgrade to Pro
+          for unlimited snapshots.
+        </Footnote>
+      ) : null}
+
+      <SectionLabel>Sources</SectionLabel>
+      <SourcesStrip sources={sources} />
+      {/* A source that can't fully participate says why, right where its
+          tile is — the strip only has room for the dot. */}
+      {sources
+        .filter((s) => s.detail && !(s.canCapture && s.canRestore))
+        .map((s) => (
+          <Footnote key={s.id}>
+            {s.label}: {s.detail}
+          </Footnote>
+        ))}
+      <SectionLabel>Restore Points</SectionLabel>
+      <Group>
+        {visible.map((meta) => (
+          <SnapshotRow
             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.name}
-              </Text>
-              <Text style={styles.snapshotMeta} numberOfLines={1}>
-                {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}` : ""}
-              </Text>
-              {!meta.baseline && meta.route && (
-                <Text style={styles.snapshotRoute} numberOfLines={1}>
-                  ⌖ {meta.route.href}
-                </Text>
-              )}
-            </View>
-            {!meta.baseline ? (
-              <TouchableOpacity
-                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.rowActionLabelDanger}>WIPE</Text>
-              </TouchableOpacity>
-            )}
-            <TouchableOpacity
-              style={styles.rowAction}
-              onPress={() => remove(meta)}
-              hitSlop={{ top: 8, bottom: 8, left: 4, right: 8 }}
-              accessibilityLabel="Delete"
-            >
-              <Trash2 size={14} color={buoyColors.error} />
-            </TouchableOpacity>
-          </TouchableOpacity>
-        );
-      })}
-
-      {/* 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}>
+            meta={meta}
+            busy={busy !== null}
+            onOpen={() => onOpenPreview(meta)}
+            onRestore={() => restore(meta)}
+            onDelete={() => void timeMachineStore.delete(meta.id)}
+            onDuplicate={() => void timeMachineStore.duplicate(meta.id)}
+          />
+        ))}
+        {visible.length === 0 ? (
+          <Text style={styles.empty}>
+            {!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."}
+          </Text>
+        ) : null}
+      </Group>
+      {visible.length > 0 ? (
+        <Footnote>Swipe a restore point to rename, copy or delete it.</Footnote>
+      ) : null}
+
+      <View style={styles.spacer} />
+
+      <Group>
+        <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()
+            )
+          }
+        />
+      </Group>
+      <Footnote centered>
         Deletes all app storage and reloads — like a fresh install.
-      </Text>
+      </Footnote>
     </ScrollView>
   );
 }
 
 const styles = StyleSheet.create({
-  screenFill: {
-    flex: 1,
-  },
-  container: {
-    padding: 12,
-    gap: 8,
-  },
-  captureCard: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-  },
-  captureField: {
-    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: {
+  fill: {
     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,
   },
 });