@buoy-gg/time-machine 7.0.22 → 7.0.24

package/src/components/preview/RestorePreviewScreen.tsx

@@ -1,9 +1,10 @@
 /**
  * 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.
+ * 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,
@@ -13,56 +14,45 @@
  * 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 {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import {
   ActivityIndicator,
   FlatList,
   StyleSheet,
   Text,
-  TextInput,
   TouchableOpacity,
   View,
   type ListRenderItem,
 } from "react-native";
 import {
-  ChevronDown,
   ChevronUp,
-  Filter,
+  AlertTriangle,
   RefreshCw,
-  Search,
-  buoyColors,
-  macOSColors,
+  useSafeAreaInsets,
 } 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 { DisclosureChevron, Group, SectionLabel } from "../../ui/primitives";
+import { TM_MONO, tm } from "../../ui/tmTheme";
 import type {
   PreviewSideRef,
   PreviewSource,
   PreviewState,
 } from "../../store/timeMachineStore";
-import { timeMachineStore } 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_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",
@@ -71,7 +61,18 @@ const SOURCE_NOUNS: Record<string, string> = {
   query: "queries",
 };
 
-interface RowSourceHeader {
+/**
+ * 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;
@@ -83,18 +84,43 @@ interface RowSourceHeader {
   /** "60 keys · 7 changed" — detection proof without expanding. */
   summary: string;
 }
-interface RowItem {
+interface RowItem extends CardPosition {
   kind: "item";
   sourceId: string;
   item: StateSnapshotPreviewItem;
   excluded: boolean;
 }
-interface RowNote {
+/**
+ * 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;
+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 {
@@ -112,39 +138,72 @@ function shortPreview(value: unknown): string {
   }
 }
 
-function sideName(ref: PreviewSideRef, snapshots: SnapshotMeta[]): string {
-  if (ref === "current") return "Current state";
+
+
+/**
+ * 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 (
-    snapshots.find((s) => s.id === ref.snapshotId)?.name ?? ref.snapshotId
+    <View
+      style={[
+        styles.cardRow,
+        position.first ? styles.cardRowFirst : null,
+        position.last ? styles.cardRowLast : null,
+      ]}
+    >
+      {position.first ? null : <View style={styles.cardSeparator} />}
+      {children}
+    </View>
   );
 }
 
-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 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 === "all" && <Text style={styles.checkboxGlyph}>✓</Text>}
-      {state === "some" && <Text style={styles.checkboxGlyph}>−</Text>}
+    <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;
@@ -157,16 +216,16 @@ const ItemRow = memo(function ItemRow({
     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>
-      )}
+    <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()}
@@ -211,9 +270,16 @@ const ItemRow = memo(function ItemRow({
             )
           )}
         </View>
-        {openable && <Text style={styles.itemChevron}>›</Text>}
+        {openable ? (
+          expanded ? (
+            <ChevronUp size={16} color={tm.color.labelTertiary} />
+          ) : (
+            <DisclosureChevron />
+          )
+        ) : null}
       </TouchableOpacity>
-    </View>
+      </View>
+    </CardRow>
   );
 });
 
@@ -222,10 +288,7 @@ export interface RestorePreviewScreenProps {
   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({
@@ -233,18 +296,32 @@ export function RestorePreviewScreen({
   snapshots,
   busy,
   onBack,
-  onOpenItem,
   onRestore,
-  onPickSide,
-  onRefresh,
 }: RestorePreviewScreenProps) {
   const host = useToolHost();
   const hosted = host.instanceId !== undefined;
-  const [localSearch, setLocalSearch] = useState("");
+  // `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 [allCollapsed, setAllCollapsed] = useState(false);
   const [excluded, setExcluded] = useState<ReadonlySet<string>>(new Set());
-  const search = localSearch;
+  /** 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"
@@ -252,30 +329,42 @@ export function RestorePreviewScreen({
       : 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";
 
-  // 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]);
+  /**
+   * 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 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;
+  /**
+   * 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) {
@@ -286,34 +375,49 @@ export function RestorePreviewScreen({
         }
       }
     }
-    setExcluded(next);
-  }, [rightMeta, preview.building, preview.sources]);
+    return next;
+  }, [legacyScoped, rightMeta, 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);
-        }
-      }
+  // 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));
     }
-    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]);
+  }, [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);
@@ -324,6 +428,7 @@ export function RestorePreviewScreen({
 
   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) {
@@ -345,16 +450,6 @@ export function RestorePreviewScreen({
     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;
@@ -383,23 +478,27 @@ export function RestorePreviewScreen({
     hosted
       ? {
           title: "Restore Preview",
-          subtitle: rightMeta?.name ?? "compare",
+          subtitle: rightMeta?.name ?? "preview",
           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 { 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(
@@ -408,6 +507,7 @@ export function RestorePreviewScreen({
       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$/, "")
@@ -444,9 +544,10 @@ export function RestorePreviewScreen({
         if (q && !item.label.toLowerCase().includes(q)) return false;
         return true;
       });
-      const isCollapsed = !expandable
-        ? true
-        : (collapsed[src.id] ?? (applicable.length === 0 && !src.error));
+      // 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,
@@ -456,55 +557,97 @@ export function RestorePreviewScreen({
         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 });
+          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}` });
+          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(cKey(src.id, item.key)),
+            excluded: excluded.has(key),
+            first: false,
+            last: false,
           });
+          if (openDiffs.has(key)) {
+            out.push({
+              kind: "diff",
+              sourceId: src.id,
+              item,
+              first: false,
+              last: false,
+            });
+          }
         }
       }
     }
-    return out;
-  }, [preview.sources, search, collapsed, excluded]);
+    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;
-        const clean =
-          counts.added + counts.removed + counts.changed === 0 && !src.error;
-        const IconComp = SOURCE_ICONS[src.id] ?? TimeMachineIcon;
         return (
+          <CardRow position={row}>
           <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>
-            )}
+            {/* 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.sourceIconTile}>
-                <IconComp size={18} />
-              </View>
               <View style={styles.sourceNameBlock}>
                 <Text style={styles.sourceName} numberOfLines={1}>
                   {src.label}
@@ -515,53 +658,82 @@ export function RestorePreviewScreen({
                     : 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>
-              )}
+              <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 ? (
-                  <ChevronDown size={16} color={buoyColors.textMuted} />
+                  <DisclosureChevron />
                 ) : (
-                  <ChevronUp size={16} color={buoyColors.textMuted} />
+                  <ChevronUp size={16} color={tm.color.labelTertiary} />
                 )
               ) : null}
             </TouchableOpacity>
           </View>
+          </CardRow>
         );
       }
       if (row.kind === "note") {
-        return <Text style={styles.noteRow}>{row.text}</Text>;
+        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}
-          onOpen={() => onOpenItem(row.sourceId, row.item)}
+          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))}
         />
       );
     },
-    [onOpenItem, toggleCollapse, toggleItem, toggleSource]
+    [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}`;
   }, []);
 
@@ -578,182 +750,21 @@ export function RestorePreviewScreen({
         </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 }]}
+      {rightMeta ? (
+        <>
+          <SectionLabel>Restore Point</SectionLabel>
+          <Group>
+            <RestorePointNameRow
+              name={rightMeta.name}
+              onRename={(next) =>
+                void timeMachineStore.rename(rightMeta.id, next)
+              }
             />
-          </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>
+          </Group>
+        </>
+      ) : null}
 
-      {/* 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>
+      <SectionLabel>Changes to Restore</SectionLabel>
     </View>
   );
 
@@ -767,7 +778,13 @@ export function RestorePreviewScreen({
         keyExtractor={keyExtractor}
         ListHeaderComponent={header}
         ListEmptyComponent={
-          preview.building ? null : (
+          preview.building ? (
+            <ActivityIndicator
+              style={styles.buildingSpinner}
+              size="small"
+              color={tm.color.accent}
+            />
+          ) : (
             <Text style={styles.emptyText}>
               {search
                 ? "Nothing matches this filter."
@@ -775,6 +792,23 @@ export function RestorePreviewScreen({
             </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}
@@ -783,7 +817,7 @@ export function RestorePreviewScreen({
 
       {/* Sticky Restore CTA */}
       {liveLeft && rightMeta && (
-        <View style={styles.footer}>
+        <View style={[styles.footer, { paddingBottom: insets.bottom }]}>
           <TouchableOpacity
             style={[
               styles.cta,
@@ -796,8 +830,10 @@ export function RestorePreviewScreen({
             disabled={isBaseline ? busy || preview.building : ctaDisabled}
             testID="tm-preview-restore"
           >
-            <RefreshCw size={16} color="#0A0A0A" />
-            <Text style={styles.ctaText}>
+            <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>
@@ -817,161 +853,125 @@ export function RestorePreviewScreen({
 const HIT = { top: 10, bottom: 10, left: 10, right: 10 };
 
 const styles = StyleSheet.create({
-  container: { flex: 1 },
+  container: { flex: 1, backgroundColor: tm.color.sheet },
   fallbackHeader: {
     flexDirection: "row",
     alignItems: "center",
-    paddingVertical: 8,
+    paddingHorizontal: tm.gutter,
+    paddingVertical: 10,
     gap: 10,
   },
-  backText: { color: buoyColors.primary, fontSize: 14 },
+  backText: { color: tm.color.accent, fontSize: tm.font.control },
   screenTitle: {
-    color: buoyColors.text,
-    fontSize: 13,
+    color: tm.color.label,
+    fontSize: 20,
     fontWeight: "700",
+    letterSpacing: tm.tracking.row,
     flex: 1,
   },
-  toolbarButton: { padding: 4, justifyContent: "center", alignItems: "center" },
-  dimmed: { opacity: 0.55 },
-  listContent: { paddingHorizontal: 12, paddingTop: 8, paddingBottom: 12 },
+  dimmed: { opacity: 0.5 },
+  listContent: { paddingTop: 14, 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",
+  // ── The grouped card each list row paints its own share of ──────────────
+  cardRow: {
+    marginHorizontal: tm.gutter,
+    backgroundColor: tm.color.group,
   },
-  swapGlyph: { color: buoyColors.textSecondary, fontSize: 14 },
-
-  // Changes row
-  changesRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginTop: 14,
-    gap: 10,
+  cardRowFirst: {
+    borderTopLeftRadius: tm.radius.group,
+    borderTopRightRadius: tm.radius.group,
   },
-  changesTitle: { color: buoyColors.text, fontSize: 14, fontWeight: "700" },
-  changesTitleRow: {
-    flexDirection: "row",
-    alignItems: "baseline",
-    gap: 8,
+  cardRowLast: {
+    borderBottomLeftRadius: tm.radius.group,
+    borderBottomRightRadius: tm.radius.group,
+    marginBottom: 10,
   },
-  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%",
+  cardSeparator: {
+    height: StyleSheet.hairlineWidth,
+    marginLeft: 51,
+    backgroundColor: tm.color.separator,
   },
-  changesChipText: { color: buoyColors.textSecondary, fontSize: 11 },
-  wontApplyLine: { color: buoyColors.warning, fontSize: 11, marginTop: 6 },
 
-  // Search row
-  searchRow: {
+  // ── Selection card ──────────────────────────────────────────────────────
+
+  // ── The "won't apply" heads-up under the card ───────────────────────────
+  warnNote: {
     flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginTop: 10,
-    marginBottom: 6,
+    alignItems: "flex-start",
+    gap: 6,
+    paddingHorizontal: tm.gutter + tm.textInset,
+    paddingTop: 8,
   },
-  searchField: {
+  warnNoteText: {
     flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    backgroundColor: buoyColors.card,
-    borderColor: buoyColors.border,
-    borderWidth: 1,
-    borderRadius: 10,
-    paddingHorizontal: 10,
+    color: tm.color.labelSecondary,
+    fontSize: tm.font.footnote,
+    lineHeight: tm.font.footnote * 1.35,
   },
-  searchInput: {
-    flex: 1,
-    color: buoyColors.text,
-    fontSize: 12,
-    paddingVertical: 8,
+
+  // ── Count pills on a source row ─────────────────────────────────────────
+  countPill: {
+    borderRadius: tm.radius.pill,
+    paddingHorizontal: 9,
+    paddingVertical: 3,
   },
-  collapseAllButton: {
-    width: 36,
-    height: 36,
-    borderRadius: 10,
-    backgroundColor: buoyColors.card,
-    borderColor: buoyColors.border,
-    borderWidth: 1,
-    alignItems: "center",
-    justifyContent: "center",
+  countPillText: {
+    fontFamily: TM_MONO,
+    fontSize: tm.font.footnote,
+    fontWeight: "600",
   },
 
-  // Checkbox
+  // ── Include checkbox ────────────────────────────────────────────────────
   checkbox: {
-    width: 18,
-    height: 18,
-    borderRadius: 4,
-    borderWidth: 1.5,
-    borderColor: buoyColors.textMuted,
+    width: 23,
+    height: 23,
+    borderRadius: tm.radius.pill,
+    borderWidth: 1.7,
+    borderColor: tm.color.labelTertiary,
     alignItems: "center",
     justifyContent: "center",
   },
   checkboxChecked: {
-    borderColor: buoyColors.primary,
-    backgroundColor: `${buoyColors.primary}26`,
+    borderColor: tm.color.accent,
+    backgroundColor: tm.color.accent,
   },
   checkboxGlyph: {
-    color: buoyColors.primary,
-    fontSize: 11,
+    color: tm.color.onAccent,
+    fontSize: 13,
     fontWeight: "700",
-    lineHeight: 13,
+    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 cards
+  // ── Source header row (first row of its card) ───────────────────────────
   sourceCard: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: buoyColors.card,
-    borderColor: buoyColors.border,
-    borderWidth: 1,
-    borderRadius: 12,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    marginTop: 8,
-    gap: 10,
+    minHeight: 58,
+    paddingHorizontal: tm.textInset,
+    paddingVertical: 9,
+    gap: 12,
   },
   sourceCardTouch: {
     flex: 1,
@@ -980,110 +980,110 @@ const styles = StyleSheet.create({
     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",
+    color: tm.color.label,
+    fontSize: tm.font.row,
+    fontWeight: "600",
+    letterSpacing: tm.tracking.row,
   },
   sourceSummary: {
-    color: buoyColors.textMuted,
-    fontSize: 11,
-    fontVariant: ["tabular-nums"],
-  },
-  sourceBadges: { flexDirection: "row", gap: 8 },
-  sourceBadge: {
-    fontSize: 13,
-    fontWeight: "700",
+    color: tm.color.labelSecondary,
+    fontSize: tm.font.footnote,
     fontVariant: ["tabular-nums"],
   },
+  sourceBadges: { flexDirection: "row", gap: 6 },
 
   noteRow: {
-    color: buoyColors.textMuted,
-    fontSize: 10,
-    paddingLeft: 24,
-    paddingTop: 6,
+    color: tm.color.labelTertiary,
+    fontSize: tm.font.footnote,
+    lineHeight: tm.font.footnote * 1.35,
+    paddingHorizontal: tm.textInset,
+    paddingVertical: 9,
   },
 
-  // Item rows (nested under a source card)
+  // ── Item rows (further rows of the same 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,
+    paddingLeft: tm.textInset,
+    paddingRight: tm.textInset,
+    paddingVertical: 10,
+    gap: 12,
   },
   itemBodyTouch: {
     flex: 1,
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
+    gap: 10,
     minWidth: 0,
   },
-  itemGlyph: { fontSize: 13, fontWeight: "700", width: 14, textAlign: "center" },
+  itemGlyph: { fontSize: 14, fontWeight: "700", width: 14, textAlign: "center" },
   itemBody: { flex: 1, minWidth: 0 },
-  itemLabel: { color: buoyColors.text, fontSize: 12 },
+  itemLabel: {
+    color: tm.color.label,
+    fontSize: tm.font.control,
+    letterSpacing: tm.tracking.control,
+  },
   itemPreview: {
-    color: buoyColors.textMuted,
-    fontSize: 10,
-    marginTop: 2,
-    fontVariant: ["tabular-nums"],
+    color: tm.color.labelSecondary,
+    fontFamily: TM_MONO,
+    fontSize: tm.font.mono,
+    marginTop: 3,
   },
   itemPreviewRemoved: { textDecorationLine: "line-through" },
-  itemReason: { color: buoyColors.warning, fontSize: 10, marginTop: 2 },
+  itemReason: {
+    color: tm.color.warning,
+    fontSize: tm.font.mono,
+    marginTop: 3,
+  },
   itemExcluded: {
-    color: buoyColors.textMuted,
-    fontSize: 10,
-    marginTop: 2,
+    color: tm.color.labelTertiary,
+    fontSize: tm.font.mono,
+    marginTop: 3,
     fontStyle: "italic",
   },
-  itemChevron: { color: buoyColors.textMuted, fontSize: 16 },
+  buildingSpinner: {
+    marginTop: 28,
+  },
   emptyText: {
-    color: buoyColors.textMuted,
-    fontSize: 12,
+    color: tm.color.labelSecondary,
+    fontSize: tm.font.footnote,
     textAlign: "center",
-    marginTop: 24,
+    marginTop: 28,
   },
 
-  // Footer CTA
+  // ── Sticky restore CTA ──────────────────────────────────────────────────
   footer: {
-    paddingHorizontal: 12,
-    paddingTop: 8,
-    paddingBottom: 12,
-    gap: 6,
-    borderTopColor: buoyColors.border,
-    borderTopWidth: 1,
-    backgroundColor: buoyColors.base,
+    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,
-    backgroundColor: buoyColors.primary,
-    borderRadius: 24,
-    paddingVertical: 13,
+    height: 50,
+    backgroundColor: tm.color.accent,
+    borderRadius: tm.radius.group,
   },
-  ctaDanger: { backgroundColor: buoyColors.error },
+  ctaDanger: { backgroundColor: tm.color.danger },
+  ctaTextDanger: { color: tm.color.onDanger },
   ctaDisabled: { opacity: 0.4 },
-  ctaText: { color: "#0A0A0A", fontSize: 14, fontWeight: "700" },
+  ctaText: {
+    color: tm.color.onAccent,
+    fontSize: tm.font.row,
+    fontWeight: "600",
+    letterSpacing: tm.tracking.row,
+  },
   ctaCaption: {
-    color: buoyColors.textMuted,
-    fontSize: 10,
+    color: tm.color.labelSecondary,
+    fontSize: tm.font.footnote,
+    lineHeight: tm.font.footnote * 1.35,
     textAlign: "center",
   },
 });