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>
   );
 }