@morphika/andami 0.1.2

package/app/admin/storage/page.tsx

@@ -0,0 +1,518 @@
+"use client";
+
+import { useState, useEffect, useCallback, Suspense } from "react";
+import { AssetBrowserInline } from "../../../components/builder/AssetBrowser";
+import { csrfHeaders } from "../../../lib/csrf-client";
+import { formatDate, formatBytes } from "../../../lib/format-utils";
+
+// ============================================
+// Types
+// ============================================
+
+interface R2Status {
+  connected: boolean;
+  bucket_name: string | null;
+  public_url: string | null;
+  endpoint: string | null;
+  connected_at: string | null;
+  storage_used_bytes: number | null;
+  object_count: number | null;
+}
+
+interface ScanResult {
+  scanned_count: number;
+  new_assets: number;
+  updated_assets: number;
+  relinked_assets: number;
+  missing_assets: number;
+  total_assets: number;
+  thumbnails_found: number;
+  thumbnails_missing: number;
+}
+
+// ============================================
+// SVG Icons
+// ============================================
+
+function R2Icon({ size = 20 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="#F6821F" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+      <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
+      <line x1="12" y1="22.08" x2="12" y2="12" />
+    </svg>
+  );
+}
+
+// ============================================
+// R2 Connection Form
+// ============================================
+
+function R2ConnectForm({
+  onSuccess,
+  onCancel,
+}: {
+  onSuccess: () => void;
+  onCancel: () => void;
+}) {
+  const [endpoint, setEndpoint] = useState("");
+  const [bucketName, setBucketName] = useState("");
+  const [accessKeyId, setAccessKeyId] = useState("");
+  const [secretAccessKey, setSecretAccessKey] = useState("");
+  const [publicUrl, setPublicUrl] = useState("");
+  const [testing, setTesting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setTesting(true);
+    setError(null);
+
+    try {
+      const res = await fetch("/api/admin/r2/connect", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...csrfHeaders(),
+        },
+        body: JSON.stringify({
+          endpoint: endpoint.trim(),
+          bucketName: bucketName.trim(),
+          accessKeyId: accessKeyId.trim(),
+          secretAccessKey: secretAccessKey.trim(),
+          publicUrl: publicUrl.trim(),
+        }),
+      });
+
+      const data = await res.json();
+      if (!res.ok) {
+        setError(data.error || "Connection failed");
+        return;
+      }
+
+      onSuccess();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Connection failed");
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  const inputClass =
+    "w-full rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-[#F6821F]/30 focus:border-[#F6821F]";
+  const labelClass = "block text-xs font-medium text-neutral-600 mb-1";
+
+  return (
+    <form onSubmit={handleSubmit} className="mt-4 space-y-3">
+      <div>
+        <label className={labelClass}>S3 Endpoint</label>
+        <input
+          type="url"
+          value={endpoint}
+          onChange={(e) => setEndpoint(e.target.value)}
+          placeholder="https://<account-id>.r2.cloudflarestorage.com"
+          className={inputClass}
+          required
+        />
+        <p className="text-[11px] text-neutral-400 mt-0.5">
+          Found in Cloudflare R2 dashboard → Account Details
+        </p>
+      </div>
+
+      <div>
+        <label className={labelClass}>Bucket Name</label>
+        <input
+          type="text"
+          value={bucketName}
+          onChange={(e) => setBucketName(e.target.value)}
+          placeholder="my-assets"
+          className={inputClass}
+          required
+        />
+      </div>
+
+      <div>
+        <label className={labelClass}>Access Key ID</label>
+        <input
+          type="text"
+          value={accessKeyId}
+          onChange={(e) => setAccessKeyId(e.target.value)}
+          placeholder="R2 API token Access Key ID"
+          className={inputClass}
+          required
+          autoComplete="off"
+        />
+      </div>
+
+      <div>
+        <label className={labelClass}>Secret Access Key</label>
+        <input
+          type="password"
+          value={secretAccessKey}
+          onChange={(e) => setSecretAccessKey(e.target.value)}
+          placeholder="R2 API token Secret Access Key"
+          className={inputClass}
+          required
+          autoComplete="off"
+        />
+      </div>
+
+      <div>
+        <label className={labelClass}>Public Bucket URL</label>
+        <input
+          type="url"
+          value={publicUrl}
+          onChange={(e) => setPublicUrl(e.target.value)}
+          placeholder="https://pub-xxx.r2.dev or https://assets.example.com"
+          className={inputClass}
+          required
+        />
+        <p className="text-[11px] text-neutral-400 mt-0.5">
+          R2.dev subdomain or custom domain with public access enabled
+        </p>
+      </div>
+
+      {error && (
+        <div className="p-2.5 rounded-lg bg-red-50 border border-red-200">
+          <p className="text-xs text-red-700">{error}</p>
+        </div>
+      )}
+
+      <div className="flex items-center gap-2 pt-1">
+        <button
+          type="submit"
+          disabled={testing}
+          className="inline-flex items-center gap-2 rounded-lg bg-[#F6821F] text-white text-sm font-medium px-4 py-2 hover:bg-[#F6821F]/90 transition-colors disabled:opacity-50"
+        >
+          {testing ? (
+            <>
+              <svg className="animate-spin h-4 w-4" 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>
+              Testing Connection...
+            </>
+          ) : (
+            "Test & Connect"
+          )}
+        </button>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="text-xs text-neutral-400 hover:text-neutral-600 transition-colors px-3 py-2"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  );
+}
+
+// ============================================
+// Page Component
+// ============================================
+
+export default function AdminStoragePage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex items-center justify-center py-20">
+          <span className="text-sm text-neutral-400 animate-pulse">
+            Loading storage...
+          </span>
+        </div>
+      }
+    >
+      <AdminStorageContent />
+    </Suspense>
+  );
+}
+
+function AdminStorageContent() {
+  // ── State ──
+  const [r2Status, setR2Status] = useState<R2Status | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [disconnectingR2, setDisconnectingR2] = useState(false);
+  const [showR2Form, setShowR2Form] = useState(false);
+  const [scanResult, setScanResult] = useState<ScanResult | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [lastScannedAt, setLastScannedAt] = useState<string | null>(null);
+  const [browserRefreshKey] = useState(0);
+  const [thumbWarningDismissed, setThumbWarningDismissed] = useState(false);
+
+  // ── Fetch statuses ──
+  const fetchR2Status = useCallback(async () => {
+    try {
+      const res = await fetch("/api/admin/r2/status");
+      if (res.ok) {
+        const data: R2Status = await res.json();
+        setR2Status(data);
+      }
+    } catch {
+      // silent
+    }
+  }, []);
+
+  const fetchLastScan = useCallback(async () => {
+    try {
+      const res = await fetch("/api/admin/assets/registry");
+      if (res.ok) {
+        const data = await res.json();
+        setLastScannedAt(data.registry?.last_scanned_at || null);
+      }
+    } catch {
+      // silent
+    }
+  }, []);
+
+  useEffect(() => {
+    Promise.all([fetchR2Status(), fetchLastScan()]).finally(
+      () => setLoading(false)
+    );
+  }, [fetchR2Status, fetchLastScan]);
+
+  // ── Handlers ──
+
+  const handleR2Connected = () => {
+    setShowR2Form(false);
+    setSuccessMessage("Cloudflare R2 connected successfully!");
+    fetchR2Status();
+    setTimeout(() => setSuccessMessage(null), 5000);
+  };
+
+  const handleDisconnectR2 = async () => {
+    if (!confirm("Are you sure you want to disconnect Cloudflare R2?")) return;
+    setDisconnectingR2(true);
+    try {
+      const res = await fetch("/api/admin/r2/disconnect", {
+        method: "POST",
+        headers: { ...csrfHeaders() },
+      });
+      if (!res.ok) throw new Error("Disconnect failed");
+      setR2Status({ connected: false, bucket_name: null, public_url: null, endpoint: null, connected_at: null, storage_used_bytes: null, object_count: null });
+      setSuccessMessage("Cloudflare R2 disconnected");
+      setTimeout(() => setSuccessMessage(null), 4000);
+    } catch (err) {
+      setErrorMessage(err instanceof Error ? err.message : "Disconnect failed");
+    } finally {
+      setDisconnectingR2(false);
+    }
+  };
+
+  // Called by AssetBrowserInline after a successful scan
+  const handleScanComplete = useCallback((result: Record<string, unknown>) => {
+    setScanResult(result as unknown as ScanResult);
+    setLastScannedAt(new Date().toISOString());
+  }, []);
+
+  const [r2DetailsOpen, setR2DetailsOpen] = useState(false);
+
+  // ── Loading state ──
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <span className="text-sm text-neutral-400 animate-pulse">Loading...</span>
+      </div>
+    );
+  }
+
+  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">Storage</h1>
+      </div>
+
+      {/* Success / Error banners */}
+      {successMessage && (
+        <div className="p-3 rounded-xl border border-green-200 bg-green-50">
+          <p className="text-sm text-green-700">{successMessage}</p>
+        </div>
+      )}
+      {errorMessage && (
+        <div className="p-3 rounded-xl border border-red-200 bg-red-50">
+          <p className="text-sm text-red-700">{errorMessage}</p>
+        </div>
+      )}
+
+      {/* ====== STORAGE PROVIDER CARD ====== */}
+      <div className="max-w-xl">
+        {/* ── Cloudflare R2 Card ── */}
+        <div className="border rounded-xl bg-white border-[#F6821F]/40 ring-1 ring-[#F6821F]/20">
+          {/* Main row — always visible */}
+          <div className="flex items-center gap-3 px-4 py-3">
+            <div className="w-8 h-8 rounded-lg bg-[#F6821F]/10 flex items-center justify-center shrink-0">
+              <R2Icon size={16} />
+            </div>
+            <div className="flex items-center gap-2 min-w-0 flex-1">
+              <h2 className="text-sm font-semibold text-neutral-900 whitespace-nowrap">Cloudflare R2</h2>
+              {r2Status?.connected && (
+                <>
+                  <span className="inline-flex items-center text-[9px] font-semibold uppercase tracking-wider text-[#F6821F] bg-[#F6821F]/10 px-1.5 py-0.5 rounded-full">
+                    Active
+                  </span>
+                  <span className="inline-flex items-center gap-1 text-[10px] font-medium text-green-600">
+                    <span className="w-1.5 h-1.5 rounded-full bg-green-500" />
+                  </span>
+                </>
+              )}
+            </div>
+
+            {/* R2 capacity bar — inline right side */}
+            {r2Status?.connected && r2Status.storage_used_bytes != null && (() => {
+              const R2_FREE_TIER_BYTES = 10 * 1024 * 1024 * 1024;
+              const usedBytes = r2Status.storage_used_bytes!;
+              const pct = Math.min((usedBytes / R2_FREE_TIER_BYTES) * 100, 100);
+              const barColor =
+                pct >= 90 ? "bg-red-500" : pct >= 70 ? "bg-amber-500" : "bg-[#F6821F]";
+              return (
+                <div className="flex items-center gap-2 ml-auto shrink-0">
+                  <span className="text-[10px] text-neutral-500 whitespace-nowrap">
+                    {formatBytes(usedBytes)} <span className="text-neutral-400">of 10 GB</span>
+                  </span>
+                  <div className="w-20 h-1.5 bg-neutral-100 rounded-full overflow-hidden">
+                    <div
+                      className={`h-full rounded-full transition-all duration-500 ${barColor}`}
+                      style={{ width: `${Math.max(pct, 0.5)}%` }}
+                    />
+                  </div>
+                  {r2Status.object_count != null && (
+                    <span className="text-[10px] text-neutral-400 whitespace-nowrap">
+                      {r2Status.object_count.toLocaleString()} files
+                    </span>
+                  )}
+                </div>
+              );
+            })()}
+
+            {/* Actions */}
+            <div className="flex items-center gap-1 ml-auto shrink-0">
+              {r2Status?.connected ? (
+                <button
+                  onClick={() => setR2DetailsOpen(!r2DetailsOpen)}
+                  className="text-neutral-400 hover:text-neutral-600 transition-colors p-1 rounded-md hover:bg-neutral-50"
+                  title="Details"
+                >
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
+                    className={`transition-transform duration-200 ${r2DetailsOpen ? "rotate-180" : ""}`}>
+                    <polyline points="6 9 12 15 18 9" />
+                  </svg>
+                </button>
+              ) : !showR2Form ? (
+                <button
+                  onClick={() => setShowR2Form(true)}
+                  className="inline-flex items-center gap-1.5 rounded-lg bg-[#F6821F] text-white text-xs font-medium px-3 py-1.5 hover:bg-[#F6821F]/90 transition-colors"
+                >
+                  Connect R2
+                </button>
+              ) : null}
+            </div>
+          </div>
+
+          {/* Collapsible details */}
+          {r2DetailsOpen && r2Status?.connected && (
+            <div className="border-t border-neutral-100 px-4 py-3 space-y-2">
+              <div className="flex items-center justify-between">
+                <div className="text-xs text-neutral-400">
+                  <span className="text-neutral-500 font-medium">Bucket:</span> {r2Status.bucket_name}
+                  {r2Status.connected_at && (
+                    <span> · since {formatDate(r2Status.connected_at)}</span>
+                  )}
+                </div>
+                <button
+                  onClick={handleDisconnectR2}
+                  disabled={disconnectingR2}
+                  className="text-[11px] text-neutral-400 hover:text-red-500 hover:bg-red-50 transition-colors px-2 py-0.5 rounded"
+                >
+                  {disconnectingR2 ? "..." : "Disconnect"}
+                </button>
+              </div>
+              {r2Status.public_url && (
+                <div className="text-xs text-neutral-400">
+                  <span className="text-neutral-500 font-medium">URL:</span>{" "}
+                  {r2Status.public_url}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* R2 connection form (when connecting) */}
+          {showR2Form && !r2Status?.connected && (
+            <div className="px-4 pb-4">
+              <R2ConnectForm
+                onSuccess={handleR2Connected}
+                onCancel={() => setShowR2Form(false)}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* ====== SCAN RESULT ====== */}
+      {scanResult && (
+        <div className="p-3 rounded-xl bg-neutral-50 border border-neutral-200">
+          <p className="text-sm text-neutral-700">
+            Found <span className="font-semibold">{scanResult.scanned_count}</span> files
+            {scanResult.new_assets > 0 && (
+              <span className="text-blue-500"> · {scanResult.new_assets} new</span>
+            )}
+            {scanResult.updated_assets > 0 && (
+              <span className="text-green-500"> · {scanResult.updated_assets} updated</span>
+            )}
+            {scanResult.relinked_assets > 0 && (
+              <span className="text-purple-500"> · {scanResult.relinked_assets} relinked</span>
+            )}
+            {scanResult.missing_assets > 0 && (
+              <span className="text-red-500"> · {scanResult.missing_assets} missing</span>
+            )}
+          </p>
+          {/* Thumbnail stats */}
+          {(scanResult.thumbnails_found > 0 || scanResult.thumbnails_missing > 0) && (
+            <p className="text-xs text-neutral-500 mt-1.5">
+              Thumbnails:{" "}
+              <span className="text-green-600 font-medium">{scanResult.thumbnails_found} found</span>
+              {scanResult.thumbnails_missing > 0 && (
+                <span className="text-amber-600 font-medium"> · {scanResult.thumbnails_missing} missing</span>
+              )}
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* Stale thumbnails warning */}
+      {scanResult &&
+        !thumbWarningDismissed &&
+        scanResult.thumbnails_missing > 0 &&
+        (scanResult.thumbnails_found + scanResult.thumbnails_missing) > 0 &&
+        scanResult.thumbnails_missing / (scanResult.thumbnails_found + scanResult.thumbnails_missing) > 0.3 && (
+        <div className="p-3 rounded-xl bg-amber-50 border border-amber-200 relative">
+          <button
+            onClick={() => setThumbWarningDismissed(true)}
+            className="absolute top-2 right-2 text-amber-400 hover:text-amber-600 transition-colors"
+            title="Dismiss"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+          <p className="text-sm font-medium text-amber-800">
+            {scanResult.thumbnails_missing} of{" "}
+            {scanResult.thumbnails_found + scanResult.thumbnails_missing} images are missing thumbnails
+          </p>
+          <p className="text-xs text-amber-700 mt-1">
+            Visitors are loading full-resolution files. Run{" "}
+            <code className="bg-amber-100 px-1 py-0.5 rounded text-[11px] font-mono">
+              builder-thumbs sync
+            </code>{" "}
+            to generate them.
+          </p>
+        </div>
+      )}
+
+      {/* ====== INLINE ASSET BROWSER ====== */}
+      <AssetBrowserInline refreshKey={browserRefreshKey} onScanComplete={handleScanComplete} />
+    </div>
+  );
+}