@buoy-gg/time-machine 7.0.27 → 7.0.29

package/src/components/TimeMachineBody.tsx

@@ -126,6 +126,13 @@ function RestorePointList({
     <ScrollView
       style={styles.fill}
       contentContainerStyle={[styles.content, { paddingBottom: insets.bottom }]}
+      testID="time-machine-scroll"
+      // Without this, the first tap after typing a name only DISMISSES the
+      // keyboard — Capture never fires and the restore point is silently not
+      // taken. Every other Buoy screen with a field inside a scroller sets it;
+      // this one didn't, and only the XCTest lane could see it (Detox's
+      // replaceText never opens a keyboard, so the tap always landed).
+      keyboardShouldPersistTaps="handled"
     >
       {/* Only when the restore did something the app itself won't show you. */}
       {lastOutcome && restoreNeedsAttention(lastOutcome) ? (
@@ -149,7 +156,7 @@ function RestorePointList({
         />
       </View>
       {atCaptureLimit ? (
-        <Footnote tone="warning">
+        <Footnote tone="warning" testID="time-machine-limit">
           Free plan keeps {snapshotLimit} restore points. Upgrade to Pro
           for unlimited snapshots.
         </Footnote>
@@ -162,7 +169,7 @@ function RestorePointList({
       {sources
         .filter((s) => s.detail && !(s.canCapture && s.canRestore))
         .map((s) => (
-          <Footnote key={s.id}>
+          <Footnote key={s.id} testID={`time-machine-source-${s.id}-detail`}>
             {s.label}: {s.detail}
           </Footnote>
         ))}
@@ -180,7 +187,7 @@ function RestorePointList({
           />
         ))}
         {visible.length === 0 ? (
-          <Text style={styles.empty}>
+          <Text style={styles.empty} testID="time-machine-empty">
             {!hasLoaded
               ? "Loading restore points…"
               : snapshots.length > 0
@@ -190,7 +197,9 @@ function RestorePointList({
         ) : null}
       </Group>
       {visible.length > 0 ? (
-        <Footnote>Swipe a restore point to rename, copy or delete it.</Footnote>
+        <Footnote testID="time-machine-swipe-hint">
+          Swipe a restore point to copy or delete it.
+        </Footnote>
       ) : null}
 
       <View style={styles.spacer} />

package/src/components/list/RestoreOutcomeCard.tsx

@@ -32,15 +32,18 @@ function ResultLine({
   glyph,
   text,
   ok,
+  testID,
 }: {
   glyph: string;
   text: string;
   ok: boolean;
+  testID?: string;
 }) {
   return (
     <Text
       style={[styles.line, { color: ok ? tm.color.accent : tm.color.warning }]}
       numberOfLines={2}
+      testID={testID}
     >
       <Text style={styles.glyph}>{glyph} </Text>
       {text}
@@ -48,18 +51,33 @@ function ResultLine({
   );
 }
 
+const ROUTE_TEST_ID = "time-machine-outcome-route";
+
 function RouteResult({ route }: { route: NonNullable<RestoreOutcome["route"]> }) {
   if (route.status === "navigated")
-    return <ResultLine glyph="✓" ok text={`route — ${route.href}`} />;
+    return (
+      <ResultLine
+        glyph="✓"
+        ok
+        text={`route — ${route.href}`}
+        testID={ROUTE_TEST_ID}
+      />
+    );
   if (route.status === "deferred")
     return (
-      <ResultLine glyph="↻" ok text={`route — ${route.href} after reload`} />
+      <ResultLine
+        glyph="↻"
+        ok
+        text={`route — ${route.href} after reload`}
+        testID={ROUTE_TEST_ID}
+      />
     );
   return (
     <ResultLine
       glyph="✕"
       ok={false}
       text={`route — ${route.error ?? route.status}`}
+      testID={ROUTE_TEST_ID}
     />
   );
 }
@@ -69,9 +87,9 @@ export function RestoreOutcomeCard({ outcome }: { outcome: RestoreOutcome }) {
   const reloading = outcome.mode === "reload" || outcome.willReload;
 
   return (
-    <View style={styles.card}>
+    <View style={styles.card} testID="time-machine-outcome">
       <View style={styles.headerRow}>
-        <Text style={styles.title} numberOfLines={1}>
+        <Text style={styles.title} numberOfLines={1} testID="time-machine-outcome-title">
           Restored “{outcome.snapshotName}”{reloading ? " · reloading" : ""}
         </Text>
         <TouchableOpacity
@@ -79,13 +97,16 @@ export function RestoreOutcomeCard({ outcome }: { outcome: RestoreOutcome }) {
           hitSlop={HIT}
           accessibilityRole="button"
           accessibilityLabel="Dismiss restore result"
+          testID="time-machine-outcome-dismiss"
         >
           <X size={13} color={tm.color.labelSecondary} />
         </TouchableOpacity>
       </View>
 
       {entries.length === 0 && !outcome.route ? (
-        <Text style={styles.empty}>No sources restored.</Text>
+        <Text style={styles.empty} testID="time-machine-outcome-empty">
+          No sources restored.
+        </Text>
       ) : null}
 
       {outcome.route ? <RouteResult route={outcome.route} /> : null}
@@ -93,6 +114,7 @@ export function RestoreOutcomeCard({ outcome }: { outcome: RestoreOutcome }) {
       {entries.map(([sourceId, result]) => (
         <View key={sourceId}>
           <ResultLine
+            testID={`time-machine-outcome-${sourceId}`}
             glyph={result.ok ? "✓" : "✕"}
             ok={result.ok}
             text={`${sourceId} — applied ${result.applied}${

package/src/components/list/SnapshotRow.tsx

@@ -78,19 +78,27 @@ export function SnapshotRow({
         testID={testID}
       >
         <View style={styles.text}>
-          <Text style={styles.name} numberOfLines={1}>
+          <Text style={styles.name} numberOfLines={1} testID={`${testID}-name`}>
             {meta.name}
           </Text>
-          <Text style={styles.meta} numberOfLines={1}>
+          <Text style={styles.meta} numberOfLines={1} testID={`${testID}-meta`}>
             {describe(meta)}
           </Text>
           {meta.lastRestoredAt ? (
-            <Text style={styles.restored} numberOfLines={1}>
+            <Text
+              style={styles.restored}
+              numberOfLines={1}
+              testID={`${testID}-restored`}
+            >
               Restored {timeAgo(meta.lastRestoredAt)}
             </Text>
           ) : null}
           {meta.route ? (
-            <Text style={styles.route} numberOfLines={1}>
+            <Text
+              style={styles.route}
+              numberOfLines={1}
+              testID={`${testID}-route`}
+            >
               {meta.route.href}
             </Text>
           ) : null}
@@ -104,6 +112,7 @@ export function SnapshotRow({
           testID={`${testID}-restore`}
         >
           <PillLabel
+            testID={`${testID}-restore-label`}
             label={meta.baseline ? "Wipe" : "Restore"}
             color={meta.baseline ? tm.color.danger : tm.color.accent}
             background={meta.baseline ? tm.color.dangerSoft : tm.color.accentSoft}

package/src/components/list/SourcesStrip.tsx

@@ -39,6 +39,7 @@ function SourceTile({ source }: { source: SourceStatus }) {
       <Text
         style={[styles.label, !source.canCapture ? styles.labelOff : null]}
         numberOfLines={1}
+        testID={`time-machine-source-${source.id}-label`}
       >
         {source.label}
       </Text>
@@ -59,7 +60,9 @@ export function SourcesStrip({ sources }: { sources: SourceStatus[] }) {
           <SourceTile key={source.id} source={source} />
         ))}
         {sources.length === 0 ? (
-          <Text style={styles.empty}>No state tools installed.</Text>
+          <Text style={styles.empty} testID="time-machine-sources-empty">
+            No state tools installed.
+          </Text>
         ) : null}
       </ScrollView>
     </View>

package/src/components/list/UndoDeleteBar.tsx

@@ -33,8 +33,8 @@ export function UndoDeleteBar({
   }, [at]);
 
   return (
-    <View style={styles.bar}>
-      <Text style={styles.text} numberOfLines={1}>
+    <View style={styles.bar} testID="time-machine-undo-bar">
+      <Text style={styles.text} numberOfLines={1} testID="time-machine-undo-text">
         Deleted “{name}”
       </Text>
       <TouchableOpacity

package/src/components/preview/ItemDiffPanel.tsx

@@ -30,7 +30,13 @@ import { tm } from "../../ui/tmTheme";
 
 const EMPTY: unknown[] = [];
 
-export function ItemDiffPanel({ item }: { item: StateSnapshotPreviewItem }) {
+export function ItemDiffPanel({
+  item,
+  testID,
+}: {
+  item: StateSnapshotPreviewItem;
+  testID?: string;
+}) {
   // ABSENT_VALUE keeps added/removed reading as pure additions/removals
   // instead of diffs against the literal "null".
   const { oldValue, newValue } = useMemo(
@@ -44,7 +50,7 @@ export function ItemDiffPanel({ item }: { item: StateSnapshotPreviewItem }) {
   );
 
   return (
-    <View style={styles.panel}>
+    <View style={styles.panel} testID={testID}>
       {item.reason ? <Text style={styles.reason}>⚠ {item.reason}</Text> : null}
       <ThemedSplitView
         oldValue={oldValue}

package/src/components/preview/RestorePreviewScreen.tsx

@@ -171,14 +171,16 @@ function CountPill({
   glyph,
   count,
   color,
+  testID,
 }: {
   glyph: string;
   count: number;
   color: string;
+  testID?: string;
 }) {
   return (
     <View style={[styles.countPill, { backgroundColor: `${color}26` }]}>
-      <Text style={[styles.countPillText, { color }]}>
+      <Text style={[styles.countPillText, { color }]} testID={testID}>
         {glyph}
         {count}
       </Text>
@@ -215,6 +217,10 @@ const ItemRow = memo(function ItemRow({
     row.item.verdict === "changed" ||
     row.item.verdict === "added" ||
     row.item.verdict === "removed";
+  // One stem for the row and every part of it, so a test that found the row
+  // can read its label, its before/after and its exclusion note without
+  // rebuilding the compound key three times.
+  const id = `tm-preview-item-${row.sourceId}-${row.item.key}`;
   return (
     <CardRow position={row}>
       <View style={[styles.itemRow, dimmed && styles.dimmed]}>
@@ -223,6 +229,9 @@ const ItemRow = memo(function ItemRow({
         disabled={!meta.applies}
         hitSlop={{ top: 10, bottom: 10, left: 8, right: 8 }}
         testID={`tm-preview-toggle-${row.sourceId}-${row.item.key}`}
+        accessibilityRole="checkbox"
+        accessibilityState={{ checked: !(!meta.applies || row.excluded) }}
+        accessibilityLabel={`Include ${row.item.label}`}
       >
         <Checkbox state={!meta.applies || row.excluded ? "none" : "all"} />
       </TouchableOpacity>
@@ -230,23 +239,31 @@ const ItemRow = memo(function ItemRow({
         style={styles.itemBodyTouch}
         onPress={() => openable && onOpen()}
         disabled={!openable}
-        testID={`tm-preview-item-${row.sourceId}-${row.item.key}`}
+        testID={id}
       >
         <Text style={[styles.itemGlyph, { color: meta.color }]}>
           {meta.glyph}
         </Text>
         <View style={styles.itemBody}>
-          <Text style={styles.itemLabel} numberOfLines={1}>
+          <Text style={styles.itemLabel} numberOfLines={1} testID={`${id}-label`}>
             {row.item.label}
           </Text>
           {row.item.verdict === "changed" && (
-            <Text style={styles.itemPreview} numberOfLines={1}>
+            <Text
+              style={styles.itemPreview}
+              numberOfLines={1}
+              testID={`${id}-values`}
+            >
               {shortPreview(row.item.oldValue)} →{" "}
               {shortPreview(row.item.newValue)}
             </Text>
           )}
           {row.item.verdict === "added" && (
-            <Text style={styles.itemPreview} numberOfLines={1}>
+            <Text
+              style={styles.itemPreview}
+              numberOfLines={1}
+              testID={`${id}-values`}
+            >
               {shortPreview(row.item.newValue)}
             </Text>
           )}
@@ -254,17 +271,22 @@ const ItemRow = memo(function ItemRow({
             <Text
               style={[styles.itemPreview, styles.itemPreviewRemoved]}
               numberOfLines={1}
+              testID={`${id}-values`}
             >
               {shortPreview(row.item.oldValue)}
             </Text>
           )}
           {row.excluded ? (
-            <Text style={styles.itemExcluded}>
+            <Text style={styles.itemExcluded} testID={`${id}-excluded`}>
               excluded — restore leaves this untouched
             </Text>
           ) : (
             row.item.reason && (
-              <Text style={styles.itemReason} numberOfLines={2}>
+              <Text
+                style={styles.itemReason}
+                numberOfLines={2}
+                testID={`${id}-reason`}
+              >
                 {row.item.reason}
               </Text>
             )
@@ -649,10 +671,18 @@ export function RestorePreviewScreen({
               testID={`tm-preview-source-${src.id}`}
             >
               <View style={styles.sourceNameBlock}>
-                <Text style={styles.sourceName} numberOfLines={1}>
+                <Text
+                  style={styles.sourceName}
+                  numberOfLines={1}
+                  testID={`tm-preview-source-${src.id}-name`}
+                >
                   {src.label}
                 </Text>
-                <Text style={styles.sourceSummary} numberOfLines={1}>
+                <Text
+                  style={styles.sourceSummary}
+                  numberOfLines={1}
+                  testID={`tm-preview-source-${src.id}-summary`}
+                >
                   {row.includeState === "none" && row.applicableCount > 0
                     ? `${row.summary} · excluded`
                     : row.summary}
@@ -660,13 +690,28 @@ export function RestorePreviewScreen({
               </View>
               <View style={styles.sourceBadges}>
                 {counts.removed > 0 ? (
-                  <CountPill glyph="−" count={counts.removed} color={tm.color.danger} />
+                  <CountPill
+                    glyph="−"
+                    count={counts.removed}
+                    color={tm.color.danger}
+                    testID={`tm-preview-source-${src.id}-removed`}
+                  />
                 ) : null}
                 {counts.added > 0 ? (
-                  <CountPill glyph="+" count={counts.added} color={tm.color.accent} />
+                  <CountPill
+                    glyph="+"
+                    count={counts.added}
+                    color={tm.color.accent}
+                    testID={`tm-preview-source-${src.id}-added`}
+                  />
                 ) : null}
                 {counts.changed > 0 ? (
-                  <CountPill glyph="≈" count={counts.changed} color={tm.color.info} />
+                  <CountPill
+                    glyph="≈"
+                    count={counts.changed}
+                    color={tm.color.info}
+                    testID={`tm-preview-source-${src.id}-changed`}
+                  />
                 ) : null}
               </View>
               {row.expandable ? (
@@ -684,7 +729,9 @@ export function RestorePreviewScreen({
       if (row.kind === "note") {
         return (
           <CardRow position={row}>
-            <Text style={styles.noteRow}>{row.text}</Text>
+            <Text style={styles.noteRow} testID={`tm-preview-note-${row.id}`}>
+              {row.text}
+            </Text>
           </CardRow>
         );
       }
@@ -702,7 +749,11 @@ export function RestorePreviewScreen({
               <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}>
+                <Text
+                  style={styles.routeHref}
+                  numberOfLines={1}
+                  testID="tm-preview-route-href"
+                >
                   {row.href}
                 </Text>
               </View>
@@ -713,7 +764,10 @@ export function RestorePreviewScreen({
       if (row.kind === "diff") {
         return (
           <CardRow position={row}>
-            <ItemDiffPanel item={row.item} />
+            <ItemDiffPanel
+              item={row.item}
+              testID={`tm-preview-diff-${row.sourceId}-${row.item.key}`}
+            />
           </CardRow>
         );
       }
@@ -773,6 +827,7 @@ export function RestorePreviewScreen({
   return (
     <View style={styles.container}>
       <FlatList
+        testID="tm-preview-list"
         data={rows}
         renderItem={renderRow}
         keyExtractor={keyExtractor}
@@ -785,7 +840,7 @@ export function RestorePreviewScreen({
               color={tm.color.accent}
             />
           ) : (
-            <Text style={styles.emptyText}>
+            <Text style={styles.emptyText} testID="tm-preview-empty">
               {search
                 ? "Nothing matches this filter."
                 : "No changes — restoring would change nothing."}
@@ -797,7 +852,7 @@ export function RestorePreviewScreen({
             {totals.wontApply > 0 ? (
               <View style={styles.warnNote}>
                 <AlertTriangle size={12} color={tm.color.warning} />
-                <Text style={styles.warnNoteText}>
+                <Text style={styles.warnNoteText} testID="tm-preview-wont-apply">
                   {totals.wontApply} item{totals.wontApply === 1 ? "" : "s"}{" "}
                   won't apply — expand{" "}
                   {blockedSources.length > 0
@@ -809,6 +864,10 @@ export function RestorePreviewScreen({
             ) : null}
           </View>
         }
+        // The name row is a TextInput inside this list: without "handled",
+        // the first tap after renaming only dismisses the keyboard, so the
+        // Restore CTA and every checkbox silently swallow one press.
+        keyboardShouldPersistTaps="handled"
         removeClippedSubviews
         initialNumToRender={20}
         windowSize={7}
@@ -837,7 +896,7 @@ export function RestorePreviewScreen({
               {isBaseline ? "Wipe & Reload" : "Restore State"}
             </Text>
           </TouchableOpacity>
-          <Text style={styles.ctaCaption}>
+          <Text style={styles.ctaCaption} testID="tm-preview-cta-caption">
             {isBaseline
               ? "This wipes all app storage and reloads the app."
               : totals.excludedCount > 0

package/src/ui/primitives.tsx

@@ -20,8 +20,18 @@ import { ChevronRight } from "@buoy-gg/shared-ui";
 import { tm } from "./tmTheme";
 
 /** Uppercase section label that sits above a Group. */
-export function SectionLabel({ children }: { children: string }) {
-  return <Text style={styles.sectionLabel}>{children}</Text>;
+export function SectionLabel({
+  children,
+  testID,
+}: {
+  children: string;
+  testID?: string;
+}) {
+  return (
+    <Text style={styles.sectionLabel} testID={testID}>
+      {children}
+    </Text>
+  );
 }
 
 /**
@@ -32,10 +42,12 @@ export function Footnote({
   children,
   centered,
   tone = "secondary",
+  testID,
 }: {
   children: ReactNode;
   centered?: boolean;
   tone?: "secondary" | "warning";
+  testID?: string;
 }) {
   return (
     <Text
@@ -44,6 +56,7 @@ export function Footnote({
         centered ? styles.footnoteCentered : null,
         tone === "warning" ? styles.footnoteWarning : null,
       ]}
+      testID={testID}
     >
       {children}
     </Text>
@@ -95,14 +108,18 @@ export function PillLabel({
   label,
   color,
   background,
+  testID,
 }: {
   label: string;
   color: string;
   background: string;
+  testID?: string;
 }) {
   return (
     <View style={[styles.pill, { backgroundColor: background }]}>
-      <Text style={[styles.pillText, { color }]}>{label}</Text>
+      <Text style={[styles.pillText, { color }]} testID={testID}>
+        {label}
+      </Text>
     </View>
   );
 }