@morphika/andami 0.2.8 → 0.2.10

package/components/admin/backups/BackupsPage.tsx

@@ -0,0 +1,1581 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { csrfHeaders } from "../../../lib/csrf-client";
+import { formatDate, formatBytes } from "../../../lib/format-utils";
+import { getSiteConfig } from "../../../lib/config";
+import { getMimeType } from "../../../lib/storage/types";
+import type { BackupManifest, BackupStatus } from "../../../lib/backup/manifest";
+
+// ============================================
+// Types
+// ============================================
+
+/** Shape returned by GET /api/admin/backups/prepare-export (V2) */
+interface ExportData {
+  manifest: BackupManifest;
+  documents: {
+    pages: Record<string, unknown>[];
+    siteSettings: Record<string, unknown> | null;
+    siteStyles: Record<string, unknown> | null;
+    assetRegistry: Record<string, unknown> | null;
+    customSections: Record<string, unknown>[];
+  };
+  assets: {
+    r2_connected: boolean;
+    public_url: string | null;
+    files: { key: string; size: number }[];
+  };
+}
+
+/** A presigned upload URL pre-generated by the server for a single asset key. */
+interface PresignedUploadUrl {
+  key: string;
+  uploadUrl: string;
+  contentType: string;
+}
+
+/** Shape returned by POST /api/admin/backups/restore-data (V2) */
+interface RestoreDataResult {
+  success: boolean;
+  sanity: {
+    wiped: Record<string, number>;
+    restored: Record<string, number>;
+  };
+  r2_wiped: number | null;
+  /**
+   * Presigned PUT URLs (one per asset key) — the browser uploads directly
+   * to R2 without invoking Vercel per file. Undefined when R2 isn't
+   * connected or the request didn't include any assets.
+   */
+  upload_urls?: PresignedUploadUrl[];
+  /** TTL of the presigned URLs, in seconds. */
+  upload_ttl_seconds?: number;
+  duration_ms: number;
+}
+
+// ============================================
+// SVG Icons
+// ============================================
+
+function BackupIcon({ size = 20 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="#3b82f6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
+      <path d="M12 12v9" />
+      <path d="m16 16-4-4-4 4" />
+    </svg>
+  );
+}
+
+function RestoreIcon({ size = 20 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
+      <path d="M12 12v9" />
+      <path d="m8 17 4 4 4-4" />
+    </svg>
+  );
+}
+
+function SpinnerIcon({ size = 16 }: { size?: number }) {
+  return (
+    <svg className="animate-spin" width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+    </svg>
+  );
+}
+
+function CheckIcon({ size = 16 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}
+
+function AlertIcon({ size = 16 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+      <line x1="12" y1="9" x2="12" y2="13" />
+      <line x1="12" y1="17" x2="12.01" y2="17" />
+    </svg>
+  );
+}
+
+function UploadIcon({ size = 32 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <polyline points="17 8 12 3 7 8" />
+      <line x1="12" y1="3" x2="12" y2="15" />
+    </svg>
+  );
+}
+
+// ============================================
+// Helpers
+// ============================================
+
+/** Total document count from a BackupStatus */
+function totalDocs(status: BackupStatus): number {
+  const c = status.document_counts;
+  return (
+    c.pages +
+    c.custom_sections +
+    (c.site_settings ? 1 : 0) +
+    (c.site_styles ? 1 : 0) +
+    (c.asset_registry ? 1 : 0)
+  );
+}
+
+/** Total document count from a BackupManifest */
+function totalManifestDocs(m: BackupManifest): number {
+  const d = m.documents;
+  return d.pages + d.custom_sections + d.site_settings + d.site_styles + d.asset_registry;
+}
+
+// ============================================
+// Concurrency pool — download/upload assets in parallel
+// ============================================
+
+interface PoolProgress {
+  completed: number;
+  total: number;
+  bytesTransferred: number;
+  /**
+   * L-8: total expected size in bytes across all files (when known).
+   * The upload flow sets this from the ZIP entry `uncompressedSize` stats
+   * so the progress bar can be weighted by bytes instead of file count —
+   * which is much smoother when a handful of large files dominate the
+   * upload (e.g. a 200 MB video alongside 50 tiny thumbnails).
+   *
+   * `0` means byte totals aren't available and the UI should fall back to
+   * file-count progress. The download flow always populates this because
+   * prepare-export returns sizes alongside keys.
+   */
+  totalBytes: number;
+  failed: string[];
+}
+
+/**
+ * Download assets from R2 CDN into a JSZip instance with a concurrency pool.
+ * Each file is fetched directly from the R2 public URL — no Vercel traffic.
+ */
+async function downloadAssetsToZip(
+  files: { key: string; size: number }[],
+  publicUrl: string,
+  zip: import("jszip"),
+  onProgress: (p: PoolProgress) => void,
+  abortSignal: AbortSignal,
+  concurrency = 6
+): Promise<PoolProgress> {
+  const progress: PoolProgress = {
+    completed: 0,
+    total: files.length,
+    bytesTransferred: 0,
+    // L-8: use the sizes from prepare-export so the bar reflects byte
+    // progress, not file count. Falls back gracefully to 0 when sizes
+    // aren't available (the caller then shows a count-based bar).
+    totalBytes: files.reduce((s, f) => s + (f.size || 0), 0),
+    failed: [],
+  };
+
+  const queue = [...files];
+
+  async function worker() {
+    while (queue.length > 0) {
+      if (abortSignal.aborted) return;
+
+      const file = queue.shift()!;
+      try {
+        const res = await fetch(`${publicUrl.replace(/\/$/, "")}/${file.key}`, {
+          signal: abortSignal,
+        });
+        if (res.ok) {
+          const blob = await res.blob();
+          zip.file(`assets/${file.key}`, blob);
+          progress.bytesTransferred += blob.size;
+        } else {
+          progress.failed.push(file.key);
+        }
+      } catch (err) {
+        if (abortSignal.aborted) return;
+        progress.failed.push(file.key);
+      }
+      progress.completed++;
+      onProgress({ ...progress });
+    }
+  }
+
+  await Promise.all(Array.from({ length: Math.min(concurrency, files.length) }, () => worker()));
+  return progress;
+}
+
+/**
+ * Upload assets to R2 using presigned PUT URLs that were pre-generated
+ * server-side (see `/api/admin/backups/restore-data`). This keeps Vercel
+ * out of the per-asset hot path — the restore endpoint signs every URL
+ * in one invocation, then the browser PUTs directly to R2.
+ *
+ * Each failed upload is retried up to `maxRetries` times with exponential
+ * backoff. Transient R2 or network errors no longer silently "eat" files.
+ */
+async function uploadAssetsFromZip(
+  zip: import("jszip"),
+  presigned: PresignedUploadUrl[],
+  onProgress: (p: PoolProgress) => void,
+  abortSignal: AbortSignal,
+  concurrency = 6,
+  maxRetries = 3
+): Promise<PoolProgress> {
+  // Map by key for O(1) lookup
+  const urlByKey = new Map<string, PresignedUploadUrl>();
+  for (const p of presigned) urlByKey.set(p.key, p);
+
+  // Collect all asset entries from the ZIP. We also read each entry's
+  // uncompressed size from JSZip's internal `_data` stats so L-8 can
+  // weight the progress bar by bytes rather than file count. JSZip does
+  // not expose a typed accessor for this, so we cast carefully.
+  const assetEntries: { key: string; zipPath: string; size: number }[] = [];
+  zip.forEach((relativePath: string, zipEntry) => {
+    if (relativePath.startsWith("assets/") && !relativePath.endsWith("/")) {
+      const key = relativePath.replace(/^assets\//, "");
+      const size =
+        (zipEntry as unknown as { _data?: { uncompressedSize?: number } })._data
+          ?.uncompressedSize ?? 0;
+      assetEntries.push({ key, zipPath: relativePath, size });
+    }
+  });
+
+  const progress: PoolProgress = {
+    completed: 0,
+    total: assetEntries.length,
+    bytesTransferred: 0,
+    // L-8: sum of uncompressed sizes — may be 0 if JSZip couldn't read
+    // the stats (extremely old ZIPs). In that case `ProgressBar` falls
+    // back to file-count mode.
+    totalBytes: assetEntries.reduce((s, e) => s + (e.size || 0), 0),
+    failed: [],
+  };
+
+  if (assetEntries.length === 0) return progress;
+
+  const queue = [...assetEntries];
+
+  async function uploadOne(
+    entry: { key: string; zipPath: string }
+  ): Promise<{ ok: true; bytes: number } | { ok: false }> {
+    const zipFile = zip.file(entry.zipPath);
+    if (!zipFile) return { ok: false };
+
+    const blob = await zipFile.async("blob");
+    const presignedEntry = urlByKey.get(entry.key);
+    if (!presignedEntry) return { ok: false };
+
+    // Content-Type MUST match what the server signed with, otherwise R2
+    // rejects with 403. We trust the server's contentType and fall back
+    // to a local lookup if the field is missing.
+    const contentType =
+      presignedEntry.contentType || getMimeType(entry.key);
+
+    const putRes = await fetch(presignedEntry.uploadUrl, {
+      method: "PUT",
+      headers: { "Content-Type": contentType },
+      body: blob,
+      signal: abortSignal,
+    });
+
+    if (putRes.ok) {
+      return { ok: true, bytes: blob.size };
+    }
+    return { ok: false };
+  }
+
+  async function uploadWithRetry(
+    entry: { key: string; zipPath: string }
+  ): Promise<{ ok: boolean; bytes: number }> {
+    for (let attempt = 0; attempt <= maxRetries; attempt++) {
+      if (abortSignal.aborted) return { ok: false, bytes: 0 };
+      try {
+        const result = await uploadOne(entry);
+        if (result.ok) return { ok: true, bytes: result.bytes };
+      } catch (err) {
+        if (abortSignal.aborted) return { ok: false, bytes: 0 };
+        // Fallthrough to retry below.
+      }
+      if (attempt < maxRetries) {
+        // Exponential backoff with jitter: 400ms, 900ms, 2000ms (approx)
+        const delayMs = 400 * Math.pow(2, attempt) + Math.random() * 200;
+        await new Promise<void>((resolve) => {
+          const timer = setTimeout(() => resolve(), delayMs);
+          // If aborted during backoff, clear the timer and bail out.
+          const onAbort = () => {
+            clearTimeout(timer);
+            resolve();
+          };
+          if (abortSignal.aborted) {
+            onAbort();
+          } else {
+            abortSignal.addEventListener("abort", onAbort, { once: true });
+          }
+        });
+      }
+    }
+    return { ok: false, bytes: 0 };
+  }
+
+  async function worker() {
+    while (queue.length > 0) {
+      if (abortSignal.aborted) return;
+
+      const entry = queue.shift()!;
+      try {
+        const result = await uploadWithRetry(entry);
+        if (result.ok) {
+          progress.bytesTransferred += result.bytes;
+        } else {
+          progress.failed.push(entry.key);
+        }
+      } catch (err) {
+        if (abortSignal.aborted) return;
+        progress.failed.push(entry.key);
+      }
+      progress.completed++;
+      onProgress({ ...progress });
+    }
+  }
+
+  await Promise.all(Array.from({ length: Math.min(concurrency, assetEntries.length) }, () => worker()));
+  return progress;
+}
+
+// ============================================
+// Progress Bar Component
+// ============================================
+
+function ProgressBar({
+  phase,
+  progress,
+  totalFiles,
+  bytesTransferred,
+  totalBytes,
+  failedCount,
+}: {
+  phase: string;
+  /**
+   * Fallback count-based progress in the 0–100 range. Used when
+   * `totalBytes` is 0 (e.g. very old ZIPs where JSZip can't read the
+   * uncompressed size). When `totalBytes > 0` the bar uses bytes instead
+   * and `progress` is ignored — this keeps the ProgressBar contract
+   * backward-compatible with older callers.
+   */
+  progress: number;
+  totalFiles?: number;
+  bytesTransferred?: number;
+  /**
+   * L-8: total expected bytes across all files. When > 0, the progress
+   * bar is weighted by bytes transferred — much smoother when a handful
+   * of large files dominate the transfer.
+   */
+  totalBytes?: number;
+  failedCount?: number;
+}) {
+  // L-8: prefer byte-weighted progress when we have total bytes; fall
+  // back to the count-based value otherwise.
+  const useBytes = totalBytes !== undefined && totalBytes > 0 && bytesTransferred !== undefined;
+  const displayProgress = useBytes
+    ? Math.min(100, (bytesTransferred! / totalBytes!) * 100)
+    : progress;
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between text-xs">
+        <span className="text-neutral-600 font-medium">{phase}</span>
+        {totalFiles !== undefined && totalFiles > 0 && (
+          <span className="text-neutral-400">
+            {Math.round(displayProgress)}%
+            {bytesTransferred !== undefined && bytesTransferred > 0 && ` · ${formatBytes(bytesTransferred)}`}
+            {useBytes && ` / ${formatBytes(totalBytes!)}`}
+          </span>
+        )}
+      </div>
+      <div className="w-full bg-neutral-100 rounded-full h-2 overflow-hidden">
+        <div
+          className="bg-blue-500 h-full rounded-full transition-all duration-300 ease-out"
+          style={{ width: `${Math.min(100, Math.max(0, displayProgress))}%` }}
+        />
+      </div>
+      {failedCount !== undefined && failedCount > 0 && (
+        <p className="text-[11px] text-amber-600">
+          {failedCount} file{failedCount !== 1 ? "s" : ""} failed
+        </p>
+      )}
+    </div>
+  );
+}
+
+// ============================================
+// Create Backup Section (V2 — client-side)
+// ============================================
+
+type ExportPhase = "idle" | "fetching" | "downloading" | "zipping" | "done" | "error";
+
+function CreateBackupSection({
+  status,
+  statusLoading,
+  statusError,
+}: {
+  status: BackupStatus | null;
+  statusLoading: boolean;
+  statusError: string | null;
+}) {
+  const [phase, setPhase] = useState<ExportPhase>("idle");
+  const [exportError, setExportError] = useState<string | null>(null);
+  const [downloadProgress, setDownloadProgress] = useState<PoolProgress | null>(null);
+  const [zipProgress, setZipProgress] = useState(0);
+  const abortRef = useRef<AbortController | null>(null);
+
+  const handleCreateBackup = async () => {
+    setPhase("fetching");
+    setExportError(null);
+    setDownloadProgress(null);
+    setZipProgress(0);
+    abortRef.current = new AbortController();
+
+    try {
+      // ── Phase 1: Fetch export data (JSON) from Vercel ──
+      const res = await fetch("/api/admin/backups/prepare-export", {
+        signal: abortRef.current.signal,
+      });
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({ error: "Export failed" }));
+        throw new Error(data.error || `Export failed (${res.status})`);
+      }
+
+      const exportData: ExportData = await res.json();
+
+      // ── Phase 2: Build ZIP in browser ──
+      const JSZip = (await import("jszip")).default;
+      const zip = new JSZip();
+
+      // Add manifest
+      zip.file("manifest.json", JSON.stringify(exportData.manifest, null, 2));
+
+      // Add Sanity documents
+      zip.file("sanity/pages.json", JSON.stringify(exportData.documents.pages, null, 2));
+
+      if (exportData.documents.siteSettings) {
+        zip.file("sanity/settings.json", JSON.stringify(exportData.documents.siteSettings, null, 2));
+      }
+      if (exportData.documents.siteStyles) {
+        zip.file("sanity/styles.json", JSON.stringify(exportData.documents.siteStyles, null, 2));
+      }
+      if (exportData.documents.assetRegistry) {
+        zip.file("sanity/asset-registry.json", JSON.stringify(exportData.documents.assetRegistry, null, 2));
+      }
+      if (exportData.documents.customSections.length > 0) {
+        zip.file("sanity/custom-sections.json", JSON.stringify(exportData.documents.customSections, null, 2));
+      }
+
+      // ── Phase 3: Download assets directly from R2 ──
+      let assetResult: PoolProgress | null = null;
+
+      if (
+        exportData.assets.r2_connected &&
+        exportData.assets.public_url &&
+        exportData.assets.files.length > 0
+      ) {
+        // L-3: ZIP bomb / runaway-export guard.
+        //
+        // The file list comes from our own Sanity-backed asset registry so it
+        // isn't adversarial by default, but an unusually large R2 bucket (or
+        // a registry row pointing at a surprisingly large object) can still
+        // make the browser OOM while it builds the ZIP in memory. We apply:
+        //
+        //   • A soft warning (console.warn) above 500 MB — existing behaviour,
+        //     kept so developers can spot runaway exports in dev tools.
+        //   • A hard abort above HARD_MAX_EXPORT_BYTES (2 GB). At that scale
+        //     JSZip's single-blob output is almost guaranteed to fail in
+        //     practice across Chrome/Safari/Firefox, and continuing would
+        //     just burn CPU before erroring with an opaque RangeError.
+        const HARD_MAX_EXPORT_BYTES = 2 * 1024 * 1024 * 1024; // 2 GB
+        const totalSize = exportData.assets.files.reduce((s, f) => s + f.size, 0);
+        if (totalSize > HARD_MAX_EXPORT_BYTES) {
+          throw new Error(
+            `Backup too large for client-side export: ${formatBytes(totalSize)} exceeds the ${formatBytes(
+              HARD_MAX_EXPORT_BYTES
+            )} safety cap. Please contact support for a server-side migration path.`
+          );
+        }
+        if (totalSize > 500 * 1024 * 1024) {
+          console.warn(
+            `[Backup] Large backup: ${formatBytes(totalSize)}. Browser memory may be affected.`
+          );
+        }
+
+        setPhase("downloading");
+        assetResult = await downloadAssetsToZip(
+          exportData.assets.files,
+          exportData.assets.public_url,
+          zip,
+          (p) => setDownloadProgress({ ...p }),
+          abortRef.current.signal
+        );
+
+        if (abortRef.current.signal.aborted) return;
+      }
+
+      // ── Phase 4: Generate final ZIP blob ──
+      setPhase("zipping");
+      const blob = await zip.generateAsync(
+        { type: "blob", compression: "DEFLATE", compressionOptions: { level: 5 } },
+        (meta) => setZipProgress(meta.percent)
+      );
+
+      // ── Phase 5: Trigger browser download ──
+      const date = new Date().toISOString().split("T")[0];
+      const filename = `andami-backup-${date}.zip`;
+
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+
+      setPhase("done");
+      setDownloadProgress(assetResult);
+      setTimeout(() => setPhase("idle"), 8000);
+    } catch (err) {
+      if (abortRef.current?.signal.aborted) {
+        setPhase("idle");
+        return;
+      }
+      setExportError(err instanceof Error ? err.message : "Export failed");
+      setPhase("error");
+    }
+  };
+
+  const handleCancel = () => {
+    abortRef.current?.abort();
+    setPhase("idle");
+  };
+
+  const isWorking = phase === "fetching" || phase === "downloading" || phase === "zipping";
+
+  return (
+    <div className="border rounded-xl bg-white border-blue-200/60 ring-1 ring-blue-100/40">
+      {/* Header */}
+      <div className="flex items-center gap-3 px-4 py-3 border-b border-neutral-100">
+        <div className="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center shrink-0">
+          <BackupIcon size={16} />
+        </div>
+        <h2 className="text-sm font-semibold text-neutral-900">Create Backup</h2>
+      </div>
+
+      {/* Content */}
+      <div className="px-4 py-3 space-y-3">
+        {/* Status loading */}
+        {statusLoading && (
+          <div className="flex items-center gap-2 text-xs text-neutral-400">
+            <SpinnerIcon size={14} />
+            Loading site status...
+          </div>
+        )}
+
+        {/* Status error */}
+        {statusError && (
+          <div className="p-2.5 rounded-lg bg-red-50 border border-red-200">
+            <p className="text-xs text-red-700">{statusError}</p>
+          </div>
+        )}
+
+        {/* Status card */}
+        {status && !statusLoading && (
+          <div className="space-y-3">
+            {/* R2 warning */}
+            {!status.r2_connected && (
+              <div className="flex items-start gap-2 p-2.5 rounded-lg bg-amber-50 border border-amber-200">
+                <span className="text-amber-600 mt-0.5 shrink-0"><AlertIcon size={14} /></span>
+                <p className="text-xs text-amber-700">
+                  R2 storage is not connected. The backup will contain Sanity data only (no assets).
+                </p>
+              </div>
+            )}
+
+            {/* Stats grid */}
+            <div className="grid grid-cols-2 gap-2">
+              <div className="p-2.5 rounded-lg bg-neutral-50 border border-neutral-100">
+                <p className="text-[10px] uppercase tracking-wider text-neutral-400 font-medium mb-0.5">Documents</p>
+                <p className="text-sm font-semibold text-neutral-900">{totalDocs(status)}</p>
+                <p className="text-[11px] text-neutral-500 mt-0.5">
+                  {status.document_counts.pages} pages · {status.document_counts.custom_sections} sections
+                </p>
+              </div>
+              <div className="p-2.5 rounded-lg bg-neutral-50 border border-neutral-100">
+                <p className="text-[10px] uppercase tracking-wider text-neutral-400 font-medium mb-0.5">Assets</p>
+                <p className="text-sm font-semibold text-neutral-900">
+                  {status.r2_connected ? status.asset_count.toLocaleString() : "—"}
+                </p>
+                <p className="text-[11px] text-neutral-500 mt-0.5">
+                  {status.r2_connected ? formatBytes(status.asset_size_bytes) : "R2 not connected"}
+                </p>
+              </div>
+            </div>
+
+            {/* Export error */}
+            {phase === "error" && exportError && (
+              <div className="p-2.5 rounded-lg bg-red-50 border border-red-200">
+                <p className="text-xs text-red-700">{exportError}</p>
+              </div>
+            )}
+
+            {/* Progress indicators */}
+            {phase === "fetching" && (
+              <ProgressBar phase="Fetching site data..." progress={15} />
+            )}
+
+            {phase === "downloading" && downloadProgress && (
+              <ProgressBar
+                phase={`Downloading assets... ${downloadProgress.completed} / ${downloadProgress.total} files`}
+                progress={downloadProgress.total > 0
+                  ? (downloadProgress.completed / downloadProgress.total) * 100
+                  : 0
+                }
+                totalFiles={downloadProgress.total}
+                bytesTransferred={downloadProgress.bytesTransferred}
+                totalBytes={downloadProgress.totalBytes}
+                failedCount={downloadProgress.failed.length}
+              />
+            )}
+
+            {phase === "zipping" && (
+              <ProgressBar phase="Building ZIP archive..." progress={zipProgress} />
+            )}
+
+            {/* Done message */}
+            {phase === "done" && (
+              <div className="flex items-start gap-2 p-2.5 rounded-lg bg-green-50 border border-green-200">
+                <span className="text-green-600 mt-0.5 shrink-0"><CheckIcon size={14} /></span>
+                <div>
+                  <p className="text-xs text-green-700 font-medium">Backup downloaded successfully</p>
+                  {downloadProgress && downloadProgress.failed.length > 0 && (
+                    <p className="text-[11px] text-amber-600 mt-0.5">
+                      {downloadProgress.completed - downloadProgress.failed.length} of {downloadProgress.total} assets included.{" "}
+                      {downloadProgress.failed.length} failed to download.
+                    </p>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Action buttons */}
+            <div className="flex items-center gap-2">
+              {!isWorking && phase !== "done" && (
+                <button
+                  onClick={handleCreateBackup}
+                  className="inline-flex items-center gap-2 rounded-lg bg-blue-600 text-white text-sm font-medium px-4 py-2 hover:bg-blue-700 transition-colors"
+                >
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                    <polyline points="7 10 12 15 17 10" />
+                    <line x1="12" y1="15" x2="12" y2="3" />
+                  </svg>
+                  Create Backup
+                </button>
+              )}
+
+              {isWorking && (
+                <button
+                  onClick={handleCancel}
+                  className="inline-flex items-center gap-2 rounded-lg border border-neutral-200 bg-white text-neutral-600 text-sm font-medium px-4 py-2 hover:bg-neutral-50 transition-colors"
+                >
+                  Cancel
+                </button>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ============================================
+// Restore Section (V2 — client-side assets)
+// ============================================
+
+type RestorePhase =
+  | "idle"
+  | "preview"
+  | "confirming"
+  | "restoring_docs"
+  | "uploading_assets"
+  | "done"
+  | "error";
+
+function RestoreSection({
+  status,
+  onRestoreSuccess,
+}: {
+  status: BackupStatus | null;
+  /**
+   * Invoked after a restore finishes successfully (documents restored,
+   * asset upload phase complete or unneeded). Used by the parent to
+   * refetch `/api/admin/backups/status` so the "Create Backup" card
+   * immediately reflects the new doc/asset counts — otherwise the
+   * admin sees stale pre-restore numbers and panics (M-7).
+   */
+  onRestoreSuccess?: () => void;
+}) {
+  const [phase, setPhase] = useState<RestorePhase>("idle");
+  const [file, setFile] = useState<File | null>(null);
+  const [zipInstance, setZipInstance] = useState<import("jszip") | null>(null);
+  const [manifest, setManifest] = useState<BackupManifest | null>(null);
+  const [parseError, setParseError] = useState<string | null>(null);
+  const [confirmText, setConfirmText] = useState("");
+  const [restoreError, setRestoreError] = useState<string | null>(null);
+  const [dragOver, setDragOver] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const abortRef = useRef<AbortController | null>(null);
+
+  // Result state
+  const [docResult, setDocResult] = useState<RestoreDataResult | null>(null);
+  const [uploadProgress, setUploadProgress] = useState<PoolProgress | null>(null);
+  const [totalDuration, setTotalDuration] = useState(0);
+
+  // Count assets in the ZIP
+  const [assetCount, setAssetCount] = useState(0);
+
+  // ── Upload-phase tracking for M-8 (TTL warning) ──
+  // We record when the upload phase started and the TTL the server granted
+  // to every presigned URL. If the upload hasn't finished by the time we're
+  // past ~80% of the TTL budget, we surface a warning so the admin can
+  // decide whether to abort and re-generate fresh URLs.
+  const [uploadStartedAt, setUploadStartedAt] = useState<number | null>(null);
+  const [uploadTtlSeconds, setUploadTtlSeconds] = useState<number | null>(null);
+  const [uploadNearExpiry, setUploadNearExpiry] = useState(false);
+
+  // ── L-12: user-tunable upload concurrency ──
+  //
+  // Default is 4 parallel workers — a reasonable sweet spot on home fiber
+  // that avoids saturating the admin's connection while keeping the
+  // restore under typical TTL budgets. Admins on faster pipes can push
+  // this up to 8, slower connections can drop to 2. The value persists
+  // in localStorage so the choice survives between restores. Any value
+  // outside the 2..8 range is normalized on read.
+  const CONCURRENCY_STORAGE_KEY = "andami.backup.restore.uploadConcurrency";
+  const DEFAULT_CONCURRENCY = 4;
+  const clampConcurrency = (n: number) =>
+    Math.max(2, Math.min(8, Math.round(n)));
+  const [uploadConcurrency, setUploadConcurrency] = useState<number>(
+    DEFAULT_CONCURRENCY
+  );
+
+  // Hydrate the persisted concurrency once after mount (avoids SSR / hydration
+  // mismatch — localStorage is window-only).
+  useEffect(() => {
+    try {
+      const raw =
+        typeof window !== "undefined" &&
+        window.localStorage.getItem(CONCURRENCY_STORAGE_KEY);
+      if (raw) {
+        const parsed = Number.parseInt(raw, 10);
+        if (Number.isFinite(parsed)) {
+          setUploadConcurrency(clampConcurrency(parsed));
+        }
+      }
+    } catch {
+      // localStorage can throw in private-mode Safari, etc. Safe to ignore —
+      // we just fall back to the default.
+    }
+  }, []);
+
+  const persistConcurrency = useCallback((n: number) => {
+    const clamped = clampConcurrency(n);
+    setUploadConcurrency(clamped);
+    try {
+      if (typeof window !== "undefined") {
+        window.localStorage.setItem(CONCURRENCY_STORAGE_KEY, String(clamped));
+      }
+    } catch {
+      // See comment above — non-fatal.
+    }
+  }, []);
+
+  const siteName = getSiteConfig().name;
+
+  // ── Warn the user if they try to close the tab mid-restore ──
+  // Closing during `restoring_docs` leaves Sanity mid-wipe. Closing during
+  // `uploading_assets` leaves R2 partially populated. Both produce a broken
+  // site with no "resume" path. The beforeunload prompt gives the admin a
+  // last chance to stay on the page.
+  //
+  // M-6 explicitly covers both phases because the upload phase is where
+  // most of the clock time lives — it's the phase where an admin is most
+  // likely to get impatient and close the tab.
+  useEffect(() => {
+    const isDestructive =
+      phase === "restoring_docs" || phase === "uploading_assets";
+    if (!isDestructive) return;
+    const message =
+      phase === "restoring_docs"
+        ? "Restore in progress — closing this page will leave the site in a broken state."
+        : "Asset upload in progress — closing this page will leave the site with broken images.";
+    const handler = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+      // Modern browsers show their own generic text, but some still fall
+      // back to `returnValue` — so we populate it with the phase-specific
+      // message for the handful of environments that still display it.
+      e.returnValue = message;
+      return message;
+    };
+    window.addEventListener("beforeunload", handler);
+    return () => window.removeEventListener("beforeunload", handler);
+  }, [phase]);
+
+  // ── M-8: Poll TTL budget during upload phase ──
+  // Every 5s while uploading, check whether we've consumed >80% of the TTL
+  // granted by the server. If so, set `uploadNearExpiry` so the UI shows
+  // a banner suggesting the admin either waits patiently or cancels to
+  // retry with a fresh batch of URLs.
+  useEffect(() => {
+    if (phase !== "uploading_assets" || !uploadStartedAt || !uploadTtlSeconds) {
+      return;
+    }
+    const check = () => {
+      const elapsedSec = (Date.now() - uploadStartedAt) / 1000;
+      if (elapsedSec > uploadTtlSeconds * 0.8) {
+        setUploadNearExpiry(true);
+      }
+    };
+    check();
+    const id = setInterval(check, 5000);
+    return () => clearInterval(id);
+  }, [phase, uploadStartedAt, uploadTtlSeconds]);
+
+  // ── Parse ZIP and extract manifest ──
+  const handleFile = useCallback(async (f: File) => {
+    setFile(f);
+    setParseError(null);
+    setManifest(null);
+    setZipInstance(null);
+    setDocResult(null);
+    setUploadProgress(null);
+    setRestoreError(null);
+    setConfirmText("");
+    setAssetCount(0);
+
+    if (!f.name.endsWith(".zip")) {
+      setParseError("Please select a .zip backup file.");
+      setPhase("idle");
+      return;
+    }
+
+    try {
+      const JSZip = (await import("jszip")).default;
+      const zip = await JSZip.loadAsync(f);
+      const manifestEntry = zip.file("manifest.json");
+
+      if (!manifestEntry) {
+        setParseError("Invalid backup: manifest.json not found in the ZIP archive.");
+        setPhase("idle");
+        return;
+      }
+
+      const manifestText = await manifestEntry.async("string");
+      const parsed = JSON.parse(manifestText);
+
+      if (parsed.version !== 1) {
+        setParseError(`Unsupported backup version: ${parsed.version}. Expected version 1.`);
+        setPhase("idle");
+        return;
+      }
+
+      if (!parsed.documents || !parsed.assets) {
+        setParseError("Invalid backup: manifest is missing required sections.");
+        setPhase("idle");
+        return;
+      }
+
+      // Count asset files in the ZIP
+      let assets = 0;
+      zip.forEach((path: string) => {
+        if (path.startsWith("assets/") && !path.endsWith("/")) assets++;
+      });
+
+      setZipInstance(zip);
+      setManifest(parsed as BackupManifest);
+      setAssetCount(assets);
+      setPhase("preview");
+    } catch (err) {
+      setParseError(
+        err instanceof Error
+          ? `Failed to read backup: ${err.message}`
+          : "Failed to read the backup file."
+      );
+      setPhase("idle");
+    }
+  }, []);
+
+  // ── Drag & Drop ──
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(false);
+    const f = e.dataTransfer.files?.[0];
+    if (f) handleFile(f);
+  }, [handleFile]);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(false);
+  }, []);
+
+  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const f = e.target.files?.[0];
+    if (f) handleFile(f);
+  }, [handleFile]);
+
+  // ── V2 Restore ──
+  const handleRestore = async () => {
+    if (!zipInstance || !manifest) return;
+    const startTime = Date.now();
+    setPhase("restoring_docs");
+    setRestoreError(null);
+    setDocResult(null);
+    setUploadProgress(null);
+    setUploadStartedAt(null);
+    setUploadTtlSeconds(null);
+    setUploadNearExpiry(false);
+    abortRef.current = new AbortController();
+
+    try {
+      // ── Phase 1: Extract Sanity documents from ZIP ──
+      const extractJson = async (path: string): Promise<unknown | null> => {
+        const entry = zipInstance.file(path);
+        if (!entry) return null;
+        const text = await entry.async("string");
+        return JSON.parse(text);
+      };
+
+      const documents = {
+        pages: (await extractJson("sanity/pages.json")) ?? [],
+        siteSettings: await extractJson("sanity/settings.json"),
+        siteStyles: await extractJson("sanity/styles.json"),
+        assetRegistry: await extractJson("sanity/asset-registry.json"),
+        customSections: (await extractJson("sanity/custom-sections.json")) ?? [],
+      };
+
+      // Collect the asset keys present in the ZIP. The server uses this
+      // list to pre-sign upload URLs in a single invocation, which keeps
+      // Vercel invocations flat regardless of how many assets we restore
+      // (no more N calls to /api/admin/r2/upload-url, no 60 req/min cap).
+      const assetEntries: { key: string; size: number }[] = [];
+      zipInstance.forEach((relativePath, zipEntry) => {
+        if (relativePath.startsWith("assets/") && !relativePath.endsWith("/") && !zipEntry.dir) {
+          const key = relativePath.replace(/^assets\//, "");
+          // Size is available on the zip entry's uncompressed stats.
+          const rawSize =
+            (zipEntry as unknown as { _data?: { uncompressedSize?: number } })._data?.uncompressedSize ?? 0;
+          assetEntries.push({ key, size: rawSize });
+        }
+      });
+
+      // Determine if we need to wipe R2 (only if there are assets to upload)
+      const hasAssets = assetEntries.length > 0;
+      const r2Connected = status?.r2_connected ?? false;
+      const shouldWipeR2 = hasAssets && r2Connected;
+
+      // ── Phase 2: Send documents to Vercel (JSON only) ──
+      // M-8: request a generous TTL when there are many assets. The server
+      // clamps to a safe range (5 min..1 h) so this is a hint, not a demand.
+      // Rough heuristic: 30 min baseline + 30s per 10 assets, capped to 1 h.
+      const requestedTtlSec = Math.min(
+        3600,
+        Math.max(1800, 1800 + Math.ceil(assetEntries.length / 10) * 30)
+      );
+
+      const res = await fetch("/api/admin/backups/restore-data", {
+        method: "POST",
+        headers: {
+          ...csrfHeaders(),
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          manifest,
+          documents,
+          wipe_r2: shouldWipeR2,
+          assets: r2Connected ? assetEntries : [],
+          upload_ttl_seconds: requestedTtlSec,
+        }),
+        signal: abortRef.current.signal,
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        throw new Error(data.error || `Restore failed (${res.status})`);
+      }
+
+      const result = data as RestoreDataResult;
+      setDocResult(result);
+
+      // ── Phase 3: Upload assets directly to R2 via presigned URLs ──
+      if (hasAssets && r2Connected) {
+        setPhase("uploading_assets");
+        // Record the upload deadline so the TTL-warning effect can fire.
+        setUploadStartedAt(Date.now());
+        setUploadTtlSeconds(result.upload_ttl_seconds ?? null);
+
+        const uploads = result.upload_urls ?? [];
+        if (uploads.length === 0) {
+          // Server couldn't pre-sign (R2 config missing or signing failed).
+          // Mark all assets as failed rather than silently skipping them.
+          setUploadProgress({
+            completed: assetEntries.length,
+            total: assetEntries.length,
+            bytesTransferred: 0,
+            totalBytes: assetEntries.reduce((s, a) => s + (a.size || 0), 0),
+            failed: assetEntries.map((a) => a.key),
+          });
+        } else {
+          const uploadResult = await uploadAssetsFromZip(
+            zipInstance,
+            uploads,
+            (p) => setUploadProgress({ ...p }),
+            abortRef.current.signal,
+            // L-12: user-configurable concurrency (persisted in localStorage)
+            uploadConcurrency
+          );
+
+          if (abortRef.current.signal.aborted) return;
+          setUploadProgress(uploadResult);
+        }
+      }
+
+      setTotalDuration(Date.now() - startTime);
+      setPhase("done");
+      // M-7: refresh the "Create Backup" status card so its doc/asset
+      // counts reflect the freshly-restored state. Fire-and-forget — we
+      // don't block the "done" UI on this.
+      onRestoreSuccess?.();
+    } catch (err) {
+      if (abortRef.current?.signal.aborted) {
+        setPhase("idle");
+        return;
+      }
+      setRestoreError(err instanceof Error ? err.message : "Restore failed");
+      setPhase("error");
+    }
+  };
+
+  const handleCancel = () => {
+    abortRef.current?.abort();
+    setPhase("idle");
+  };
+
+  // ── Reset ──
+  const handleReset = () => {
+    setPhase("idle");
+    setFile(null);
+    setZipInstance(null);
+    setManifest(null);
+    setParseError(null);
+    setConfirmText("");
+    setDocResult(null);
+    setUploadProgress(null);
+    setRestoreError(null);
+    setAssetCount(0);
+    setTotalDuration(0);
+    setUploadStartedAt(null);
+    setUploadTtlSeconds(null);
+    setUploadNearExpiry(false);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  // M-1: exact match only. GitHub-style "type the literal site name".
+  // No trim, no lowercasing — if the admin can't get the casing right,
+  // they shouldn't be firing a destructive, irreversible operation.
+  // If `siteName` ever resolves to an empty string (misconfigured instance)
+  // the match would trivially pass on an empty textbox, so we also require
+  // a non-empty confirmText. A sensible fallback ("CONFIRM") is used when
+  // the site name is missing so the admin still has to type something.
+  const hasSiteName = typeof siteName === "string" && siteName.length > 0;
+  const confirmTarget = hasSiteName ? siteName : "CONFIRM";
+  const confirmationMatch =
+    confirmText.length > 0 && confirmText === confirmTarget;
+
+  return (
+    <div className="border rounded-xl bg-white border-red-200/60 ring-1 ring-red-100/40">
+      {/* Header */}
+      <div className="flex items-center gap-3 px-4 py-3 border-b border-neutral-100">
+        <div className="w-8 h-8 rounded-lg bg-red-50 flex items-center justify-center shrink-0">
+          <RestoreIcon size={16} />
+        </div>
+        <div className="flex items-center gap-2 min-w-0 flex-1">
+          <h2 className="text-sm font-semibold text-neutral-900">Restore from Backup</h2>
+          <span className="inline-flex items-center text-[9px] font-semibold uppercase tracking-wider text-red-600 bg-red-50 px-1.5 py-0.5 rounded-full">
+            Danger
+          </span>
+        </div>
+      </div>
+
+      <div className="px-4 py-3 space-y-3">
+        {/* R2 not connected warning */}
+        {status && !status.r2_connected && (
+          <div className="flex items-start gap-2 p-2.5 rounded-lg bg-amber-50 border border-amber-200">
+            <span className="text-amber-600 mt-0.5 shrink-0"><AlertIcon size={14} /></span>
+            <p className="text-xs text-amber-700">
+              R2 storage is not connected. Only Sanity documents will be restored — assets in the backup will be skipped.
+            </p>
+          </div>
+        )}
+
+        {/* ── Phase: idle — Drop zone ── */}
+        {(phase === "idle") && (
+          <>
+            <div
+              onDrop={handleDrop}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onClick={() => fileInputRef.current?.click()}
+              className={`
+                flex flex-col items-center justify-center gap-2 p-6 rounded-lg border-2 border-dashed cursor-pointer
+                transition-colors duration-150
+                ${dragOver
+                  ? "border-blue-400 bg-blue-50/50"
+                  : "border-neutral-200 bg-neutral-50/50 hover:border-neutral-300 hover:bg-neutral-50"
+                }
+              `}
+            >
+              <span className="text-neutral-400"><UploadIcon size={28} /></span>
+              <p className="text-sm text-neutral-600">
+                Drop a <span className="font-medium">.zip</span> backup file here, or click to browse
+              </p>
+              <p className="text-[11px] text-neutral-400">Maximum file size: 500 MB</p>
+            </div>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".zip"
+              onChange={handleInputChange}
+              className="hidden"
+            />
+
+            {parseError && (
+              <div className="p-2.5 rounded-lg bg-red-50 border border-red-200">
+                <p className="text-xs text-red-700">{parseError}</p>
+              </div>
+            )}
+          </>
+        )}
+
+        {/* ── Phase: preview — Show manifest contents ── */}
+        {phase === "preview" && manifest && file && (
+          <div className="space-y-3">
+            {/* File info */}
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2 min-w-0">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M21 8v13H3V8" />
+                  <path d="M1 3h22v5H1z" />
+                  <path d="M10 12h4" />
+                </svg>
+                <span className="text-sm font-medium text-neutral-900 truncate">{file.name}</span>
+                <span className="text-xs text-neutral-400 shrink-0">{formatBytes(file.size)}</span>
+              </div>
+              <button
+                onClick={handleReset}
+                className="text-[11px] text-neutral-400 hover:text-neutral-600 transition-colors px-2 py-0.5 rounded hover:bg-neutral-50"
+              >
+                Change file
+              </button>
+            </div>
+
+            {/* Manifest details */}
+            <div className="p-3 rounded-lg bg-neutral-50 border border-neutral-100 space-y-2">
+              <div className="flex items-center justify-between">
+                <p className="text-[10px] uppercase tracking-wider text-neutral-400 font-medium">Backup Contents</p>
+                <p className="text-[11px] text-neutral-400">v{manifest.framework_version}</p>
+              </div>
+
+              <div className="grid grid-cols-2 gap-2">
+                <div>
+                  <p className="text-[11px] text-neutral-500">Created</p>
+                  <p className="text-xs font-medium text-neutral-800">{formatDate(manifest.created_at)}</p>
+                </div>
+                <div>
+                  <p className="text-[11px] text-neutral-500">Total documents</p>
+                  <p className="text-xs font-medium text-neutral-800">{totalManifestDocs(manifest)}</p>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-2">
+                <div>
+                  <p className="text-[11px] text-neutral-500">Pages</p>
+                  <p className="text-xs font-medium text-neutral-800">{manifest.documents.pages}</p>
+                </div>
+                <div>
+                  <p className="text-[11px] text-neutral-500">Custom sections</p>
+                  <p className="text-xs font-medium text-neutral-800">{manifest.documents.custom_sections}</p>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-2">
+                <div>
+                  <p className="text-[11px] text-neutral-500">Assets in ZIP</p>
+                  <p className="text-xs font-medium text-neutral-800">
+                    {assetCount > 0
+                      ? `${assetCount.toLocaleString()} files`
+                      : manifest.assets.r2_connected
+                        ? `${manifest.assets.total_files.toLocaleString()} files (${formatBytes(manifest.assets.total_size_bytes)})`
+                        : "None (R2 was not connected)"
+                    }
+                  </p>
+                </div>
+                <div>
+                  <p className="text-[11px] text-neutral-500">Settings</p>
+                  <p className="text-xs font-medium text-neutral-800">
+                    {[
+                      manifest.documents.site_settings && "Site settings",
+                      manifest.documents.site_styles && "Styles",
+                      manifest.documents.asset_registry && "Asset registry",
+                    ].filter(Boolean).join(", ") || "None"}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Proceed to confirmation */}
+            <button
+              onClick={() => setPhase("confirming")}
+              className="inline-flex items-center gap-2 rounded-lg bg-red-600 text-white text-sm font-medium px-4 py-2 hover:bg-red-700 transition-colors"
+            >
+              Continue to Restore
+            </button>
+          </div>
+        )}
+
+        {/* ── Phase: confirming — Danger confirmation ── */}
+        {phase === "confirming" && manifest && (
+          <div className="space-y-3">
+            <div className="p-3 rounded-lg bg-red-50 border-2 border-red-300 space-y-2">
+              <div className="flex items-start gap-2">
+                <span className="text-red-600 mt-0.5 shrink-0"><AlertIcon size={16} /></span>
+                <div>
+                  <p className="text-sm font-semibold text-red-800">This will replace ALL existing content and assets</p>
+                  <p className="text-xs text-red-700 mt-1">
+                    All current pages, custom sections, site settings, styles, and assets will be permanently deleted
+                    and replaced with the contents of this backup. This action cannot be undone.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* L-12: upload concurrency selector. Only meaningful when R2
+                is connected AND the backup carries assets — otherwise it
+                has nothing to do and would just clutter the confirm screen. */}
+            {assetCount > 0 && status?.r2_connected && (
+              <div>
+                <label className="block text-xs font-medium text-neutral-600 mb-1">
+                  Upload concurrency{" "}
+                  <span className="text-neutral-400 font-normal">
+                    (parallel workers)
+                  </span>
+                </label>
+                <div className="flex items-center gap-3">
+                  <input
+                    type="range"
+                    min={2}
+                    max={8}
+                    step={1}
+                    value={uploadConcurrency}
+                    onChange={(e) => persistConcurrency(Number(e.target.value))}
+                    className="flex-1 max-w-xs accent-red-600"
+                  />
+                  <span className="font-mono text-xs text-neutral-700 w-6 text-right">
+                    {uploadConcurrency}
+                  </span>
+                </div>
+                <p className="text-[11px] text-neutral-400 mt-1">
+                  Lower (2) for slower connections, higher (8) for fast
+                  pipes. Your choice is remembered for future restores.
+                </p>
+              </div>
+            )}
+
+            <div>
+              <label className="block text-xs font-medium text-neutral-600 mb-1">
+                Type{" "}
+                <span className="font-mono font-bold text-neutral-900">
+                  {confirmTarget}
+                </span>{" "}
+                to confirm (exact match, case-sensitive)
+              </label>
+              <input
+                type="text"
+                value={confirmText}
+                onChange={(e) => setConfirmText(e.target.value)}
+                placeholder={confirmTarget}
+                spellCheck={false}
+                autoCapitalize="off"
+                autoCorrect="off"
+                className="w-full max-w-xs rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-300 focus:outline-none focus:ring-2 focus:ring-red-300 focus:border-red-400 font-mono"
+                autoFocus
+              />
+              {!hasSiteName && (
+                <div className="mt-2 p-2 rounded-md bg-amber-50 border border-amber-200">
+                  <p className="text-[11px] text-amber-800 font-medium">
+                    Site name missing from <span className="font-mono">site.config.ts</span>
+                  </p>
+                  <p className="text-[11px] text-amber-700 mt-0.5">
+                    We couldn&apos;t detect a site name to use as the confirmation phrase, so you must type the literal word <span className="font-mono font-semibold">CONFIRM</span> instead. Adding <span className="font-mono">name: &quot;…&quot;</span> to your instance config will restore the stricter per-site confirmation going forward.
+                  </p>
+                </div>
+              )}
+            </div>
+
+            <div className="flex items-center gap-2">
+              <button
+                onClick={handleRestore}
+                disabled={!confirmationMatch}
+                className="inline-flex items-center gap-2 rounded-lg bg-red-600 text-white text-sm font-medium px-4 py-2 hover:bg-red-700 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M12 11V21" />
+                  <polyline points="8 17 12 21 16 17" />
+                  <path d="M20 17.58A5 5 0 0 0 18 8h-1.26A8 8 0 1 0 4 16.25" />
+                </svg>
+                Restore Backup
+              </button>
+              <button
+                onClick={() => setPhase("preview")}
+                className="text-xs text-neutral-400 hover:text-neutral-600 transition-colors px-3 py-2"
+              >
+                Back
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* ── Phase: restoring_docs — Sanity restore progress ── */}
+        {phase === "restoring_docs" && (
+          <div className="space-y-3 py-4">
+            <ProgressBar phase="Restoring documents..." progress={40} />
+            <p className="text-[11px] text-neutral-400">
+              Wiping existing content and restoring from backup. Do not close this page.
+            </p>
+          </div>
+        )}
+
+        {/* ── Phase: uploading_assets — R2 upload progress ── */}
+        {phase === "uploading_assets" && uploadProgress && (
+          <div className="space-y-3 py-4">
+            {/* Doc phase complete indicator */}
+            <div className="flex items-center gap-2 text-xs text-green-700">
+              <CheckIcon size={12} />
+              <span>Documents restored</span>
+            </div>
+
+            <ProgressBar
+              phase={`Uploading assets... ${uploadProgress.completed} / ${uploadProgress.total} files`}
+              progress={uploadProgress.total > 0
+                ? (uploadProgress.completed / uploadProgress.total) * 100
+                : 0
+              }
+              totalFiles={uploadProgress.total}
+              bytesTransferred={uploadProgress.bytesTransferred}
+              totalBytes={uploadProgress.totalBytes}
+              failedCount={uploadProgress.failed.length}
+            />
+
+            {/* M-8: TTL warning banner — presigned URLs expire after
+                `uploadTtlSeconds`; once we're past ~80% we warn the admin. */}
+            {uploadNearExpiry && uploadTtlSeconds && (
+              <div className="flex items-start gap-2 p-2.5 rounded-lg bg-amber-50 border border-amber-200">
+                <span className="text-amber-600 mt-0.5 shrink-0">
+                  <AlertIcon size={14} />
+                </span>
+                <div>
+                  <p className="text-xs text-amber-800 font-medium">
+                    Upload taking longer than expected
+                  </p>
+                  <p className="text-[11px] text-amber-700 mt-0.5">
+                    The presigned upload URLs expire {Math.round(uploadTtlSeconds / 60)} minutes after they were generated.
+                    Remaining files may fail to upload — cancel and retry to get a fresh batch.
+                  </p>
+                </div>
+              </div>
+            )}
+
+            <button
+              onClick={handleCancel}
+              className="text-xs text-neutral-400 hover:text-neutral-600 transition-colors px-2 py-1 rounded hover:bg-neutral-50"
+            >
+              Cancel asset upload
+            </button>
+
+            <p className="text-[11px] text-neutral-400">
+              Uploading assets directly to R2. Documents have already been restored.
+            </p>
+          </div>
+        )}
+
+        {/* ── Phase: done — Result ── */}
+        {phase === "done" && docResult && (
+          <div className="space-y-3">
+            <div className="flex items-start gap-2 p-3 rounded-lg bg-green-50 border border-green-200">
+              <span className="text-green-600 mt-0.5 shrink-0"><CheckIcon size={16} /></span>
+              <div>
+                <p className="text-sm font-semibold text-green-800">Restore completed successfully</p>
+                <p className="text-xs text-green-700 mt-0.5">
+                  Completed in {(totalDuration / 1000).toFixed(1)}s
+                </p>
+              </div>
+            </div>
+
+            {/* Result stats */}
+            <div className="p-3 rounded-lg bg-neutral-50 border border-neutral-100 space-y-2">
+              <p className="text-[10px] uppercase tracking-wider text-neutral-400 font-medium">Results</p>
+
+              <div className="grid grid-cols-2 gap-2">
+                <div>
+                  <p className="text-[11px] text-neutral-500">Documents restored</p>
+                  <p className="text-xs font-medium text-neutral-800">
+                    {Object.values(docResult.sanity.restored).reduce((a, b) => a + b, 0)}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-[11px] text-neutral-500">Documents wiped</p>
+                  <p className="text-xs font-medium text-neutral-800">
+                    {Object.values(docResult.sanity.wiped).reduce((a, b) => a + b, 0)}
+                  </p>
+                </div>
+              </div>
+
+              {uploadProgress && (
+                <div className="grid grid-cols-2 gap-2">
+                  <div>
+                    <p className="text-[11px] text-neutral-500">Assets uploaded</p>
+                    <p className="text-xs font-medium text-neutral-800">
+                      {uploadProgress.completed - uploadProgress.failed.length} / {uploadProgress.total}
+                    </p>
+                  </div>
+                  {uploadProgress.failed.length > 0 && (
+                    <div>
+                      <p className="text-[11px] text-neutral-500">Assets failed</p>
+                      <p className="text-xs font-medium text-red-600">
+                        {uploadProgress.failed.length}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {!uploadProgress && assetCount > 0 && status && !status.r2_connected && (
+                <p className="text-[11px] text-amber-600">
+                  Assets skipped: R2 not connected
+                </p>
+              )}
+
+              {uploadProgress && uploadProgress.failed.length > 0 && (
+                <details className="text-xs">
+                  <summary className="text-red-600 cursor-pointer hover:text-red-700">
+                    View failed assets ({uploadProgress.failed.length})
+                  </summary>
+                  <ul className="mt-1 space-y-0.5 text-neutral-500 max-h-32 overflow-y-auto">
+                    {uploadProgress.failed.map((path) => (
+                      <li key={path} className="font-mono text-[11px] truncate">{path}</li>
+                    ))}
+                  </ul>
+                </details>
+              )}
+            </div>
+
+            <button
+              onClick={handleReset}
+              className="text-xs text-neutral-400 hover:text-neutral-600 transition-colors px-2 py-1 rounded hover:bg-neutral-50"
+            >
+              Done
+            </button>
+          </div>
+        )}
+
+        {/* ── Phase: error ── */}
+        {phase === "error" && (
+          <div className="space-y-3">
+            <div className="p-3 rounded-lg bg-red-50 border border-red-200">
+              <p className="text-sm font-semibold text-red-800 mb-1">Restore failed</p>
+              <p className="text-xs text-red-700">{restoreError}</p>
+            </div>
+            <button
+              onClick={handleReset}
+              className="text-xs text-neutral-500 hover:text-neutral-700 transition-colors px-2 py-1 rounded hover:bg-neutral-50"
+            >
+              Try again
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ============================================
+// Main Page Component
+// ============================================
+
+export default function BackupsPage() {
+  const [status, setStatus] = useState<BackupStatus | null>(null);
+  const [statusLoading, setStatusLoading] = useState(true);
+  const [statusError, setStatusError] = useState<string | null>(null);
+
+  const fetchStatus = useCallback(async () => {
+    try {
+      const res = await fetch("/api/admin/backups/status");
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({ error: "Failed to fetch status" }));
+        throw new Error(data.error || `Status check failed (${res.status})`);
+      }
+      const data: BackupStatus = await res.json();
+      setStatus(data);
+    } catch (err) {
+      setStatusError(err instanceof Error ? err.message : "Failed to load backup status");
+    } finally {
+      setStatusLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchStatus();
+  }, [fetchStatus]);
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-2">
+        <h1 className="text-2xl font-semibold text-neutral-900">Backups</h1>
+      </div>
+
+      <div className="max-w-xl space-y-4">
+        <CreateBackupSection
+          status={status}
+          statusLoading={statusLoading}
+          statusError={statusError}
+        />
+
+        <RestoreSection status={status} onRestoreSuccess={fetchStatus} />
+      </div>
+    </div>
+  );
+}