feat: add variation spawner and content repurposing

Variation spawner: select an image asset → spawn N variations that keep the
same emotional pattern/visual style but explore different hook angles. Runs
a focused ad-creative-designer agent with the original as a Gemini reference
image. New assets link back via parentAssetId.

Content repurposing: resize an image to all other platform dimensions using
Sharp (cover crop). Captions are re-toned for the target platform via Claude
CLI. No external APIs needed — fully local.

- Add parentAssetId self-relation to Asset model
- lib/repurpose.ts: Sharp resize, platform format mapping, caption re-toning
- lib/variations.ts: asset DNA extraction, variation prompt builder, mini-pipeline
- API routes: /api/assets/[id]/repurpose (GET formats, POST resize)
- API routes: /api/assets/[id]/variations (GET existing, POST spawn)
- Repurpose modal: checkbox list of target formats
- Variation modal: count picker, async launch
- Asset card: Repurpose + Variations buttons on image assets
- Asset lineage: "Derived from" shown on child assets

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

components/asset-card.tsx

@@ -1,8 +1,11 @@
 "use client";
 
+import { useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Check, X, Play } from "lucide-react";
+import { Check, X, Play, Copy, Sparkles } from "lucide-react";
+import { RepurposeModal } from "./repurpose-modal";
+import { VariationModal } from "./variation-modal";
 
 interface Asset {
   id: string;
@@ -16,6 +19,7 @@ interface Asset {
   status: string;
   createdAt: string;
   campaign?: { name: string };
+  parentAsset?: { id: string; fileName: string } | null;
 }
 
 interface AssetCardProps {
@@ -31,6 +35,9 @@ export function AssetCard({
   selected,
   onSelect,
 }: AssetCardProps) {
+  const [repurposeOpen, setRepurposeOpen] = useState(false);
+  const [variationOpen, setVariationOpen] = useState(false);
+
   const metadata = asset.metadata ? JSON.parse(asset.metadata) : {};
   const isImage = asset.type === "image" || asset.format === "png" || asset.format === "jpg";
   const isVideo = asset.type === "video" || asset.format === "mp4";
@@ -157,6 +164,12 @@ export function AssetCard({
           </p>
         )}
 
+        {asset.parentAsset && (
+          <p className="text-xs text-muted-foreground italic">
+            Derived from: {asset.parentAsset.fileName}
+          </p>
+        )}
+
         <div className="flex items-center gap-2 text-xs text-muted-foreground">
           {asset.campaign && <span>{asset.campaign.name}</span>}
           {asset.campaign && asset.createdAt && <span>·</span>}
@@ -173,32 +186,71 @@ export function AssetCard({
 
         {/* Actions — only for images and videos */}
         {(isImage || isVideo) ? (
-          <div className="flex gap-2">
-            <Button
-              size="sm"
-              variant="outline"
-              className="flex-1 min-w-0 overflow-hidden text-green-600 hover:text-green-700 hover:bg-green-50"
-              onClick={() => onStatusChange(asset.id, "approved")}
-              disabled={asset.status === "approved"}
-            >
-              <Check className="h-3 w-3 shrink-0" />
-              <span className="truncate">Approve</span>
-            </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              className="flex-1 min-w-0 overflow-hidden text-red-600 hover:text-red-700 hover:bg-red-50"
-              onClick={() => onStatusChange(asset.id, "rejected")}
-              disabled={asset.status === "rejected"}
-            >
-              <X className="h-3 w-3 shrink-0" />
-              <span className="truncate">Reject</span>
-            </Button>
+          <div className="space-y-2">
+            <div className="flex gap-2">
+              <Button
+                size="sm"
+                variant="outline"
+                className="flex-1 min-w-0 overflow-hidden text-green-600 hover:text-green-700 hover:bg-green-50"
+                onClick={() => onStatusChange(asset.id, "approved")}
+                disabled={asset.status === "approved"}
+              >
+                <Check className="h-3 w-3 shrink-0" />
+                <span className="truncate">Approve</span>
+              </Button>
+              <Button
+                size="sm"
+                variant="outline"
+                className="flex-1 min-w-0 overflow-hidden text-red-600 hover:text-red-700 hover:bg-red-50"
+                onClick={() => onStatusChange(asset.id, "rejected")}
+                disabled={asset.status === "rejected"}
+              >
+                <X className="h-3 w-3 shrink-0" />
+                <span className="truncate">Reject</span>
+              </Button>
+            </div>
+            {isImage && (
+              <div className="flex gap-2">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="flex-1 min-w-0 overflow-hidden"
+                  onClick={() => setRepurposeOpen(true)}
+                >
+                  <Copy className="h-3 w-3 shrink-0" />
+                  <span className="truncate">Repurpose</span>
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="flex-1 min-w-0 overflow-hidden"
+                  onClick={() => setVariationOpen(true)}
+                >
+                  <Sparkles className="h-3 w-3 shrink-0" />
+                  <span className="truncate">Variations</span>
+                </Button>
+              </div>
+            )}
           </div>
         ) : (
           <p className="text-xs text-muted-foreground text-center">Auto-accepted</p>
         )}
       </div>
+
+      {/* Modals */}
+      {repurposeOpen && (
+        <RepurposeModal
+          assetId={asset.id}
+          onClose={() => setRepurposeOpen(false)}
+        />
+      )}
+      {variationOpen && (
+        <VariationModal
+          assetId={asset.id}
+          assetName={asset.fileName}
+          onClose={() => setVariationOpen(false)}
+        />
+      )}
     </div>
   );
 }

components/asset-gallery.tsx

@@ -17,6 +17,7 @@ interface Asset {
   status: string;
   createdAt: string;
   campaign?: { name: string };
+  parentAsset?: { id: string; fileName: string } | null;
 }
 
 interface AssetGalleryProps {

components/repurpose-modal.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+const FORMAT_LABELS: Record<string, { label: string; dimensions: string }> = {
+  "instagram-feed": { label: "Instagram Feed", dimensions: "1080x1080" },
+  "instagram-stories": { label: "Instagram Stories", dimensions: "1080x1920" },
+  tiktok: { label: "TikTok", dimensions: "1080x1920" },
+  "nextdoor-spotlight": { label: "Nextdoor Spotlight", dimensions: "1200x1200" },
+  "nextdoor-display": { label: "Nextdoor Display", dimensions: "1200x628" },
+};
+
+interface RepurposeModalProps {
+  assetId: string;
+  onClose: () => void;
+}
+
+export function RepurposeModal({ assetId, onClose }: RepurposeModalProps) {
+  const [available, setAvailable] = useState<string[]>([]);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<{ created: number } | null>(null);
+
+  useEffect(() => {
+    fetch(`/api/assets/${assetId}/repurpose`)
+      .then((r) => r.json())
+      .then((data) => {
+        setAvailable(data.formats || []);
+        setSelected(new Set(data.formats || []));
+      })
+      .catch(() => {});
+  }, [assetId]);
+
+  async function handleRepurpose() {
+    setLoading(true);
+    const res = await fetch(`/api/assets/${assetId}/repurpose`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ formats: Array.from(selected) }),
+    });
+    const data = await res.json();
+    setResult(data);
+    setLoading(false);
+  }
+
+  function toggle(key: string) {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }
+
+  return (
+    <Dialog open onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Repurpose Asset</DialogTitle>
+          <DialogDescription>
+            Resize this image for other platforms. Captions will be re-toned to match each platform.
+          </DialogDescription>
+        </DialogHeader>
+
+        {result ? (
+          <div className="py-4 text-center">
+            <p className="text-lg font-semibold">{result.created} asset{result.created !== 1 ? "s" : ""} created</p>
+            <p className="text-sm text-muted-foreground mt-1">Check the Asset Library to review them.</p>
+            <DialogFooter>
+              <Button onClick={onClose}>Done</Button>
+            </DialogFooter>
+          </div>
+        ) : (
+          <>
+            <div className="space-y-2 py-2">
+              {available.map((key) => {
+                const fmt = FORMAT_LABELS[key];
+                if (!fmt) return null;
+                return (
+                  <label key={key} className="flex items-center gap-3 rounded-md border p-3 cursor-pointer hover:bg-muted/50">
+                    <input
+                      type="checkbox"
+                      checked={selected.has(key)}
+                      onChange={() => toggle(key)}
+                      className="h-4 w-4"
+                    />
+                    <span className="flex-1 text-sm font-medium">{fmt.label}</span>
+                    <span className="text-xs text-muted-foreground">{fmt.dimensions}</span>
+                  </label>
+                );
+              })}
+            </div>
+            <DialogFooter>
+              <Button variant="outline" onClick={onClose}>Cancel</Button>
+              <Button onClick={handleRepurpose} disabled={loading || selected.size === 0}>
+                {loading ? "Repurposing..." : `Repurpose to ${selected.size} format${selected.size !== 1 ? "s" : ""}`}
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

components/variation-modal.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+interface VariationModalProps {
+  assetId: string;
+  assetName: string;
+  onClose: () => void;
+}
+
+export function VariationModal({ assetId, assetName, onClose }: VariationModalProps) {
+  const [count, setCount] = useState(5);
+  const [loading, setLoading] = useState(false);
+  const [launched, setLaunched] = useState(false);
+
+  async function handleSpawn() {
+    setLoading(true);
+    await fetch(`/api/assets/${assetId}/variations`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ count }),
+    });
+    setLoading(false);
+    setLaunched(true);
+  }
+
+  function handleClose() {
+    setLaunched(false);
+    setCount(5);
+    onClose();
+  }
+
+  return (
+    <Dialog open onOpenChange={handleClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Spawn Variations</DialogTitle>
+          <DialogDescription>
+            Generate new ads with the same emotional pattern as &ldquo;{assetName}&rdquo; but with different hook angles.
+          </DialogDescription>
+        </DialogHeader>
+
+        {launched ? (
+          <div className="py-4 text-center">
+            <p className="text-lg font-semibold">Spawning {count} variations</p>
+            <p className="text-sm text-muted-foreground mt-1">
+              The AI pipeline is running. New assets will appear in the Asset Library when ready.
+            </p>
+            <DialogFooter>
+              <Button onClick={handleClose}>Done</Button>
+            </DialogFooter>
+          </div>
+        ) : (
+          <>
+            <div className="space-y-2 py-2">
+              <Label htmlFor="count">Number of Variations</Label>
+              <Input
+                id="count"
+                type="number"
+                min={1}
+                max={20}
+                value={count}
+                onChange={(e) => setCount(Math.max(1, Math.min(20, parseInt(e.target.value) || 5)))}
+              />
+              <p className="text-xs text-muted-foreground">
+                Each variation keeps the same visual style and CTA but explores a different hook angle.
+                Uses the original ad as a reference image for visual consistency.
+              </p>
+            </div>
+            <DialogFooter>
+              <Button variant="outline" onClick={handleClose}>Cancel</Button>
+              <Button onClick={handleSpawn} disabled={loading}>
+                {loading ? "Launching..." : `Spawn ${count} Variation${count !== 1 ? "s" : ""}`}
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}