@buoy-gg/time-machine 7.0.28 → 7.0.30

package/src/components/preview/RestorePreviewScreen.tsx

@@ -1,1090 +0,0 @@
-/**
- * Restore Preview — "what will restoring this snapshot actually change?"
- *
- * ONE virtualized FlatList is the scrollable area (the section header, the
- * source rows, their item rows and the inline diffs are all list rows) with
- * a sticky Restore CTA footer — no nested scroll regions, so 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,
-  type ReactNode,
-} from "react";
-import {
-  ActivityIndicator,
-  FlatList,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-  type ListRenderItem,
-} from "react-native";
-import {
-  ChevronUp,
-  AlertTriangle,
-  RefreshCw,
-  useSafeAreaInsets,
-} from "@buoy-gg/shared-ui";
-import type { StateSnapshotPreviewItem } from "@buoy-gg/shared-ui";
-import { useToolHeader, useToolHost } from "@buoy-gg/core";
-import { DisclosureChevron, Group, SectionLabel } from "../../ui/primitives";
-import { TM_MONO, tm } from "../../ui/tmTheme";
-import type {
-  PreviewSideRef,
-  PreviewSource,
-  PreviewState,
-} from "../../store/timeMachineStore";
-import { timeMachineStore, willRestoreRoute } from "../../store/timeMachineStore";
-import { ItemDiffPanel } from "./ItemDiffPanel";
-import { RestorePointNameRow } from "./RestorePointNameRow";
-import type { SnapshotMeta } from "../../store/snapshotVault";
-import { VERDICT_META } from "./verdictMeta";
-
-const SOURCE_NOUNS: Record<string, string> = {
-  storage: "keys",
-  redux: "slices",
-  zustand: "stores",
-  jotai: "atoms",
-  query: "queries",
-};
-
-/**
- * Where a row sits in the one card that holds the whole list. The list has
- * to stay flat to stay virtualized, so each row paints its own share of the
- * card: the first row rounds its top, the last rounds its bottom, and every
- * other row draws the hairline above it.
- */
-interface CardPosition {
-  first: boolean;
-  last: boolean;
-}
-
-interface RowSourceHeader extends CardPosition {
-  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 extends CardPosition {
-  kind: "item";
-  sourceId: string;
-  item: StateSnapshotPreviewItem;
-  excluded: boolean;
-}
-/**
- * The route leg, as a row in the same card as the sources. It is not a
- * source — nothing diffs it — but "will this also take me back to
- * /checkout?" is a decision about THIS restore, so it belongs beside the
- * other things the restore is about to do rather than on the list screen.
- */
-interface RowRoute extends CardPosition {
-  kind: "route";
-  href: string;
-  on: boolean;
-}
-interface RowDiff extends CardPosition {
-  kind: "diff";
-  sourceId: string;
-  item: StateSnapshotPreviewItem;
-}
-interface RowNote extends CardPosition {
-  kind: "note";
-  id: string;
-  text: string;
-}
-type Row = RowSourceHeader | RowItem | RowNote | RowDiff | RowRoute;
-
-/** Shared empty selection — a stable identity for "nothing is excluded". */
-const EMPTY_SELECTION: ReadonlySet<string> = new Set<string>();
-
-function sameSelection(a: ReadonlySet<string>, b: ReadonlySet<string>): boolean {
-  if (a.size !== b.size) return false;
-  for (const key of a) if (!b.has(key)) return false;
-  return true;
-}
-
-/** 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]";
-  }
-}
-
-
-
-/**
- * The grouped-card shell one row paints. Rounds the ends, insets the card
- * from the sheet, and draws the hairline that separates it from the row
- * above — the same shape the home list's <Group> makes, rebuilt per row so
- * the list stays virtualized.
- */
-function CardRow({
-  position,
-  children,
-}: {
-  position: CardPosition;
-  children: ReactNode;
-}) {
-  return (
-    <View
-      style={[
-        styles.cardRow,
-        position.first ? styles.cardRowFirst : null,
-        position.last ? styles.cardRowLast : null,
-      ]}
-    >
-      {position.first ? null : <View style={styles.cardSeparator} />}
-      {children}
-    </View>
-  );
-}
-
-function CountPill({
-  glyph,
-  count,
-  color,
-}: {
-  glyph: string;
-  count: number;
-  color: string;
-}) {
-  return (
-    <View style={[styles.countPill, { backgroundColor: `${color}26` }]}>
-      <Text style={[styles.countPillText, { color }]}>
-        {glyph}
-        {count}
-      </Text>
-    </View>
-  );
-}
-
-function Checkbox({ state }: { state: "all" | "some" | "none" }) {
-  return (
-    <View style={[styles.checkbox, state !== "none" && styles.checkboxChecked]}>
-      {state === "none" ? null : (
-        <Text style={styles.checkboxGlyph}>{state === "all" ? "✓" : "−"}</Text>
-      )}
-    </View>
-  );
-}
-
-const ItemRow = memo(function ItemRow({
-  row,
-  expanded,
-  onOpen,
-  onToggle,
-}: {
-  row: RowItem;
-  expanded: boolean;
-  /** 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 (
-    <CardRow position={row}>
-      <View style={[styles.itemRow, dimmed && styles.dimmed]}>
-      <TouchableOpacity
-        onPress={onToggle}
-        disabled={!meta.applies}
-        hitSlop={{ top: 10, bottom: 10, left: 8, right: 8 }}
-        testID={`tm-preview-toggle-${row.sourceId}-${row.item.key}`}
-      >
-        <Checkbox state={!meta.applies || 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 ? (
-          expanded ? (
-            <ChevronUp size={16} color={tm.color.labelTertiary} />
-          ) : (
-            <DisclosureChevron />
-          )
-        ) : null}
-      </TouchableOpacity>
-      </View>
-    </CardRow>
-  );
-});
-
-export interface RestorePreviewScreenProps {
-  preview: PreviewState;
-  snapshots: SnapshotMeta[];
-  busy: boolean;
-  onBack: () => void;
-  onRestore: (mode: "live" | "reload", excludeKeys: string[]) => void;
-}
-
-export function RestorePreviewScreen({
-  preview,
-  snapshots,
-  busy,
-  onBack,
-  onRestore,
-}: RestorePreviewScreenProps) {
-  const host = useToolHost();
-  const hosted = host.instanceId !== undefined;
-  // `minBottom` is a floor, not a preference: the dimension map can't know
-  // about a device that ships next year, and an unmapped one falls through to
-  // `bottom: 0`. This keeps the CTA off the home indicator either way.
-  const insets = useSafeAreaInsets({ minBottom: 16 });
-
-  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
-  const [excluded, setExcluded] = useState<ReadonlySet<string>>(new Set());
-  /** Set by every checkbox interaction — see the auto-save effect below. */
-  const userEditedRef = useRef(false);
-  /** Item rows whose diff is expanded inline, by compound key. */
-  const [openDiffs, setOpenDiffs] = useState<ReadonlySet<string>>(EMPTY_SELECTION);
-  const toggleDiff = useCallback((key: string) => {
-    setOpenDiffs((prev) => {
-      const next = new Set(prev);
-      if (next.has(key)) next.delete(key);
-      else next.add(key);
-      return next;
-    });
-  }, []);
-  // Filtering lives in the shared modal header (the magnifier), same as the
-  // restore-point list and every other Buoy tool — one place to look for it.
-  const search = host.search;
-
-  const rightMeta =
-    preview.right === "current"
-      ? undefined
-      : snapshots.find(
-          (s) => s.id === (preview.right as { snapshotId: string }).snapshotId
-        );
-  // Latest-ref: `renderRow` is memoized on its handlers, so this one has to
-  // keep a stable identity while still reading the current snapshot.
-  const rightMetaRef = useRef(rightMeta);
-  rightMetaRef.current = rightMeta;
-
-  /** Flip whether this restore also navigates back to the captured route. */
-  const toggleRoute = useCallback(() => {
-    if (!rightMetaRef.current) return;
-    const meta = rightMetaRef.current;
-    void timeMachineStore.setRestoreRoute(meta.id, !willRestoreRoute(meta));
-  }, []);
-
-  const isBaseline = rightMeta?.baseline === true;
-  const liveLeft = preview.left === "current";
-
-  /**
-   * The selection this restore point already remembers, as exclusions. Null
-   * until there is a snapshot on the right-hand side to have one.
-   */
-  const savedExcluded = useMemo<ReadonlySet<string> | null>(() => {
-    if (!rightMeta) return null;
-    return rightMeta.excludedKeys?.length
-      ? new Set(rightMeta.excludedKeys)
-      : EMPTY_SELECTION;
-  }, [rightMeta]);
-
-  /**
-   * A snapshot still carrying the older `scope` include-list ("only ever
-   * touch these", set via MCP). It seeds the checkboxes and is converted to
-   * exclusions on read — a restore of it would otherwise still apply include
-   * semantics, and the two forms would disagree about what one tap does.
-   */
-  const legacyScoped =
-    !!rightMeta?.scope?.length && !rightMeta?.excludedKeys?.length;
-  const legacySeed = useMemo<ReadonlySet<string>>(() => {
-    if (!legacyScoped || !rightMeta?.scope) return EMPTY_SELECTION;
-    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);
-        }
-      }
-    }
-    return next;
-  }, [legacyScoped, rightMeta, preview.sources]);
-
-  // Open with the saved selection already applied — once per snapshot, and
-  // only once there is a diff to apply it to.
-  const seededFor = useRef<string | null>(null);
-  useEffect(() => {
-    if (!rightMeta || preview.building || !savedExcluded) return;
-    if (seededFor.current === rightMeta.id) return;
-    seededFor.current = rightMeta.id;
-    userEditedRef.current = false;
-    const seed = savedExcluded.size > 0 ? savedExcluded : legacySeed;
-    if (seed.size > 0) setExcluded(new Set(seed));
-    // Convert an older include-list scope the moment it's read, so the two
-    // forms never disagree about what a restore will do.
-    if (legacyScoped && seed.size > 0) {
-      void timeMachineStore.setExclusions(rightMeta.id, Array.from(seed));
-    }
-  }, [rightMeta, preview.building, savedExcluded, legacySeed, legacyScoped]);
-
-  /**
-   * Auto-save. The checkboxes ARE the restore point's setting, so there is
-   * nothing to confirm — every edit persists as EXCLUSIONS (the items to
-   * leave alone), and every later restore of this point honors them, one-tap
-   * RESTORE and MCP included.
-   *
-   * Never an include list: unchecking one of ten keys must keep restoring the
-   * other nine AND anything that only starts differing tomorrow, which a list
-   * built from today's diff cannot do.
-   *
-   * Gated on a ref rather than on comparing to what's stored, because on the
-   * frames before the seed lands `excluded` is legitimately empty — writing
-   * that would erase the saved selection we are about to load.
-   */
-  useEffect(() => {
-    if (!rightMeta || !savedExcluded || !userEditedRef.current) return;
-    if (sameSelection(excluded, savedExcluded)) return;
-    const keys = Array.from(excluded);
-    void timeMachineStore.setExclusions(rightMeta.id, keys.length ? keys : null);
-  }, [excluded, rightMeta, savedExcluded]);
-
-  const toggleItem = useCallback((key: string) => {
-    userEditedRef.current = true;
-    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") => {
-      userEditedRef.current = true;
-      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 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 ?? "preview",
-          onBack,
-        }
-      : null,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [hosted, rightMeta?.name]
-  );
-
-  const { rows, blockedSources } = useMemo(() => {
-    const q = search.trim().toLowerCase();
-    const out: Row[] = [];
-    // Sources the restore would not touch at all get no card: "no changes"
-    // rows are noise on a screen about what WILL change.
-    /** Sources holding a won't-apply item, so the note can name where to look. */
-    const blocked: string[] = [];
-    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");
-      if (!relevant && !src.error) continue;
-      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;
-      if (wontApplyCount > 0) blocked.push(src.label);
-      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;
-      });
-      // Everything starts collapsed. The screen's job on open is "which
-      // sources would this touch, and how much" — expanding a source with
-      // 58 keys before you asked buries that under its own contents.
-      const isCollapsed = expandable ? (collapsed[src.id] ?? true) : true;
-      out.push({
-        kind: "source",
-        source: src,
-        collapsed: isCollapsed,
-        includeState,
-        applicableCount: applicable.length,
-        counts,
-        expandable,
-        summary,
-        first: false,
-        last: false,
-      });
-      if (!isCollapsed) {
-        for (const note of src.notes) {
-          out.push({
-            kind: "note",
-            id: `${src.id}:${note}`,
-            text: note,
-            first: false,
-            last: false,
-          });
-        }
-        if (src.error) {
-          out.push({
-            kind: "note",
-            id: `${src.id}:err`,
-            text: `⚠ ${src.error}`,
-            first: false,
-            last: false,
-          });
-        }
-        for (const item of visible) {
-          const key = cKey(src.id, item.key);
-          out.push({
-            kind: "item",
-            sourceId: src.id,
-            item,
-            excluded: excluded.has(key),
-            first: false,
-            last: false,
-          });
-          if (openDiffs.has(key)) {
-            out.push({
-              kind: "diff",
-              sourceId: src.id,
-              item,
-              first: false,
-              last: false,
-            });
-          }
-        }
-      }
-    }
-    if (rightMeta?.route) {
-      out.push({
-        kind: "route",
-        href: rightMeta.route.href,
-        on: willRestoreRoute(rightMeta),
-        first: false,
-        last: false,
-      });
-    }
-    // ONE card holds every source — the ends of the LIST round, and every
-    // other boundary is just a hairline. Per-source cards would read as
-    // separate groups, which they aren't: this is one list of what a restore
-    // would touch.
-    if (out.length > 0) {
-      out[0].first = true;
-      out[out.length - 1].last = true;
-    }
-    return { rows: out, blockedSources: blocked };
-  }, [preview.sources, search, collapsed, excluded, openDiffs, rightMeta]);
-
-  const renderRow: ListRenderItem<Row> = useCallback(
-    ({ item: row }) => {
-      if (row.kind === "source") {
-        const src = row.source;
-        const { counts } = row;
-        return (
-          <CardRow position={row}>
-          <View style={styles.sourceCard}>
-            {/* Always rendered, even when there is nothing to select: it is
-                what every row lines up against now that the icons are gone,
-                and an empty ring reads as "nothing selected here". */}
-            <TouchableOpacity
-              onPress={() => toggleSource(src, row.includeState)}
-              disabled={row.applicableCount === 0}
-              hitSlop={{ top: 10, bottom: 10, left: 8, right: 8 }}
-              testID={`tm-preview-source-toggle-${src.id}`}
-            >
-              <Checkbox
-                state={row.applicableCount === 0 ? "none" : 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.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>
-              <View style={styles.sourceBadges}>
-                {counts.removed > 0 ? (
-                  <CountPill glyph="−" count={counts.removed} color={tm.color.danger} />
-                ) : null}
-                {counts.added > 0 ? (
-                  <CountPill glyph="+" count={counts.added} color={tm.color.accent} />
-                ) : null}
-                {counts.changed > 0 ? (
-                  <CountPill glyph="≈" count={counts.changed} color={tm.color.info} />
-                ) : null}
-              </View>
-              {row.expandable ? (
-                row.collapsed ? (
-                  <DisclosureChevron />
-                ) : (
-                  <ChevronUp size={16} color={tm.color.labelTertiary} />
-                )
-              ) : null}
-            </TouchableOpacity>
-          </View>
-          </CardRow>
-        );
-      }
-      if (row.kind === "note") {
-        return (
-          <CardRow position={row}>
-            <Text style={styles.noteRow}>{row.text}</Text>
-          </CardRow>
-        );
-      }
-      if (row.kind === "route") {
-        return (
-          <CardRow position={row}>
-            <TouchableOpacity
-              style={styles.routeRow}
-              onPress={toggleRoute}
-              accessibilityRole="switch"
-              accessibilityState={{ checked: row.on }}
-              accessibilityLabel={`Also return to ${row.href}`}
-              testID="tm-preview-route"
-            >
-              <Checkbox state={row.on ? "all" : "none"} />
-              <View style={styles.routeText}>
-                <Text style={styles.routeTitle}>Return to this screen</Text>
-                <Text style={styles.routeHref} numberOfLines={1}>
-                  {row.href}
-                </Text>
-              </View>
-            </TouchableOpacity>
-          </CardRow>
-        );
-      }
-      if (row.kind === "diff") {
-        return (
-          <CardRow position={row}>
-            <ItemDiffPanel item={row.item} />
-          </CardRow>
-        );
-      }
-      return (
-        <ItemRow
-          row={row}
-          expanded={openDiffs.has(cKey(row.sourceId, row.item.key))}
-          onOpen={() => toggleDiff(cKey(row.sourceId, row.item.key))}
-          onToggle={() => toggleItem(cKey(row.sourceId, row.item.key))}
-        />
-      );
-    },
-    [openDiffs, toggleDiff, toggleCollapse, toggleItem, toggleSource, toggleRoute]
-  );
-
-  const keyExtractor = useCallback((row: Row) => {
-    if (row.kind === "source") return `s:${row.source.id}`;
-    if (row.kind === "note") return `n:${row.id}`;
-    if (row.kind === "route") return "route";
-    if (row.kind === "diff") return `d:${row.sourceId}:${row.item.key}`;
-    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>
-      )}
-
-      {rightMeta ? (
-        <>
-          <SectionLabel>Restore Point</SectionLabel>
-          <Group>
-            <RestorePointNameRow
-              name={rightMeta.name}
-              onRename={(next) =>
-                void timeMachineStore.rename(rightMeta.id, next)
-              }
-            />
-          </Group>
-        </>
-      ) : null}
-
-      <SectionLabel>Changes to Restore</SectionLabel>
-    </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 ? (
-            <ActivityIndicator
-              style={styles.buildingSpinner}
-              size="small"
-              color={tm.color.accent}
-            />
-          ) : (
-            <Text style={styles.emptyText}>
-              {search
-                ? "Nothing matches this filter."
-                : "No changes — restoring would change nothing."}
-            </Text>
-          )
-        }
-        ListFooterComponent={
-          <View>
-            {totals.wontApply > 0 ? (
-              <View style={styles.warnNote}>
-                <AlertTriangle size={12} color={tm.color.warning} />
-                <Text style={styles.warnNoteText}>
-                  {totals.wontApply} item{totals.wontApply === 1 ? "" : "s"}{" "}
-                  won't apply — expand{" "}
-                  {blockedSources.length > 0
-                    ? blockedSources.join(" and ")
-                    : "the source"}{" "}
-                  to see the reason.
-                </Text>
-              </View>
-            ) : null}
-          </View>
-        }
-        removeClippedSubviews
-        initialNumToRender={20}
-        windowSize={7}
-        contentContainerStyle={styles.listContent}
-      />
-
-      {/* Sticky Restore CTA */}
-      {liveLeft && rightMeta && (
-        <View style={[styles.footer, { paddingBottom: insets.bottom }]}>
-          <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={isBaseline ? tm.color.onDanger : tm.color.onAccent} />
-            <Text
-              style={[styles.ctaText, isBaseline ? styles.ctaTextDanger : null]}
-            >
-              {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({
-  // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
-  container: { flex: 1, backgroundColor: "transparent" },
-  fallbackHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: tm.gutter,
-    paddingVertical: 10,
-    gap: 10,
-  },
-  backText: { color: tm.color.accent, fontSize: tm.font.control },
-  screenTitle: {
-    color: tm.color.label,
-    fontSize: 20,
-    fontWeight: "700",
-    letterSpacing: tm.tracking.row,
-    flex: 1,
-  },
-  dimmed: { opacity: 0.5 },
-  listContent: { paddingTop: 14, paddingBottom: 12 },
-
-  // ── The grouped card each list row paints its own share of ──────────────
-  cardRow: {
-    marginHorizontal: tm.gutter,
-    backgroundColor: tm.color.group,
-  },
-  cardRowFirst: {
-    borderTopLeftRadius: tm.radius.group,
-    borderTopRightRadius: tm.radius.group,
-  },
-  cardRowLast: {
-    borderBottomLeftRadius: tm.radius.group,
-    borderBottomRightRadius: tm.radius.group,
-    marginBottom: 10,
-  },
-  cardSeparator: {
-    height: StyleSheet.hairlineWidth,
-    marginLeft: 51,
-    backgroundColor: tm.color.separator,
-  },
-
-  // ── Selection card ──────────────────────────────────────────────────────
-
-  // ── The "won't apply" heads-up under the card ───────────────────────────
-  warnNote: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    gap: 6,
-    paddingHorizontal: tm.gutter + tm.textInset,
-    paddingTop: 8,
-  },
-  warnNoteText: {
-    flex: 1,
-    color: tm.color.labelSecondary,
-    fontSize: tm.font.footnote,
-    lineHeight: tm.font.footnote * 1.35,
-  },
-
-  // ── Count pills on a source row ─────────────────────────────────────────
-  countPill: {
-    borderRadius: tm.radius.pill,
-    paddingHorizontal: 9,
-    paddingVertical: 3,
-  },
-  countPillText: {
-    fontFamily: TM_MONO,
-    fontSize: tm.font.footnote,
-    fontWeight: "600",
-  },
-
-  // ── Include checkbox ────────────────────────────────────────────────────
-  checkbox: {
-    width: 23,
-    height: 23,
-    borderRadius: tm.radius.pill,
-    borderWidth: 1.7,
-    borderColor: tm.color.labelTertiary,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  checkboxChecked: {
-    borderColor: tm.color.accent,
-    backgroundColor: tm.color.accent,
-  },
-  checkboxGlyph: {
-    color: tm.color.onAccent,
-    fontSize: 13,
-    fontWeight: "700",
-    lineHeight: 15,
-  },
-
-  // ── Route row ───────────────────────────────────────────────────────────
-  routeRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    minHeight: 58,
-    paddingHorizontal: tm.textInset,
-    paddingVertical: 9,
-    gap: 12,
-  },
-  routeText: { flex: 1, minWidth: 0, gap: 2 },
-  routeTitle: {
-    color: tm.color.label,
-    fontSize: tm.font.row,
-    fontWeight: "600",
-    letterSpacing: tm.tracking.row,
-  },
-  routeHref: {
-    color: tm.color.labelSecondary,
-    fontFamily: TM_MONO,
-    fontSize: tm.font.mono,
-  },
-
-  // ── Source header row (first row of its card) ───────────────────────────
-  sourceCard: {
-    flexDirection: "row",
-    alignItems: "center",
-    minHeight: 58,
-    paddingHorizontal: tm.textInset,
-    paddingVertical: 9,
-    gap: 12,
-  },
-  sourceCardTouch: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 12,
-    minWidth: 0,
-  },
-  sourceNameBlock: { flex: 1, minWidth: 0, gap: 2 },
-  sourceName: {
-    color: tm.color.label,
-    fontSize: tm.font.row,
-    fontWeight: "600",
-    letterSpacing: tm.tracking.row,
-  },
-  sourceSummary: {
-    color: tm.color.labelSecondary,
-    fontSize: tm.font.footnote,
-    fontVariant: ["tabular-nums"],
-  },
-  sourceBadges: { flexDirection: "row", gap: 6 },
-
-  noteRow: {
-    color: tm.color.labelTertiary,
-    fontSize: tm.font.footnote,
-    lineHeight: tm.font.footnote * 1.35,
-    paddingHorizontal: tm.textInset,
-    paddingVertical: 9,
-  },
-
-  // ── Item rows (further rows of the same card) ───────────────────────────
-  itemRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingLeft: tm.textInset,
-    paddingRight: tm.textInset,
-    paddingVertical: 10,
-    gap: 12,
-  },
-  itemBodyTouch: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10,
-    minWidth: 0,
-  },
-  itemGlyph: { fontSize: 14, fontWeight: "700", width: 14, textAlign: "center" },
-  itemBody: { flex: 1, minWidth: 0 },
-  itemLabel: {
-    color: tm.color.label,
-    fontSize: tm.font.control,
-    letterSpacing: tm.tracking.control,
-  },
-  itemPreview: {
-    color: tm.color.labelSecondary,
-    fontFamily: TM_MONO,
-    fontSize: tm.font.mono,
-    marginTop: 3,
-  },
-  itemPreviewRemoved: { textDecorationLine: "line-through" },
-  itemReason: {
-    color: tm.color.warning,
-    fontSize: tm.font.mono,
-    marginTop: 3,
-  },
-  itemExcluded: {
-    color: tm.color.labelTertiary,
-    fontSize: tm.font.mono,
-    marginTop: 3,
-    fontStyle: "italic",
-  },
-  buildingSpinner: {
-    marginTop: 28,
-  },
-  emptyText: {
-    color: tm.color.labelSecondary,
-    fontSize: tm.font.footnote,
-    textAlign: "center",
-    marginTop: 28,
-  },
-
-  // ── Sticky restore CTA ──────────────────────────────────────────────────
-  footer: {
-    paddingHorizontal: tm.gutter,
-    paddingTop: 10,
-    gap: 8,
-    borderTopColor: tm.color.separator,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    backgroundColor: tm.color.sheet,
-  },
-  cta: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 8,
-    height: 50,
-    backgroundColor: tm.color.accent,
-    borderRadius: tm.radius.group,
-  },
-  ctaDanger: { backgroundColor: tm.color.danger },
-  ctaTextDanger: { color: tm.color.onDanger },
-  ctaDisabled: { opacity: 0.4 },
-  ctaText: {
-    color: tm.color.onAccent,
-    fontSize: tm.font.row,
-    fontWeight: "600",
-    letterSpacing: tm.tracking.row,
-  },
-  ctaCaption: {
-    color: tm.color.labelSecondary,
-    fontSize: tm.font.footnote,
-    lineHeight: tm.font.footnote * 1.35,
-    textAlign: "center",
-  },
-});