@buoy-gg/time-machine 7.0.29 → 7.0.31

package/src/components/list/RestoreOutcomeCard.tsx

@@ -1,181 +0,0 @@
-/**
- * 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,
-  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}
-    </Text>
-  );
-}
-
-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}`}
-        testID={ROUTE_TEST_ID}
-      />
-    );
-  if (route.status === "deferred")
-    return (
-      <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}
-    />
-  );
-}
-
-export function RestoreOutcomeCard({ outcome }: { outcome: RestoreOutcome }) {
-  const entries = Object.entries(outcome.results);
-  const reloading = outcome.mode === "reload" || outcome.willReload;
-
-  return (
-    <View style={styles.card} testID="time-machine-outcome">
-      <View style={styles.headerRow}>
-        <Text style={styles.title} numberOfLines={1} testID="time-machine-outcome-title">
-          Restored “{outcome.snapshotName}”{reloading ? " · reloading" : ""}
-        </Text>
-        <TouchableOpacity
-          onPress={() => timeMachineStore.clearLastOutcome()}
-          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} testID="time-machine-outcome-empty">
-          No sources restored.
-        </Text>
-      ) : null}
-
-      {outcome.route ? <RouteResult route={outcome.route} /> : null}
-
-      {entries.map(([sourceId, result]) => (
-        <View key={sourceId}>
-          <ResultLine
-            testID={`time-machine-outcome-${sourceId}`}
-            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

@@ -1,164 +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} testID={`${testID}-name`}>
-            {meta.name}
-          </Text>
-          <Text style={styles.meta} numberOfLines={1} testID={`${testID}-meta`}>
-            {describe(meta)}
-          </Text>
-          {meta.lastRestoredAt ? (
-            <Text
-              style={styles.restored}
-              numberOfLines={1}
-              testID={`${testID}-restored`}
-            >
-              Restored {timeAgo(meta.lastRestoredAt)}
-            </Text>
-          ) : null}
-          {meta.route ? (
-            <Text
-              style={styles.route}
-              numberOfLines={1}
-              testID={`${testID}-route`}
-            >
-              {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
-            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}
-          />
-        </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,127 +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}
-        testID={`time-machine-source-${source.id}-label`}
-      >
-        {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} testID="time-machine-sources-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} testID="time-machine-undo-bar">
-      <Text style={styles.text} numberOfLines={1} testID="time-machine-undo-text">
-        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,83 +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,
-  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(
-    () => ({
-      oldValue:
-        item.verdict === "added" ? ABSENT_VALUE : toDiffable(item.oldValue),
-      newValue:
-        item.verdict === "removed" ? ABSENT_VALUE : toDiffable(item.newValue),
-    }),
-    [item]
-  );
-
-  return (
-    <View style={styles.panel} testID={testID}>
-      {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,
-  },
-});