@buoy-gg/time-machine 7.0.28 → 7.0.30

package/src/components/HeaderReloadButton.tsx

@@ -1,45 +0,0 @@
-/**
- * Labeled "RELOAD APP" header action — the one reload affordance in the tool.
- * Plain JS-bundle reload (no restore): in-memory state rebuilds from whatever
- * is persisted. Registered as the preset's default headerActions, so it shows
- * on every screen unless a screen overrides the header actions.
- */
-import { StyleSheet, Text, TouchableOpacity } from "react-native";
-import { RefreshCw, night, scheduleReloadApp } from "@buoy-gg/shared-ui";
-
-export function HeaderReloadButton() {
-  const onPress = () => {
-    try {
-      scheduleReloadApp({ reason: "buoy time-machine reload app" });
-    } catch {
-      // No reload mechanism available (bare production build) — nothing to do.
-    }
-  };
-  return (
-    <TouchableOpacity
-      style={styles.button}
-      onPress={onPress}
-      hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-      accessibilityLabel="Reload app"
-      accessibilityRole="button"
-      testID="time-machine-reload-app"
-    >
-      <RefreshCw size={12} color={night.color.textSecondary} />
-      <Text style={styles.label}>RELOAD APP</Text>
-    </TouchableOpacity>
-  );
-}
-
-const styles = StyleSheet.create({
-  button: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    padding: 4,
-  },
-  label: {
-    color: night.color.textSecondary,
-    fontSize: 12,
-    fontWeight: "600",
-  },
-});

package/src/components/TimeMachineBody.tsx

@@ -1,237 +0,0 @@
-/**
- * Time Machine body — the screen router plus the restore-point list.
- *
- * Screens: list → preview. Each is its own component that mounts and
- * unmounts whole (no branching inside a single tree), and each owns its own
- * scrolling — the host must NOT wrap this in a scroll view, or the preview's
- * virtualized FlatList is defeated. Item diffs expand inline in that list
- * rather than being a third screen.
- *
- * The list follows the grouped-inset surface in ../ui: capture bar, the
- * Sources strip, one card of restore points with swipe-to-delete, and the
- * app-wide wipe kept last and understated.
- */
-import { useState } from "react";
-import { ScrollView, StyleSheet, Text, View } from "react-native";
-import { useSafeAreaInsets, useLimit } from "@buoy-gg/shared-ui";
-import { useToolHost } from "@buoy-gg/core";
-import { useIsPro } from "@buoy-gg/license";
-import { useTimeMachineState } from "../hooks/useTimeMachine";
-import { timeMachineStore } from "../store/timeMachineStore";
-import type { SnapshotMeta } from "../store/snapshotVault";
-import { Footnote, Group, SectionLabel } from "../ui/primitives";
-import { tm } from "../ui/tmTheme";
-import { useSourceStatuses, type SourceStatus } from "./sources";
-import { confirmDestructive } from "./confirm";
-import { CaptureBar } from "./list/CaptureBar";
-import {
-  RestoreOutcomeCard,
-  restoreNeedsAttention,
-} from "./list/RestoreOutcomeCard";
-import { SnapshotRow } from "./list/SnapshotRow";
-import { UndoDeleteBar } from "./list/UndoDeleteBar";
-import { SourcesStrip } from "./list/SourcesStrip";
-import { WipeAllRow } from "./list/WipeAllRow";
-import { PreviewScreen } from "./preview/PreviewFlow";
-
-type Screen = { kind: "list" } | { kind: "preview" };
-
-export function TimeMachineBody() {
-  const [screen, setScreen] = useState<Screen>({ kind: "list" });
-  const { snapshots, busy, preview } = useTimeMachineState();
-  const sources = useSourceStatuses();
-
-  const backToList = () => {
-    timeMachineStore.clearPreview();
-    setScreen({ kind: "list" });
-  };
-
-  // The preview can't render without a built diff (clearPreview races a
-  // back-navigation) — fall through to the list rather than an empty shell.
-  if (screen.kind === "preview" && preview)
-    return (
-      <PreviewScreen
-        preview={preview}
-        snapshots={snapshots}
-        busy={busy !== null}
-        onClose={backToList}
-      />
-    );
-
-  return (
-    <RestorePointList
-      sources={sources}
-      onOpenPreview={(meta) => {
-        void timeMachineStore.buildPreview({ snapshotId: meta.id });
-        setScreen({ kind: "preview" });
-      }}
-    />
-  );
-}
-
-function RestorePointList({
-  sources,
-  onOpenPreview,
-}: {
-  sources: SourceStatus[];
-  onOpenPreview: (meta: SnapshotMeta) => void;
-}) {
-  const { snapshots, hasLoaded, busy, lastOutcome, recentlyDeleted } =
-    useTimeMachineState();
-  const isPro = useIsPro();
-  const snapshotLimit = useLimit("timeMachine.snapshots");
-  const host = useToolHost();
-  const insets = useSafeAreaInsets({ minBottom: 16 });
-
-  // Header search (when hosted by the core shell) filters the list.
-  const query = host.search.trim().toLowerCase();
-  const visible = query
-    ? snapshots.filter((s) => s.name.toLowerCase().includes(query))
-    : snapshots;
-
-  // Infinity for Pro, so this is simply false for them.
-  const atCaptureLimit = snapshots.length >= snapshotLimit;
-  const captureDisabled = busy !== null || atCaptureLimit;
-
-  /**
-   * Restoring is the last thing anyone wants from this screen, so the tool
-   * gets out of the way the moment it worked — with no toast and no banner.
-   * The restored app IS the confirmation, and anything announcing it is one
-   * more thing to dismiss on a flow people run dozens of times an hour.
-   *
-   * It MINIMIZES rather than closes: the list, the search and the screen you
-   * were on all survive, and coming back is one tap on the dock. A partial
-   * restore stays open instead, because the outcome card is the only place
-   * the per-source failures are reported.
-   */
-  const restore = (meta: SnapshotMeta) => {
-    if (busy) return;
-    if (meta.baseline) {
-      confirmDestructive(
-        "Restore fresh install?",
-        "This wipes all app storage and reloads the app.",
-        "Wipe & reload",
-        () => void timeMachineStore.restore(meta.id, "reload")
-      );
-      return;
-    }
-    void timeMachineStore.restore(meta.id, "live").then((outcome) => {
-      const clean = Object.values(outcome.results).every((r) => r.ok);
-      if (!clean || outcome.willReload) return;
-      host.minimize();
-    });
-  };
-
-  return (
-    <ScrollView
-      style={styles.fill}
-      contentContainerStyle={[styles.content, { paddingBottom: insets.bottom }]}
-    >
-      {/* Only when the restore did something the app itself won't show you. */}
-      {lastOutcome && restoreNeedsAttention(lastOutcome) ? (
-        <RestoreOutcomeCard outcome={lastOutcome} />
-      ) : null}
-
-      {recentlyDeleted ? (
-        <UndoDeleteBar
-          name={recentlyDeleted.stored.meta.name}
-          at={recentlyDeleted.at}
-          onUndo={() => void timeMachineStore.undoDelete()}
-          onExpire={() => timeMachineStore.clearRecentlyDeleted()}
-        />
-      ) : null}
-
-      <View>
-        <CaptureBar
-          disabled={captureDisabled}
-          busy={busy === "capture"}
-          onCapture={(name) => void timeMachineStore.capture(name)}
-        />
-      </View>
-      {atCaptureLimit ? (
-        <Footnote tone="warning">
-          Free plan keeps {snapshotLimit} restore points. Upgrade to Pro
-          for unlimited snapshots.
-        </Footnote>
-      ) : null}
-
-      <SectionLabel>Sources</SectionLabel>
-      <SourcesStrip sources={sources} />
-      {/* A source that can't fully participate says why, right where its
-          tile is — the strip only has room for the dot. */}
-      {sources
-        .filter((s) => s.detail && !(s.canCapture && s.canRestore))
-        .map((s) => (
-          <Footnote key={s.id}>
-            {s.label}: {s.detail}
-          </Footnote>
-        ))}
-      <SectionLabel>Restore Points</SectionLabel>
-      <Group>
-        {visible.map((meta) => (
-          <SnapshotRow
-            key={meta.id}
-            meta={meta}
-            busy={busy !== null}
-            onOpen={() => onOpenPreview(meta)}
-            onRestore={() => restore(meta)}
-            onDelete={() => void timeMachineStore.delete(meta.id)}
-            onDuplicate={() => void timeMachineStore.duplicate(meta.id)}
-          />
-        ))}
-        {visible.length === 0 ? (
-          <Text style={styles.empty}>
-            {!hasLoaded
-              ? "Loading restore points…"
-              : snapshots.length > 0
-                ? "No restore point matches that name."
-                : "Set up the state you want to come back to, then capture it."}
-          </Text>
-        ) : null}
-      </Group>
-      {visible.length > 0 ? (
-        <Footnote>Swipe a restore point to rename, copy or delete it.</Footnote>
-      ) : null}
-
-      <View style={styles.spacer} />
-
-      <Group>
-        <WipeAllRow
-          disabled={busy !== null}
-          onWipe={() =>
-            confirmDestructive(
-              "Wipe all app state?",
-              "This deletes all app storage and reloads the app — like a fresh install.",
-              "Wipe & reload",
-              () => void timeMachineStore.wipeAll()
-            )
-          }
-        />
-      </Group>
-      <Footnote centered>
-        Deletes all app storage and reloads — like a fresh install.
-      </Footnote>
-    </ScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  fill: {
-    flex: 1,
-    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
-    backgroundColor: "transparent",
-  },
-  content: {
-    paddingTop: 14,
-  },
-  empty: {
-    color: tm.color.labelSecondary,
-    fontSize: tm.font.footnote,
-    lineHeight: tm.font.footnote * 1.4,
-    paddingHorizontal: tm.textInset,
-    paddingVertical: 16,
-  },
-  spacer: {
-    height: 24,
-  },
-});

package/src/components/TimeMachineModal.tsx

@@ -1,75 +0,0 @@
-/**
- * TimeMachineModal — bottom-sheet wrapper rendered by FloatingDevTools when
- * the Time Machine tool is opened. TimeMachineToolView is the inline variant
- * for Buoy Desktop.
- */
-import { StyleSheet, Text, View } from "react-native";
-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 {
-  visible: boolean;
-  onClose: () => void;
-  onBack?: () => void;
-  onMinimize?: (modalState: ModalState) => void;
-  persistenceKey?: string;
-}
-
-function Header() {
-  return (
-    <View style={styles.header}>
-      <Text style={styles.headerTitle}>Time Machine</Text>
-      <Text style={styles.headerSubtitle}>Snapshot & restore app state</Text>
-    </View>
-  );
-}
-
-export function TimeMachineModal({
-  visible,
-  onClose,
-  onBack: _onBack,
-  onMinimize,
-  persistenceKey,
-}: TimeMachineModalProps) {
-  return (
-    <JsModal
-      visible={visible}
-      onClose={onClose}
-      onMinimize={onMinimize}
-      persistenceKey={persistenceKey}
-      header={{
-        showToggleButton: true,
-        customContent: <Header />,
-      }}
-      enablePersistence
-      initialMode="bottomSheet"
-      disableScrollWrapper
-    >
-      <TimeMachineBody />
-    </JsModal>
-  );
-}
-
-/** Inline variant (no modal chrome) — used by Buoy Desktop. */
-export function TimeMachineToolView() {
-  return <TimeMachineBody />;
-}
-
-const styles = StyleSheet.create({
-  header: {
-    paddingHorizontal: 4,
-    gap: 2,
-  },
-  headerTitle: {
-    color: tm.color.label,
-    fontSize: 22,
-    fontWeight: "700",
-    letterSpacing: 0.3,
-  },
-  headerSubtitle: {
-    color: tm.color.labelSecondary,
-    fontSize: tm.font.footnote,
-  },
-});

package/src/components/confirm.ts

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

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

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

@@ -1,159 +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,
-}: {
-  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,
-  },
-});