@buoy-gg/time-machine 7.0.28 → 7.0.30

package/src/components/list/SnapshotRow.tsx

@@ -1,155 +0,0 @@
-/**
- * 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

@@ -1,124 +0,0 @@
-/**
- * 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,
-  },
-});

package/src/components/list/UndoDeleteBar.tsx

@@ -1,76 +0,0 @@
-/**
- * The way back from a swipe-delete.
- *
- * Swipe-then-tap is deliberate, which is why there's no confirmation dialog —
- * but deliberate and recoverable are different properties, and a restore
- * point can stand for state that took ten minutes and a cooperative backend
- * to build. The record is held in memory until this bar expires.
- */
-import { useEffect } from "react";
-import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { tm } from "../../ui/tmTheme";
-
-/** Long enough to notice and react, short enough not to linger. */
-const WINDOW_MS = 8000;
-
-export function UndoDeleteBar({
-  name,
-  at,
-  onUndo,
-  onExpire,
-}: {
-  name: string;
-  /** Restarts the countdown when a second delete replaces the first. */
-  at: number;
-  onUndo: () => void;
-  onExpire: () => void;
-}) {
-  useEffect(() => {
-    const timer = setTimeout(onExpire, WINDOW_MS);
-    return () => clearTimeout(timer);
-    // `at` keyed rather than `onExpire`: a new delete must restart the clock.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [at]);
-
-  return (
-    <View style={styles.bar}>
-      <Text style={styles.text} numberOfLines={1}>
-        Deleted “{name}”
-      </Text>
-      <TouchableOpacity
-        onPress={onUndo}
-        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-        accessibilityRole="button"
-        testID="time-machine-undo-delete"
-      >
-        <Text style={styles.undo}>Undo</Text>
-      </TouchableOpacity>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  bar: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 12,
-    marginHorizontal: tm.gutter,
-    marginTop: 12,
-    minHeight: 46,
-    paddingHorizontal: tm.textInset,
-    backgroundColor: tm.color.group,
-    borderRadius: tm.radius.group,
-  },
-  text: {
-    flex: 1,
-    color: tm.color.labelSecondary,
-    fontSize: tm.font.control,
-    letterSpacing: tm.tracking.control,
-  },
-  undo: {
-    color: tm.color.accent,
-    fontSize: tm.font.control,
-    fontWeight: "600",
-    letterSpacing: tm.tracking.control,
-  },
-});

package/src/components/list/WipeAllRow.tsx

@@ -1,42 +0,0 @@
-/**
- * "Wipe All App State…" — the destructive utility, deliberately last, alone
- * in its own card and with no icon competing for attention.
- */
-import { StyleSheet, Text, TouchableOpacity } from "react-native";
-import { tm } from "../../ui/tmTheme";
-
-export function WipeAllRow({
-  disabled,
-  onWipe,
-}: {
-  disabled: boolean;
-  onWipe: () => void;
-}) {
-  return (
-    <TouchableOpacity
-      style={[styles.row, disabled ? styles.disabled : null]}
-      onPress={onWipe}
-      disabled={disabled}
-      accessibilityRole="button"
-      testID="time-machine-wipe-all"
-    >
-      <Text style={styles.label}>Wipe All App State…</Text>
-    </TouchableOpacity>
-  );
-}
-
-const styles = StyleSheet.create({
-  row: {
-    minHeight: tm.rowMinHeight,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  disabled: {
-    opacity: 0.4,
-  },
-  label: {
-    color: tm.color.danger,
-    fontSize: tm.font.row,
-    letterSpacing: tm.tracking.row,
-  },
-});

package/src/components/preview/ItemDiffPanel.tsx

@@ -1,77 +0,0 @@
-/**
- * One preview item's before/after, rendered INLINE under its row rather than
- * on a screen of its own — "what changed in this key" is a glance question,
- * and losing the list to answer it costs you the place you were reading.
- *
- * Split view only, with no view switcher. Side-by-side is the shape that
- * answers the question here ("what is it now, what will it become"), and
- * inside a list row the segmented control cost more vertical space than the
- * diff it was switching.
- *
- * The render-layer viewer only handles plain JSON faithfully, so both sides
- * pass through toDiffable (Dates→ISO, Maps→objects, BigInt→"1n", cycles→
- * "[Circular]") and the pair is memoized ONCE per item — the storage tool's
- * fix for the fresh-identity-every-render trap that redux/zustand still have.
- *
- * No scroller of its own: this sits inside the preview's FlatList, so the
- * viewer renders at natural height with `scrollEnabled={false}` (the storage
- * matched-pair contract).
- */
-import { useMemo } from "react";
-import { StyleSheet, Text, View } from "react-native";
-import type { StateSnapshotPreviewItem } from "@buoy-gg/shared-ui";
-import {
-  ABSENT_VALUE,
-  ThemedSplitView,
-  devToolsDefaultTheme,
-  toDiffable,
-} from "@buoy-gg/shared-ui/dataViewer";
-import { tm } from "../../ui/tmTheme";
-
-const EMPTY: unknown[] = [];
-
-export function ItemDiffPanel({ item }: { item: StateSnapshotPreviewItem }) {
-  // ABSENT_VALUE keeps added/removed reading as pure additions/removals
-  // instead of diffs against the literal "null".
-  const { oldValue, newValue } = useMemo(
-    () => ({
-      oldValue:
-        item.verdict === "added" ? ABSENT_VALUE : toDiffable(item.oldValue),
-      newValue:
-        item.verdict === "removed" ? ABSENT_VALUE : toDiffable(item.newValue),
-    }),
-    [item]
-  );
-
-  return (
-    <View style={styles.panel}>
-      {item.reason ? <Text style={styles.reason}>⚠ {item.reason}</Text> : null}
-      <ThemedSplitView
-        oldValue={oldValue}
-        newValue={newValue}
-        differences={EMPTY}
-        theme={devToolsDefaultTheme}
-        scrollEnabled={false}
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  // Same fill as the rows above it: this is part of the card, not a thing
-  // floating under it.
-  panel: {
-    // Only a token indent: the viewer lays values out at their natural width
-    // and a 51pt inset (matching the checkbox column) clipped long numbers.
-    paddingLeft: 16,
-    paddingRight: 12,
-    paddingTop: 10,
-    paddingBottom: 14,
-    gap: 10,
-    backgroundColor: tm.color.group,
-  },
-  reason: {
-    color: tm.color.warning,
-    fontSize: tm.font.footnote,
-  },
-});

package/src/components/preview/PreviewFlow.tsx

@@ -1,70 +0,0 @@
-/**
- * The preview screen, wired to the store — the restore leg (baseline
- * confirmation, the route prompt, landing back on the list) lives here so
- * RestorePreviewScreen stays presentation.
- *
- * Kept apart from the restore-point list so each screen mounts and unmounts
- * as a whole tree — the router in ../TimeMachineBody picks one, never swaps
- * branches inside a live tree. (Item diffs are NOT a screen: they expand
- * inline inside the preview's list.)
- */
-import { timeMachineStore } from "../../store/timeMachineStore";
-import type {
-  PreviewSideRef,
-  PreviewState,
-} from "../../store/timeMachineStore";
-import type { SnapshotMeta } from "../../store/snapshotVault";
-import { confirmDestructive } from "../confirm";
-import { RestorePreviewScreen } from "./RestorePreviewScreen";
-
-function snapshotFor(
-  ref: PreviewSideRef,
-  snapshots: SnapshotMeta[]
-): SnapshotMeta | undefined {
-  return ref === "current"
-    ? undefined
-    : snapshots.find((s) => s.id === ref.snapshotId);
-}
-
-export function PreviewScreen({
-  preview,
-  snapshots,
-  busy,
-  onClose,
-}: {
-  preview: PreviewState;
-  snapshots: SnapshotMeta[];
-  busy: boolean;
-  onClose: () => void;
-}) {
-  const rightMeta = snapshotFor(preview.right, snapshots);
-
-  const restore = (mode: "live" | "reload", excludeKeys?: string[]) => {
-    if (!rightMeta || busy) return;
-    if (rightMeta.baseline) {
-      confirmDestructive(
-        "Restore fresh install?",
-        "This wipes all app storage and reloads the app.",
-        "Wipe & reload",
-        () => void timeMachineStore.restore(rightMeta.id, "reload")
-      );
-      return;
-    }
-    // Land back on the list, where the outcome card reports the results —
-    // the preview's diff is stale the moment restore runs. Whether the route
-    // comes back is the restore point's own setting, toggled on its row.
-    void timeMachineStore
-      .restore(rightMeta.id, mode, excludeKeys)
-      .then(onClose);
-  };
-
-  return (
-    <RestorePreviewScreen
-      preview={preview}
-      snapshots={snapshots}
-      busy={busy}
-      onBack={onClose}
-      onRestore={restore}
-    />
-  );
-}

package/src/components/preview/RestorePointNameRow.tsx

@@ -1,80 +0,0 @@
-/**
- * The restore point's name, editable in place.
- *
- * Renaming lives on the preview rather than behind a swipe on the list: the
- * list is for picking one, and you rarely know a name is wrong until you're
- * looking at what the point actually contains.
- *
- * Commits on blur as well as on return — tapping away from a field you have
- * just typed into should keep the typing. Finder and iOS both treat leaving
- * as accepting, and silently discarding an edit is the one outcome nobody
- * wants.
- */
-import { useEffect, useState } from "react";
-import { StyleSheet, Text, TextInput, View } from "react-native";
-import { tm } from "../../ui/tmTheme";
-
-export function RestorePointNameRow({
-  name,
-  onRename,
-}: {
-  name: string;
-  onRename: (name: string) => void;
-}) {
-  const [draft, setDraft] = useState(name);
-
-  // A rename from anywhere else (MCP, the desktop) should show up here.
-  useEffect(() => setDraft(name), [name]);
-
-  const commit = () => {
-    const trimmed = draft.trim();
-    if (!trimmed) {
-      setDraft(name); // an empty name would make the row unidentifiable
-      return;
-    }
-    if (trimmed !== name) onRename(trimmed);
-  };
-
-  return (
-    <View style={styles.row}>
-      <Text style={styles.label}>Name</Text>
-      <TextInput
-        style={styles.input}
-        value={draft}
-        onChangeText={setDraft}
-        onSubmitEditing={commit}
-        onBlur={commit}
-        returnKeyType="done"
-        selectTextOnFocus
-        accessibilityLabel="Restore point name"
-        testID="tm-preview-name"
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 14,
-    minHeight: tm.rowMinHeight,
-    paddingHorizontal: tm.textInset,
-  },
-  label: {
-    color: tm.color.labelSecondary,
-    fontSize: tm.font.row,
-    letterSpacing: tm.tracking.row,
-  },
-  input: {
-    flex: 1,
-    minWidth: 0,
-    color: tm.color.label,
-    fontSize: tm.font.row,
-    fontWeight: "600",
-    letterSpacing: tm.tracking.row,
-    textAlign: "right",
-    padding: 0,
-    backgroundColor: "transparent",
-  },
-});