@buoy-gg/time-machine 7.0.22 → 7.0.24

package/src/components/TimeMachineModal.tsx

@@ -4,8 +4,9 @@
  * for Buoy Desktop.
  */
 import { StyleSheet, Text, View } from "react-native";
-import { JsModal, buoyColors } from "@buoy-gg/shared-ui";
+import { JsModal } from "@buoy-gg/shared-ui";
 import type { ModalState } from "@buoy-gg/shared-ui";
+import { tm } from "../ui/tmTheme";
 import { TimeMachineBody } from "./TimeMachineBody";
 
 export interface TimeMachineModalProps {
@@ -19,8 +20,8 @@ export interface TimeMachineModalProps {
 function Header() {
   return (
     <View style={styles.header}>
-      <Text style={styles.headerTitle}>TIME MACHINE</Text>
-      <Text style={styles.headerSubtitle}>snapshot & restore app state</Text>
+      <Text style={styles.headerTitle}>Time Machine</Text>
+      <Text style={styles.headerSubtitle}>Snapshot & restore app state</Text>
     </View>
   );
 }
@@ -58,19 +59,17 @@ export function TimeMachineToolView() {
 
 const styles = StyleSheet.create({
   header: {
-    flexDirection: "row",
-    alignItems: "baseline",
-    gap: 8,
     paddingHorizontal: 4,
+    gap: 2,
   },
   headerTitle: {
-    color: buoyColors.text,
-    fontSize: 13,
+    color: tm.color.label,
+    fontSize: 22,
     fontWeight: "700",
-    letterSpacing: 1,
+    letterSpacing: 0.3,
   },
   headerSubtitle: {
-    color: buoyColors.textMuted,
-    fontSize: 10,
+    color: tm.color.labelSecondary,
+    fontSize: tm.font.footnote,
   },
 });

package/src/components/confirm.ts

@@ -0,0 +1,35 @@
+/**
+ * Confirmation dialogs for the destructive / branching Time Machine actions.
+ *
+ * RN-web's Alert renders no buttons at all, so the web path (Buoy Desktop,
+ * the web example) uses `window.confirm`.
+ *
+ * There is deliberately NO "restore the route too?" prompt: that question is
+ * answered once per restore point by the route toggle on its row, because
+ * asking it on every restore meant answering it thirty times a day.
+ */
+import { Alert, Platform } from "react-native";
+
+function webConfirm(message: string): boolean {
+  const confirmFn = (globalThis as { confirm?: (msg: string) => boolean })
+    .confirm;
+  // No dialog available at all (headless web): don't silently swallow the
+  // user's intent — treat it as confirmed, same as the previous behavior.
+  return confirmFn ? confirmFn(message) : true;
+}
+
+export function confirmDestructive(
+  title: string,
+  message: string,
+  confirmLabel: string,
+  onConfirm: () => void
+) {
+  if (Platform.OS === "web") {
+    if (webConfirm(`${title}\n\n${message}`)) onConfirm();
+    return;
+  }
+  Alert.alert(title, message, [
+    { text: "Cancel", style: "cancel" },
+    { text: confirmLabel, style: "destructive", onPress: onConfirm },
+  ]);
+}

package/src/components/format.ts

@@ -0,0 +1,17 @@
+/** Display formatting shared by the Time Machine screens. */
+
+export function timeAgo(ts: number): string {
+  const s = Math.max(0, Math.round((Date.now() - ts) / 1000));
+  if (s < 60) return `${s}s ago`;
+  const m = Math.round(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.round(m / 60);
+  if (h < 24) return `${h}h ago`;
+  return `${Math.round(h / 24)}d ago`;
+}
+
+export function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}

package/src/components/list/CaptureBar.tsx

@@ -0,0 +1,100 @@
+/**
+ * Capture bar — the single field-plus-pill control at the top of the list.
+ *
+ * Owns the draft name itself so keystrokes re-render this component and not
+ * the snapshot list underneath it. The parent only hears about a finished
+ * capture.
+ */
+import { useState } from "react";
+import {
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { tm } from "../../ui/tmTheme";
+
+export function CaptureBar({
+  disabled,
+  busy,
+  onCapture,
+}: {
+  disabled: boolean;
+  busy: boolean;
+  onCapture: (name: string) => void;
+}) {
+  const [name, setName] = useState("");
+
+  const capture = () => {
+    if (disabled) return;
+    onCapture(name);
+    setName("");
+  };
+
+  return (
+    <View style={styles.bar}>
+      <TextInput
+        style={styles.input}
+        value={name}
+        onChangeText={setName}
+        placeholder="Name this restore point…"
+        placeholderTextColor={tm.color.labelTertiary}
+        editable={!disabled}
+        onSubmitEditing={capture}
+        returnKeyType="done"
+        testID="time-machine-name-input"
+      />
+      <TouchableOpacity
+        style={[styles.button, disabled ? styles.buttonDisabled : null]}
+        onPress={capture}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityLabel="Capture restore point"
+        testID="time-machine-capture"
+      >
+        <Text style={styles.buttonText}>{busy ? "Capturing…" : "Capture"}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginHorizontal: tm.gutter,
+    backgroundColor: tm.color.group,
+    borderRadius: tm.radius.group,
+    paddingLeft: tm.textInset,
+    padding: 6,
+  },
+  input: {
+    flex: 1,
+    minWidth: 0,
+    color: tm.color.label,
+    fontSize: tm.font.row,
+    letterSpacing: tm.tracking.row,
+    // Zero out the platform chrome so the field reads as part of the card.
+    padding: 0,
+    backgroundColor: "transparent",
+  },
+  button: {
+    height: 34,
+    paddingHorizontal: 16,
+    borderRadius: tm.radius.pill,
+    backgroundColor: tm.color.accent,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  buttonDisabled: {
+    opacity: 0.4,
+  },
+  buttonText: {
+    color: tm.color.onAccent,
+    fontSize: tm.font.control,
+    fontWeight: "600",
+    letterSpacing: tm.tracking.control,
+  },
+});

package/src/components/list/RestoreOutcomeCard.tsx

@@ -0,0 +1,159 @@
+/**
+ * What the last restore did, shown ONLY when something went wrong.
+ *
+ * A clean restore says so with a toast and then gets out of the way — the
+ * restored app is the proof, and a wall of green ticks on top of the list
+ * every single time was noise. A restore that skipped or failed a source is
+ * the opposite: nothing else on screen would ever tell you, so it stays until
+ * dismissed.
+ */
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { X } from "@buoy-gg/shared-ui";
+import { tm } from "../../ui/tmTheme";
+import { timeMachineStore } from "../../store/timeMachineStore";
+import type { RestoreOutcome } from "../../store/timeMachineStore";
+
+const HIT = { top: 10, bottom: 10, left: 10, right: 10 };
+
+/**
+ * Did this restore do anything the app itself won't show you? Warnings alone
+ * don't count — "1 derived atom recomputes" is true of every restore and
+ * would put the card back on screen permanently.
+ */
+export function restoreNeedsAttention(outcome: RestoreOutcome): boolean {
+  if (Object.values(outcome.results).some((r) => !r.ok || r.skipped.length > 0))
+    return true;
+  const route = outcome.route;
+  return route?.status === "failed" || route?.status === "unavailable";
+}
+
+/** ✓ / ✕ / ↻ line — the glyph carries the meaning, the color reinforces it. */
+function ResultLine({
+  glyph,
+  text,
+  ok,
+}: {
+  glyph: string;
+  text: string;
+  ok: boolean;
+}) {
+  return (
+    <Text
+      style={[styles.line, { color: ok ? tm.color.accent : tm.color.warning }]}
+      numberOfLines={2}
+    >
+      <Text style={styles.glyph}>{glyph} </Text>
+      {text}
+    </Text>
+  );
+}
+
+function RouteResult({ route }: { route: NonNullable<RestoreOutcome["route"]> }) {
+  if (route.status === "navigated")
+    return <ResultLine glyph="✓" ok text={`route — ${route.href}`} />;
+  if (route.status === "deferred")
+    return (
+      <ResultLine glyph="↻" ok text={`route — ${route.href} after reload`} />
+    );
+  return (
+    <ResultLine
+      glyph="✕"
+      ok={false}
+      text={`route — ${route.error ?? route.status}`}
+    />
+  );
+}
+
+export function RestoreOutcomeCard({ outcome }: { outcome: RestoreOutcome }) {
+  const entries = Object.entries(outcome.results);
+  const reloading = outcome.mode === "reload" || outcome.willReload;
+
+  return (
+    <View style={styles.card}>
+      <View style={styles.headerRow}>
+        <Text style={styles.title} numberOfLines={1}>
+          Restored “{outcome.snapshotName}”{reloading ? " · reloading" : ""}
+        </Text>
+        <TouchableOpacity
+          onPress={() => timeMachineStore.clearLastOutcome()}
+          hitSlop={HIT}
+          accessibilityRole="button"
+          accessibilityLabel="Dismiss restore result"
+        >
+          <X size={13} color={tm.color.labelSecondary} />
+        </TouchableOpacity>
+      </View>
+
+      {entries.length === 0 && !outcome.route ? (
+        <Text style={styles.empty}>No sources restored.</Text>
+      ) : null}
+
+      {outcome.route ? <RouteResult route={outcome.route} /> : null}
+
+      {entries.map(([sourceId, result]) => (
+        <View key={sourceId}>
+          <ResultLine
+            glyph={result.ok ? "✓" : "✕"}
+            ok={result.ok}
+            text={`${sourceId} — applied ${result.applied}${
+              result.skipped.length > 0
+                ? `, skipped ${result.skipped.length}`
+                : ""
+            }`}
+          />
+          {result.skipped.slice(0, 3).map((skip) => (
+            <Text key={skip.id} style={styles.detail} numberOfLines={2}>
+              {skip.id}: {skip.reason}
+            </Text>
+          ))}
+          {result.warnings.slice(0, 3).map((warning) => (
+            <Text key={warning} style={styles.detail} numberOfLines={2}>
+              ⚠ {warning}
+            </Text>
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    marginHorizontal: tm.gutter,
+    marginTop: 12,
+    backgroundColor: tm.color.group,
+    borderRadius: tm.radius.group,
+    padding: 14,
+    gap: 4,
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    marginBottom: 2,
+  },
+  title: {
+    flex: 1,
+    color: tm.color.label,
+    fontSize: 15,
+    fontWeight: "600",
+    letterSpacing: tm.tracking.control,
+  },
+  line: {
+    fontSize: tm.font.footnote,
+    lineHeight: tm.font.footnote * 1.4,
+  },
+  glyph: {
+    fontWeight: "700",
+  },
+  detail: {
+    color: tm.color.labelTertiary,
+    fontSize: tm.font.mono,
+    lineHeight: tm.font.mono * 1.4,
+    paddingLeft: 14,
+  },
+  empty: {
+    color: tm.color.labelSecondary,
+    fontSize: tm.font.footnote,
+  },
+});

package/src/components/list/SnapshotRow.tsx

@@ -0,0 +1,155 @@
+/**
+ * One restore point in the list: what it is, when it was taken, how big it
+ * is, where it was captured — and the single action worth having at arm's
+ * reach. Tapping the row opens the restore preview; the pill restores now.
+ *
+ * The route is shown as context — where this state was true. Whether a
+ * restore also navigates there is decided in the restore preview, beside the
+ * other changes it is about to make.
+ *
+ * Duplicate and delete live behind a swipe. A destructive target beside
+ * "Restore" is a mis-tap that costs a snapshot, and the two-step gesture is
+ * deliberate enough — recovery is the undo the list offers after, not a
+ * dialog before. Renaming is NOT here: it belongs with the restore point's
+ * other settings, on the preview screen.
+ */
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { PillLabel } from "../../ui/primitives";
+import { SwipeActionsRow } from "../../ui/SwipeActionsRow";
+import { TM_MONO, tm } from "../../ui/tmTheme";
+import type { SnapshotMeta } from "../../store/snapshotVault";
+import { formatBytes, timeAgo } from "../format";
+
+/** "15h ago · 9.5 KB · 5 sources · skips 2" */
+function describe(meta: SnapshotMeta): string {
+  if (meta.baseline) return "Wipes to fresh install";
+  const parts = [
+    timeAgo(meta.createdAt),
+    formatBytes(meta.sizeBytes),
+    `${Object.keys(meta.sources).length} sources`,
+  ];
+  // A saved selection is worth stating on the row — this restore point no
+  // longer does the obvious thing, and one tap on RESTORE honors it.
+  if (meta.excludedKeys?.length) parts.push(`skips ${meta.excludedKeys.length}`);
+  else if (meta.scope?.length) parts.push(`scoped (${meta.scope.length})`);
+  return parts.join(" · ");
+}
+
+export function SnapshotRow({
+  meta,
+  busy,
+  onOpen,
+  onRestore,
+  onDelete,
+  onDuplicate,
+}: {
+  meta: SnapshotMeta;
+  busy: boolean;
+  /** Zero-arg: a data-taking `onPress` prop is invoked with the event by
+   *  Buoy MCP's tap_element, which crashes the row. */
+  onOpen: () => void;
+  onRestore: () => void;
+  onDelete: () => void;
+  onDuplicate: () => void;
+}) {
+  const testID = `time-machine-snap-${meta.id}`;
+
+  return (
+    <SwipeActionsRow
+      testID={testID}
+      actions={[
+        // "Dup" over "Copy": on a row full of text, "Copy" reads as
+        // copy-to-clipboard.
+        { label: "Dup", onPress: onDuplicate },
+        {
+          label: "Delete",
+          onPress: onDelete,
+          background: tm.color.danger,
+          color: tm.color.onDanger,
+        },
+      ]}
+    >
+      <TouchableOpacity
+        style={styles.row}
+        onPress={onOpen}
+        activeOpacity={0.7}
+        accessibilityRole="button"
+        accessibilityLabel={`${meta.name}. ${describe(meta)}. Open restore preview`}
+        testID={testID}
+      >
+        <View style={styles.text}>
+          <Text style={styles.name} numberOfLines={1}>
+            {meta.name}
+          </Text>
+          <Text style={styles.meta} numberOfLines={1}>
+            {describe(meta)}
+          </Text>
+          {meta.lastRestoredAt ? (
+            <Text style={styles.restored} numberOfLines={1}>
+              Restored {timeAgo(meta.lastRestoredAt)}
+            </Text>
+          ) : null}
+          {meta.route ? (
+            <Text style={styles.route} numberOfLines={1}>
+              {meta.route.href}
+            </Text>
+          ) : null}
+        </View>
+        <TouchableOpacity
+          onPress={onRestore}
+          disabled={busy}
+          style={busy ? styles.actionDisabled : null}
+          accessibilityRole="button"
+          accessibilityLabel={meta.baseline ? "Wipe and reload" : "Restore"}
+          testID={`${testID}-restore`}
+        >
+          <PillLabel
+            label={meta.baseline ? "Wipe" : "Restore"}
+            color={meta.baseline ? tm.color.danger : tm.color.accent}
+            background={meta.baseline ? tm.color.dangerSoft : tm.color.accentSoft}
+          />
+        </TouchableOpacity>
+      </TouchableOpacity>
+    </SwipeActionsRow>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingHorizontal: tm.textInset,
+    paddingVertical: 11,
+  },
+  text: {
+    flex: 1,
+    minWidth: 0,
+  },
+  name: {
+    color: tm.color.label,
+    fontSize: tm.font.row,
+    fontWeight: "600",
+    letterSpacing: tm.tracking.row,
+  },
+  meta: {
+    color: tm.color.labelSecondary,
+    fontSize: tm.font.footnote,
+    marginTop: 2,
+    fontVariant: ["tabular-nums"],
+  },
+  restored: {
+    color: tm.color.accent,
+    fontSize: tm.font.footnote,
+    marginTop: 2,
+  },
+  route: {
+    color: tm.color.labelTertiary,
+    fontFamily: TM_MONO,
+    fontSize: tm.font.mono,
+    marginTop: 4,
+  },
+  actionDisabled: {
+    opacity: 0.4,
+  },
+});

package/src/components/list/SourcesStrip.tsx

@@ -0,0 +1,124 @@
+/**
+ * Sources — one horizontally scrollable line of what a capture will pick up.
+ *
+ * Each source is its own tile (icon over name) rather than a count behind a
+ * disclosure: "is Redux wired?" is a glance question, and the answer should
+ * not cost a screen. A source that can't fully participate dims and carries a
+ * status dot, with the reason spelled out underneath the strip.
+ */
+import { ScrollView, StyleSheet, Text, View } from "react-native";
+import { tm } from "../../ui/tmTheme";
+import { sourceIcon, type SourceStatus } from "../sources";
+
+function statusDotColor(source: SourceStatus): string | null {
+  if (!source.canCapture) return tm.color.labelTertiary; // not detected
+  if (!source.canRestore) return tm.color.warning; // capture only
+  return null; // ready — nothing to flag
+}
+
+function SourceTile({ source }: { source: SourceStatus }) {
+  const Icon = sourceIcon(source.id);
+  const dot = statusDotColor(source);
+  return (
+    <View
+      style={styles.tile}
+      testID={`time-machine-source-${source.id}`}
+      accessibilityLabel={`${source.label}: ${
+        source.canCapture
+          ? source.canRestore
+            ? "capture and restore"
+            : "capture only"
+          : "not detected"
+      }`}
+    >
+      <View style={[styles.disc, !source.canCapture ? styles.discOff : null]}>
+        {/* Disc color in, so the icon's cut-outs blend with it. */}
+        <Icon size={26} bgColor={tm.color.fill} />
+        {dot ? <View style={[styles.dot, { backgroundColor: dot }]} /> : null}
+      </View>
+      <Text
+        style={[styles.label, !source.canCapture ? styles.labelOff : null]}
+        numberOfLines={1}
+      >
+        {source.label}
+      </Text>
+    </View>
+  );
+}
+
+export function SourcesStrip({ sources }: { sources: SourceStatus[] }) {
+  return (
+    <View style={styles.card}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.strip}
+        testID="time-machine-sources"
+      >
+        {sources.map((source) => (
+          <SourceTile key={source.id} source={source} />
+        ))}
+        {sources.length === 0 ? (
+          <Text style={styles.empty}>No state tools installed.</Text>
+        ) : null}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    marginHorizontal: tm.gutter,
+    backgroundColor: tm.color.group,
+    borderRadius: tm.radius.group,
+    paddingVertical: 12,
+  },
+  strip: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    paddingHorizontal: tm.textInset,
+    gap: 18,
+  },
+  tile: {
+    alignItems: "center",
+    gap: 7,
+    // Fixed width so the row reads as a grid, and wide enough for the
+    // longest source name on ONE line: a second line would be blank for
+    // every other tile while still setting the card's height.
+    width: 78,
+  },
+  disc: {
+    width: 50,
+    height: 50,
+    borderRadius: tm.radius.pill,
+    backgroundColor: tm.color.fill,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  discOff: {
+    opacity: 0.35,
+  },
+  dot: {
+    position: "absolute",
+    top: 2,
+    right: 2,
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    // Ring it in the card color so it reads as a badge, not a smudge.
+    borderWidth: 2,
+    borderColor: tm.color.group,
+  },
+  label: {
+    color: tm.color.labelSecondary,
+    fontSize: tm.font.mono,
+    textAlign: "center",
+  },
+  labelOff: {
+    color: tm.color.labelTertiary,
+  },
+  empty: {
+    color: tm.color.labelSecondary,
+    fontSize: tm.font.footnote,
+  },
+});