@buoy-gg/time-machine 7.0.17 → 7.0.19

package/src/components/preview/RestorePreviewScreen.tsx

@@ -0,0 +1,1089 @@
+/**
+ * Restore Preview — "what will restoring this snapshot actually change?"
+ *
+ * ONE virtualized FlatList is the scrollable area (compare card, filters,
+ * source cards and item rows are all list rows) with a sticky Restore CTA
+ * footer — no nested scroll regions, thousands of storage keys stay cheap.
+ *
+ * Layout follows the Time Machine mockup: source sections are card
+ * dropdowns with tool-icon tiles, a "N keys · M changed" detection subtitle,
+ * ±≈ badges, a search field with an expand/collapse-all button, and a bottom
+ * "Restore State" pill. Only rows a restore would touch (or can't touch)
+ * render — unchanged items never do. Every applicable item keeps its
+ * INCLUDE checkbox (source headers toggle their whole section) — unchecked
+ * items are passed to restore as exclusions and left untouched.
+ */
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  ActivityIndicator,
+  FlatList,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+  type ListRenderItem,
+} from "react-native";
+import {
+  ChevronDown,
+  ChevronUp,
+  Filter,
+  RefreshCw,
+  Search,
+  buoyColors,
+  macOSColors,
+} from "@buoy-gg/shared-ui";
+import {
+  JotaiIcon,
+  QueryIcon,
+  ReduxIcon,
+  StorageIcon,
+  TimeMachineIcon,
+  ZustandIcon,
+} from "@buoy-gg/floating-tools-core";
+import type { StateSnapshotPreviewItem } from "@buoy-gg/shared-ui";
+import { useToolHeader, useToolHost } from "@buoy-gg/core";
+import type {
+  PreviewSideRef,
+  PreviewSource,
+  PreviewState,
+} from "../../store/timeMachineStore";
+import { timeMachineStore } from "../../store/timeMachineStore";
+import type { SnapshotMeta } from "../../store/snapshotVault";
+import { VERDICT_META } from "./verdictMeta";
+
+const SOURCE_ICONS: Record<
+  string,
+  React.ComponentType<{ size?: number; color?: string }>
+> = {
+  storage: StorageIcon,
+  redux: ReduxIcon,
+  zustand: ZustandIcon,
+  jotai: JotaiIcon,
+  query: QueryIcon,
+};
+
+const SOURCE_NOUNS: Record<string, string> = {
+  storage: "keys",
+  redux: "slices",
+  zustand: "stores",
+  jotai: "atoms",
+  query: "queries",
+};
+
+interface RowSourceHeader {
+  kind: "source";
+  source: PreviewSource;
+  collapsed: boolean;
+  includeState: "all" | "some" | "none";
+  applicableCount: number;
+  counts: { added: number; removed: number; changed: number };
+  /** False when the card has nothing to expand (a clean "No changes" source). */
+  expandable: boolean;
+  /** "60 keys · 7 changed" — detection proof without expanding. */
+  summary: string;
+}
+interface RowItem {
+  kind: "item";
+  sourceId: string;
+  item: StateSnapshotPreviewItem;
+  excluded: boolean;
+}
+interface RowNote {
+  kind: "note";
+  id: string;
+  text: string;
+}
+type Row = RowSourceHeader | RowItem | RowNote;
+
+/** Compound exclusion key — what timeMachineStore.restore expects. */
+function cKey(sourceId: string, itemKey: string): string {
+  return `${sourceId}::${itemKey}`;
+}
+
+function shortPreview(value: unknown): string {
+  if (value === undefined) return "∅";
+  try {
+    const s = typeof value === "string" ? `"${value}"` : JSON.stringify(value);
+    if (!s) return String(value);
+    return s.length > 46 ? `${s.slice(0, 43)}…` : s;
+  } catch {
+    return "[complex]";
+  }
+}
+
+function sideName(ref: PreviewSideRef, snapshots: SnapshotMeta[]): string {
+  if (ref === "current") return "Current state";
+  return (
+    snapshots.find((s) => s.id === ref.snapshotId)?.name ?? ref.snapshotId
+  );
+}
+
+function timeAgo(ts: number): string {
+  const s = Math.max(0, Math.round((Date.now() - ts) / 1000));
+  if (s < 60) return `${s}s`;
+  const m = Math.round(s / 60);
+  if (m < 60) return `${m}m`;
+  const h = Math.round(m / 60);
+  return h < 24 ? `${h}h` : `${Math.round(h / 24)}d`;
+}
+
+function Checkbox({ state }: { state: "all" | "some" | "none" }) {
+  return (
+    <View
+      style={[styles.checkbox, state !== "none" && styles.checkboxChecked]}
+    >
+      {state === "all" && <Text style={styles.checkboxGlyph}>✓</Text>}
+      {state === "some" && <Text style={styles.checkboxGlyph}>−</Text>}
+    </View>
+  );
+}
+
+const ItemRow = memo(function ItemRow({
+  row,
+  onOpen,
+  onToggle,
+}: {
+  row: RowItem;
+  /** Zero-arg by design — press plumbing may invoke handlers with a
+   * synthetic event; the row is bound at the call site. */
+  onOpen: () => void;
+  onToggle: () => void;
+}) {
+  const meta = VERDICT_META[row.item.verdict];
+  const dimmed = !meta.applies || row.excluded;
+  const openable =
+    row.item.verdict === "changed" ||
+    row.item.verdict === "added" ||
+    row.item.verdict === "removed";
+  return (
+    <View style={[styles.itemRow, dimmed && styles.dimmed]}>
+      {meta.applies && (
+        <TouchableOpacity
+          onPress={onToggle}
+          hitSlop={{ top: 10, bottom: 10, left: 8, right: 8 }}
+          testID={`tm-preview-toggle-${row.sourceId}-${row.item.key}`}
+        >
+          <Checkbox state={row.excluded ? "none" : "all"} />
+        </TouchableOpacity>
+      )}
+      <TouchableOpacity
+        style={styles.itemBodyTouch}
+        onPress={() => openable && onOpen()}
+        disabled={!openable}
+        testID={`tm-preview-item-${row.sourceId}-${row.item.key}`}
+      >
+        <Text style={[styles.itemGlyph, { color: meta.color }]}>
+          {meta.glyph}
+        </Text>
+        <View style={styles.itemBody}>
+          <Text style={styles.itemLabel} numberOfLines={1}>
+            {row.item.label}
+          </Text>
+          {row.item.verdict === "changed" && (
+            <Text style={styles.itemPreview} numberOfLines={1}>
+              {shortPreview(row.item.oldValue)} →{" "}
+              {shortPreview(row.item.newValue)}
+            </Text>
+          )}
+          {row.item.verdict === "added" && (
+            <Text style={styles.itemPreview} numberOfLines={1}>
+              {shortPreview(row.item.newValue)}
+            </Text>
+          )}
+          {row.item.verdict === "removed" && (
+            <Text
+              style={[styles.itemPreview, styles.itemPreviewRemoved]}
+              numberOfLines={1}
+            >
+              {shortPreview(row.item.oldValue)}
+            </Text>
+          )}
+          {row.excluded ? (
+            <Text style={styles.itemExcluded}>
+              excluded — restore leaves this untouched
+            </Text>
+          ) : (
+            row.item.reason && (
+              <Text style={styles.itemReason} numberOfLines={2}>
+                {row.item.reason}
+              </Text>
+            )
+          )}
+        </View>
+        {openable && <Text style={styles.itemChevron}>›</Text>}
+      </TouchableOpacity>
+    </View>
+  );
+});
+
+export interface RestorePreviewScreenProps {
+  preview: PreviewState;
+  snapshots: SnapshotMeta[];
+  busy: boolean;
+  onBack: () => void;
+  onOpenItem: (sourceId: string, item: StateSnapshotPreviewItem) => void;
+  onRestore: (mode: "live" | "reload", excludeKeys: string[]) => void;
+  onPickSide: (position: "left" | "right") => void;
+  onRefresh: () => void;
+}
+
+export function RestorePreviewScreen({
+  preview,
+  snapshots,
+  busy,
+  onBack,
+  onOpenItem,
+  onRestore,
+  onPickSide,
+  onRefresh,
+}: RestorePreviewScreenProps) {
+  const host = useToolHost();
+  const hosted = host.instanceId !== undefined;
+  const [localSearch, setLocalSearch] = useState("");
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+  const [allCollapsed, setAllCollapsed] = useState(false);
+  const [excluded, setExcluded] = useState<ReadonlySet<string>>(new Set());
+  const search = localSearch;
+
+  const rightMeta =
+    preview.right === "current"
+      ? undefined
+      : snapshots.find(
+          (s) => s.id === (preview.right as { snapshotId: string }).snapshotId
+        );
+  const isBaseline = rightMeta?.baseline === true;
+  const liveLeft = preview.left === "current";
+
+  // Master selection: "None → tick just what you want" is the fast path for
+  // targeted restores ("only my cart"), the inverse of the default all-in.
+  const selectAll = useCallback(() => setExcluded(new Set()), []);
+  const selectNone = useCallback(() => {
+    const next = new Set<string>();
+    for (const src of preview.sources) {
+      for (const item of src.items) {
+        if (VERDICT_META[item.verdict].applies) next.add(cKey(src.id, item.key));
+      }
+    }
+    setExcluded(next);
+  }, [preview.sources]);
+
+  // A saved scope pre-selects the checkboxes: everything applicable that is
+  // OUTSIDE the scope starts excluded, so the preview shows exactly what a
+  // scoped restore will do (and stays adjustable).
+  const seededScopeFor = useRef<string | null>(null);
+  useEffect(() => {
+    if (!rightMeta?.scope?.length || preview.building) return;
+    if (seededScopeFor.current === rightMeta.id) return;
+    seededScopeFor.current = rightMeta.id;
+    const scopeSet = new Set(rightMeta.scope);
+    const next = new Set<string>();
+    for (const src of preview.sources) {
+      for (const item of src.items) {
+        const key = cKey(src.id, item.key);
+        if (VERDICT_META[item.verdict].applies && !scopeSet.has(key)) {
+          next.add(key);
+        }
+      }
+    }
+    setExcluded(next);
+  }, [rightMeta, preview.building, preview.sources]);
+
+  // Persist the current selection as this restore point's scope — from then
+  // on, RESTORE (home row, MCP, this screen) touches only these items.
+  // Selecting everything clears the scope back to a full restore.
+  const saveScope = useCallback(() => {
+    if (!rightMeta) return;
+    const selected: string[] = [];
+    for (const src of preview.sources) {
+      for (const item of src.items) {
+        const key = cKey(src.id, item.key);
+        if (VERDICT_META[item.verdict].applies && !excluded.has(key)) {
+          selected.push(key);
+        }
+      }
+    }
+    const clearing = excluded.size === 0;
+    void timeMachineStore.setScope(rightMeta.id, clearing ? null : selected);
+    host.showToast(
+      clearing
+        ? "Scope cleared — full restore"
+        : `Scope saved — this restore point now restores only ${selected.length} item${selected.length === 1 ? "" : "s"}`,
+      "success"
+    );
+  }, [rightMeta, preview.sources, excluded, host]);
+
+  const toggleItem = useCallback((key: string) => {
+    setExcluded((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+
+  const toggleSource = useCallback(
+    (source: PreviewSource, includeState: "all" | "some" | "none") => {
+      setExcluded((prev) => {
+        const next = new Set(prev);
+        for (const item of source.items) {
+          if (!VERDICT_META[item.verdict].applies) continue;
+          const key = cKey(source.id, item.key);
+          if (includeState === "all") next.add(key);
+          else next.delete(key);
+        }
+        return next;
+      });
+    },
+    []
+  );
+
+  // Takes the EFFECTIVE collapsed state — the map is sparse (defaults come
+  // from the ?? fallback), so `!map[id]` would no-op the first tap on a
+  // default-collapsed card.
+  const toggleCollapse = useCallback((id: string, currentlyCollapsed: boolean) => {
+    setCollapsed((c) => ({ ...c, [id]: !currentlyCollapsed }));
+  }, []);
+
+  const toggleAllCollapsed = useCallback(() => {
+    setAllCollapsed((prev) => {
+      const next = !prev;
+      setCollapsed(
+        Object.fromEntries(preview.sources.map((s) => [s.id, next]))
+      );
+      return next;
+    });
+  }, [preview.sources]);
+
+  const totals = useMemo(() => {
+    let applies = 0;
+    let excludedCount = 0;
+    let wontApply = 0;
+    const perSource: string[] = [];
+    for (const src of preview.sources) {
+      let n = 0;
+      for (const item of src.items) {
+        const m = VERDICT_META[item.verdict];
+        if (m.applies) {
+          if (excluded.has(cKey(src.id, item.key))) excludedCount += 1;
+          else {
+            applies += 1;
+            n += 1;
+          }
+        } else if (item.verdict === "wont-apply") wontApply += 1;
+      }
+      if (n > 0) perSource.push(`${n} ${src.label.toLowerCase()}`);
+    }
+    return { applies, excludedCount, wontApply, perSource };
+  }, [preview.sources, excluded]);
+
+  // Hosted: back + identity in the shared modal header. Restore lives in the
+  // bottom CTA; the preset's labeled RELOAD APP action stays available.
+  useToolHeader(
+    hosted
+      ? {
+          title: "Restore Preview",
+          subtitle: rightMeta?.name ?? "compare",
+          onBack,
+          searchable: false, // the in-body "Filter keys…" field covers it
+        }
+      : null,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [hosted, rightMeta?.name]
+  );
+
+  const rows = useMemo<Row[]>(() => {
+    const q = search.trim().toLowerCase();
+    const out: Row[] = [];
+    for (const src of preview.sources) {
+      // Every detected source gets a card whose subtitle carries the
+      // detection proof ("60 keys · 7 changed" / "2 slices · no changes"),
+      // so clean sources need no expansion. Unchanged ITEMS never render.
+      const relevant = src.items.some((i) => i.verdict !== "unchanged");
+      const expandable = relevant || src.notes.length > 0 || !!src.error;
+
+      const applicable = src.items.filter(
+        (i) => VERDICT_META[i.verdict].applies
+      );
+      const wontApplyCount = src.items.filter(
+        (i) => i.verdict === "wont-apply"
+      ).length;
+      const noun =
+        src.items.length === 1
+          ? (SOURCE_NOUNS[src.id] ?? "items").replace(/ies$/, "y").replace(/s$/, "")
+          : SOURCE_NOUNS[src.id] ?? "items";
+      const summary =
+        `${src.items.length} ${noun} · ` +
+        (applicable.length > 0
+          ? `${applicable.length} changed`
+          : wontApplyCount > 0
+            ? `${wontApplyCount} won't apply`
+            : "no changes");
+      const excludedInSource = applicable.filter((i) =>
+        excluded.has(cKey(src.id, i.key))
+      ).length;
+      const includeState: RowSourceHeader["includeState"] =
+        applicable.length === 0 || excludedInSource === 0
+          ? "all"
+          : excludedInSource === applicable.length
+            ? "none"
+            : "some";
+      const counts = { added: 0, removed: 0, changed: 0 };
+      for (const i of src.items) {
+        if (excluded.has(cKey(src.id, i.key))) continue;
+        if (i.verdict === "added") counts.added += 1;
+        else if (i.verdict === "removed") counts.removed += 1;
+        else if (i.verdict === "changed" || i.verdict === "too-large")
+          counts.changed += 1;
+      }
+
+      const visible = src.items.filter((item) => {
+        // Unchanged items never render — the dropdowns show only what a
+        // restore would touch (changed) or can't touch (won't-apply).
+        if (item.verdict === "unchanged") return false;
+        if (q && !item.label.toLowerCase().includes(q)) return false;
+        return true;
+      });
+      const isCollapsed = !expandable
+        ? true
+        : (collapsed[src.id] ?? (applicable.length === 0 && !src.error));
+      out.push({
+        kind: "source",
+        source: src,
+        collapsed: isCollapsed,
+        includeState,
+        applicableCount: applicable.length,
+        counts,
+        expandable,
+        summary,
+      });
+      if (!isCollapsed) {
+        for (const note of src.notes) {
+          out.push({ kind: "note", id: `${src.id}:${note}`, text: note });
+        }
+        if (src.error) {
+          out.push({ kind: "note", id: `${src.id}:err`, text: `⚠ ${src.error}` });
+        }
+        for (const item of visible) {
+          out.push({
+            kind: "item",
+            sourceId: src.id,
+            item,
+            excluded: excluded.has(cKey(src.id, item.key)),
+          });
+        }
+      }
+    }
+    return out;
+  }, [preview.sources, search, collapsed, excluded]);
+
+  const renderRow: ListRenderItem<Row> = useCallback(
+    ({ item: row }) => {
+      if (row.kind === "source") {
+        const src = row.source;
+        const { counts } = row;
+        const clean =
+          counts.added + counts.removed + counts.changed === 0 && !src.error;
+        const IconComp = SOURCE_ICONS[src.id] ?? TimeMachineIcon;
+        return (
+          <View style={styles.sourceCard}>
+            {row.applicableCount > 0 && (
+              <TouchableOpacity
+                onPress={() => toggleSource(src, row.includeState)}
+                hitSlop={{ top: 10, bottom: 10, left: 8, right: 8 }}
+                testID={`tm-preview-source-toggle-${src.id}`}
+              >
+                <Checkbox state={row.includeState} />
+              </TouchableOpacity>
+            )}
+            <TouchableOpacity
+              style={styles.sourceCardTouch}
+              onPress={() => row.expandable && toggleCollapse(src.id, row.collapsed)}
+              disabled={!row.expandable}
+              testID={`tm-preview-source-${src.id}`}
+            >
+              <View style={styles.sourceIconTile}>
+                <IconComp size={18} />
+              </View>
+              <View style={styles.sourceNameBlock}>
+                <Text style={styles.sourceName} numberOfLines={1}>
+                  {src.label}
+                </Text>
+                <Text style={styles.sourceSummary} numberOfLines={1}>
+                  {row.includeState === "none" && row.applicableCount > 0
+                    ? `${row.summary} · excluded`
+                    : row.summary}
+                </Text>
+              </View>
+              {!clean && (
+                <View style={styles.sourceBadges}>
+                  {counts.removed > 0 && (
+                    <Text style={[styles.sourceBadge, { color: buoyColors.error }]}>
+                      −{counts.removed}
+                    </Text>
+                  )}
+                  {counts.added > 0 && (
+                    <Text style={[styles.sourceBadge, { color: buoyColors.success }]}>
+                      +{counts.added}
+                    </Text>
+                  )}
+                  {counts.changed > 0 && (
+                    <Text style={[styles.sourceBadge, { color: buoyColors.info }]}>
+                      ≈{counts.changed}
+                    </Text>
+                  )}
+                </View>
+              )}
+              {row.expandable ? (
+                row.collapsed ? (
+                  <ChevronDown size={16} color={buoyColors.textMuted} />
+                ) : (
+                  <ChevronUp size={16} color={buoyColors.textMuted} />
+                )
+              ) : null}
+            </TouchableOpacity>
+          </View>
+        );
+      }
+      if (row.kind === "note") {
+        return <Text style={styles.noteRow}>{row.text}</Text>;
+      }
+      return (
+        <ItemRow
+          row={row}
+          onOpen={() => onOpenItem(row.sourceId, row.item)}
+          onToggle={() => toggleItem(cKey(row.sourceId, row.item.key))}
+        />
+      );
+    },
+    [onOpenItem, toggleCollapse, toggleItem, toggleSource]
+  );
+
+  const keyExtractor = useCallback((row: Row) => {
+    if (row.kind === "source") return `s:${row.source.id}`;
+    if (row.kind === "note") return `n:${row.id}`;
+    return `i:${row.sourceId}:${row.item.key}`;
+  }, []);
+
+  const header = (
+    <View>
+      {!hosted && (
+        <View style={styles.fallbackHeader}>
+          <TouchableOpacity onPress={onBack} hitSlop={HIT} testID="tm-preview-back">
+            <Text style={styles.backText}>‹ Back</Text>
+          </TouchableOpacity>
+          <Text style={styles.screenTitle} numberOfLines={1}>
+            Restore Preview
+          </Text>
+        </View>
+      )}
+
+      {/* Compare card */}
+      <View style={styles.compareCard}>
+        <TouchableOpacity
+          style={styles.compareSide}
+          onPress={() => onPickSide("left")}
+          testID="tm-preview-pick-left"
+        >
+          <View style={styles.compareTagRow}>
+            <View style={[styles.stateDot, { backgroundColor: buoyColors.info }]} />
+            <Text style={styles.compareTag}>
+              {liveLeft ? "CURRENT STATE" : "SNAPSHOT"}
+            </Text>
+          </View>
+          <Text style={styles.compareName} numberOfLines={1}>
+            {sideName(preview.left, snapshots)}
+          </Text>
+          {liveLeft ? (
+            <View style={styles.compareMetaRow}>
+              <Text style={styles.compareMeta}>
+                built {timeAgo(preview.builtAt)} ago
+              </Text>
+              <TouchableOpacity
+                onPress={onRefresh}
+                disabled={preview.building}
+                hitSlop={{ top: 8, bottom: 8, left: 6, right: 8 }}
+                accessibilityLabel="Rebuild preview"
+                testID="tm-preview-refresh"
+              >
+                <RefreshCw
+                  size={11}
+                  color={
+                    preview.building
+                      ? macOSColors.text.disabled
+                      : buoyColors.textSecondary
+                  }
+                />
+              </TouchableOpacity>
+            </View>
+          ) : (
+            <Text style={styles.compareMeta}>snapshot</Text>
+          )}
+        </TouchableOpacity>
+
+        <View style={styles.swapBadge}>
+          <Text style={styles.swapGlyph}>⇄</Text>
+        </View>
+
+        <TouchableOpacity
+          style={[styles.compareSide, styles.compareSideRight]}
+          onPress={() => onPickSide("right")}
+          testID="tm-preview-pick-right"
+        >
+          <View style={styles.compareTagRow}>
+            <Text style={styles.compareTag}>
+              {isBaseline ? "BASELINE" : "SNAPSHOT"}
+            </Text>
+            <View
+              style={[styles.stateDot, { backgroundColor: buoyColors.success }]}
+            />
+          </View>
+          <Text style={[styles.compareName, styles.compareNameRight]} numberOfLines={1}>
+            {sideName(preview.right, snapshots)}
+          </Text>
+          <Text style={[styles.compareMeta, styles.compareMetaRight]}>
+            {rightMeta ? `${timeAgo(rightMeta.createdAt)} ago` : ""}
+          </Text>
+        </TouchableOpacity>
+      </View>
+
+      {/* Changes to restore + summary chip */}
+      <View style={styles.changesRow}>
+        <View style={styles.changesTitleRow}>
+          <Text style={styles.changesTitle}>Changes to restore</Text>
+          {totals.applies + totals.excludedCount > 1 && (
+            <View style={styles.selectLinks}>
+              <TouchableOpacity
+                onPress={selectAll}
+                hitSlop={{ top: 8, bottom: 8, left: 4, right: 4 }}
+                testID="tm-preview-select-all"
+              >
+                <Text
+                  style={[
+                    styles.selectLink,
+                    totals.excludedCount === 0 && styles.selectLinkActive,
+                  ]}
+                >
+                  all
+                </Text>
+              </TouchableOpacity>
+              <Text style={styles.selectLinkSep}>·</Text>
+              <TouchableOpacity
+                onPress={selectNone}
+                hitSlop={{ top: 8, bottom: 8, left: 4, right: 4 }}
+                testID="tm-preview-select-none"
+              >
+                <Text
+                  style={[
+                    styles.selectLink,
+                    totals.applies === 0 &&
+                      totals.excludedCount > 0 &&
+                      styles.selectLinkActive,
+                  ]}
+                >
+                  none
+                </Text>
+              </TouchableOpacity>
+              {liveLeft && rightMeta && (
+                <>
+                  <Text style={styles.selectLinkSep}>·</Text>
+                  <TouchableOpacity
+                    onPress={saveScope}
+                    hitSlop={{ top: 8, bottom: 8, left: 4, right: 4 }}
+                    testID="tm-preview-save-scope"
+                  >
+                    <Text
+                      style={[
+                        styles.selectLink,
+                        !!rightMeta.scope?.length && styles.selectLinkActive,
+                      ]}
+                    >
+                      save scope
+                    </Text>
+                  </TouchableOpacity>
+                </>
+              )}
+            </View>
+          )}
+        </View>
+        {preview.building ? (
+          <ActivityIndicator size="small" color={buoyColors.primary} />
+        ) : (
+          <View style={styles.changesChip}>
+            <Text style={styles.changesChipText} numberOfLines={1}>
+              {totals.applies === 0
+                ? totals.excludedCount > 0
+                  ? "everything excluded"
+                  : "no changes"
+                : totals.perSource.join(" · ")}
+              {totals.excludedCount > 0 && totals.applies > 0
+                ? `  ·  ${totals.excludedCount} excluded`
+                : ""}
+            </Text>
+          </View>
+        )}
+      </View>
+      {totals.wontApply > 0 && (
+        <Text style={styles.wontApplyLine}>
+          ⊘ {totals.wontApply} item{totals.wontApply === 1 ? "" : "s"} won't
+          apply — shown inline with the reason
+        </Text>
+      )}
+
+      {/* Search + expand/collapse all */}
+      <View style={styles.searchRow}>
+        <View style={styles.searchField}>
+          <Search size={14} color={buoyColors.textMuted} />
+          <TextInput
+            style={styles.searchInput}
+            value={localSearch}
+            onChangeText={setLocalSearch}
+            placeholder="Filter keys…"
+            placeholderTextColor={buoyColors.textMuted}
+            autoCorrect={false}
+            autoCapitalize="none"
+            testID="tm-preview-search"
+          />
+        </View>
+        <TouchableOpacity
+          style={styles.collapseAllButton}
+          onPress={toggleAllCollapsed}
+          accessibilityLabel={allCollapsed ? "Expand all" : "Collapse all"}
+          testID="tm-preview-collapse-all"
+        >
+          <Filter size={15} color={buoyColors.textSecondary} />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+
+  const ctaDisabled = busy || preview.building || totals.applies === 0;
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={rows}
+        renderItem={renderRow}
+        keyExtractor={keyExtractor}
+        ListHeaderComponent={header}
+        ListEmptyComponent={
+          preview.building ? null : (
+            <Text style={styles.emptyText}>
+              {search
+                ? "Nothing matches this filter."
+                : "No changes — restoring would change nothing."}
+            </Text>
+          )
+        }
+        removeClippedSubviews
+        initialNumToRender={20}
+        windowSize={7}
+        contentContainerStyle={styles.listContent}
+      />
+
+      {/* Sticky Restore CTA */}
+      {liveLeft && rightMeta && (
+        <View style={styles.footer}>
+          <TouchableOpacity
+            style={[
+              styles.cta,
+              isBaseline && styles.ctaDanger,
+              ctaDisabled && styles.ctaDisabled,
+            ]}
+            onPress={() =>
+              onRestore(isBaseline ? "reload" : "live", Array.from(excluded))
+            }
+            disabled={isBaseline ? busy || preview.building : ctaDisabled}
+            testID="tm-preview-restore"
+          >
+            <RefreshCw size={16} color="#0A0A0A" />
+            <Text style={styles.ctaText}>
+              {isBaseline ? "Wipe & Reload" : "Restore State"}
+            </Text>
+          </TouchableOpacity>
+          <Text style={styles.ctaCaption}>
+            {isBaseline
+              ? "This wipes all app storage and reloads the app."
+              : totals.excludedCount > 0
+                ? `Restores ${totals.applies} of ${totals.applies + totals.excludedCount} change${totals.applies + totals.excludedCount === 1 ? "" : "s"} — everything else stays as it is.`
+                : "This will replace the current state with the snapshot."}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const HIT = { top: 10, bottom: 10, left: 10, right: 10 };
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  fallbackHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+    gap: 10,
+  },
+  backText: { color: buoyColors.primary, fontSize: 14 },
+  screenTitle: {
+    color: buoyColors.text,
+    fontSize: 13,
+    fontWeight: "700",
+    flex: 1,
+  },
+  toolbarButton: { padding: 4, justifyContent: "center", alignItems: "center" },
+  dimmed: { opacity: 0.55 },
+  listContent: { paddingHorizontal: 12, paddingTop: 8, paddingBottom: 12 },
+
+  // Compare card
+  compareCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: buoyColors.card,
+    borderColor: buoyColors.border,
+    borderWidth: 1,
+    borderRadius: 14,
+    padding: 14,
+    gap: 10,
+  },
+  compareSide: { flex: 1, minWidth: 0, gap: 3 },
+  compareSideRight: { alignItems: "flex-end" },
+  compareTagRow: { flexDirection: "row", alignItems: "center", gap: 5 },
+  stateDot: { width: 6, height: 6, borderRadius: 3 },
+  compareTag: {
+    color: buoyColors.textSecondary,
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.6,
+  },
+  compareName: { color: buoyColors.text, fontSize: 15, fontWeight: "700" },
+  compareNameRight: { textAlign: "right" },
+  compareMeta: { color: buoyColors.textMuted, fontSize: 10 },
+  compareMetaRight: { textAlign: "right" },
+  compareMetaRow: { flexDirection: "row", alignItems: "center", gap: 6 },
+  swapBadge: {
+    width: 34,
+    height: 34,
+    borderRadius: 17,
+    backgroundColor: buoyColors.hover,
+    borderColor: buoyColors.border,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  swapGlyph: { color: buoyColors.textSecondary, fontSize: 14 },
+
+  // Changes row
+  changesRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginTop: 14,
+    gap: 10,
+  },
+  changesTitle: { color: buoyColors.text, fontSize: 14, fontWeight: "700" },
+  changesTitleRow: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: 8,
+  },
+  selectLinks: { flexDirection: "row", alignItems: "baseline", gap: 4 },
+  selectLink: { color: buoyColors.textMuted, fontSize: 12 },
+  selectLinkActive: { color: buoyColors.primary, fontWeight: "600" },
+  selectLinkSep: { color: buoyColors.textMuted, fontSize: 12 },
+  changesChip: {
+    backgroundColor: buoyColors.card,
+    borderColor: buoyColors.border,
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    maxWidth: "60%",
+  },
+  changesChipText: { color: buoyColors.textSecondary, fontSize: 11 },
+  wontApplyLine: { color: buoyColors.warning, fontSize: 11, marginTop: 6 },
+
+  // Search row
+  searchRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginTop: 10,
+    marginBottom: 6,
+  },
+  searchField: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    backgroundColor: buoyColors.card,
+    borderColor: buoyColors.border,
+    borderWidth: 1,
+    borderRadius: 10,
+    paddingHorizontal: 10,
+  },
+  searchInput: {
+    flex: 1,
+    color: buoyColors.text,
+    fontSize: 12,
+    paddingVertical: 8,
+  },
+  collapseAllButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    backgroundColor: buoyColors.card,
+    borderColor: buoyColors.border,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+
+  // Checkbox
+  checkbox: {
+    width: 18,
+    height: 18,
+    borderRadius: 4,
+    borderWidth: 1.5,
+    borderColor: buoyColors.textMuted,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  checkboxChecked: {
+    borderColor: buoyColors.primary,
+    backgroundColor: `${buoyColors.primary}26`,
+  },
+  checkboxGlyph: {
+    color: buoyColors.primary,
+    fontSize: 11,
+    fontWeight: "700",
+    lineHeight: 13,
+  },
+
+  // Source cards
+  sourceCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: buoyColors.card,
+    borderColor: buoyColors.border,
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    marginTop: 8,
+    gap: 10,
+  },
+  sourceCardTouch: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    minWidth: 0,
+  },
+  sourceIconTile: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    backgroundColor: buoyColors.hover,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  sourceNameBlock: { flex: 1, minWidth: 0, gap: 2 },
+  sourceName: {
+    color: buoyColors.text,
+    fontSize: 15,
+    fontWeight: "700",
+  },
+  sourceSummary: {
+    color: buoyColors.textMuted,
+    fontSize: 11,
+    fontVariant: ["tabular-nums"],
+  },
+  sourceBadges: { flexDirection: "row", gap: 8 },
+  sourceBadge: {
+    fontSize: 13,
+    fontWeight: "700",
+    fontVariant: ["tabular-nums"],
+  },
+
+  noteRow: {
+    color: buoyColors.textMuted,
+    fontSize: 10,
+    paddingLeft: 24,
+    paddingTop: 6,
+  },
+
+  // Item rows (nested under a source card)
+  itemRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: buoyColors.hover,
+    borderColor: buoyColors.border,
+    borderWidth: 1,
+    borderRadius: 10,
+    paddingHorizontal: 10,
+    paddingVertical: 9,
+    marginTop: 6,
+    marginLeft: 14,
+    gap: 10,
+  },
+  itemBodyTouch: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    minWidth: 0,
+  },
+  itemGlyph: { fontSize: 13, fontWeight: "700", width: 14, textAlign: "center" },
+  itemBody: { flex: 1, minWidth: 0 },
+  itemLabel: { color: buoyColors.text, fontSize: 12 },
+  itemPreview: {
+    color: buoyColors.textMuted,
+    fontSize: 10,
+    marginTop: 2,
+    fontVariant: ["tabular-nums"],
+  },
+  itemPreviewRemoved: { textDecorationLine: "line-through" },
+  itemReason: { color: buoyColors.warning, fontSize: 10, marginTop: 2 },
+  itemExcluded: {
+    color: buoyColors.textMuted,
+    fontSize: 10,
+    marginTop: 2,
+    fontStyle: "italic",
+  },
+  itemChevron: { color: buoyColors.textMuted, fontSize: 16 },
+  emptyText: {
+    color: buoyColors.textMuted,
+    fontSize: 12,
+    textAlign: "center",
+    marginTop: 24,
+  },
+
+  // Footer CTA
+  footer: {
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 12,
+    gap: 6,
+    borderTopColor: buoyColors.border,
+    borderTopWidth: 1,
+    backgroundColor: buoyColors.base,
+  },
+  cta: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    backgroundColor: buoyColors.primary,
+    borderRadius: 24,
+    paddingVertical: 13,
+  },
+  ctaDanger: { backgroundColor: buoyColors.error },
+  ctaDisabled: { opacity: 0.4 },
+  ctaText: { color: "#0A0A0A", fontSize: 14, fontWeight: "700" },
+  ctaCaption: {
+    color: buoyColors.textMuted,
+    fontSize: 10,
+    textAlign: "center",
+  },
+});