feat: Implement a new product form for creating and editing product details, including image uploads and marketplace metadata fetching, and refine video analysis skipping logic.

src/features/moderation/actions/edit-detection.ts

@@ -22,10 +22,18 @@ export interface EditDetectionData {
     category?: 'Tech' | 'Fashion' | 'Furniture' | 'Audio' | 'Other';
     thumbnailUrl?: string;
     marketplaceLinkOverrides?: Record<string, string>; // matchId → new affiliateUrl
+    marketplaceMatchUpdates?: Record<string, {
+        marketplace?: 'amazon' | 'ebay' | 'etsy';
+        productName?: string;
+        price?: number;
+        affiliateUrl?: string;
+    }>;
     newMarketplaceMatch?: NewMarketplaceMatch;
 }
 
 export async function editDetection(detectionId: string, data: EditDetectionData) {
+    console.log(`[editDetection] Input for ${detectionId}:`, JSON.stringify(data, null, 2));
+    console.log(`[editDetection] Starting update for ${detectionId}`, JSON.stringify(data, null, 2));
     try {
         const session = await auth.api.getSession({
             headers: await headers(),
@@ -74,6 +82,12 @@ export async function editDetection(detectionId: string, data: EditDetectionData
             editHistory: [...(currentMetadata.editHistory || []), historyEntry]
         };
 
+        console.log(`[editDetection] Updating detection:`, {
+            objectName: data.objectName,
+            category: data.category,
+            thumbnailUrl: data.thumbnailUrl
+        });
+
         // Update detection
         await db
             .update(detectedObjects)
@@ -101,6 +115,27 @@ export async function editDetection(detectionId: string, data: EditDetectionData
             }
         }
 
+        // Update detection matches with full details
+        if (data.marketplaceMatchUpdates) {
+            for (const [matchId, updates] of Object.entries(data.marketplaceMatchUpdates)) {
+                await db
+                    .update(marketplaceMatches)
+                    .set({
+                        ...(updates.marketplace ? { marketplace: updates.marketplace } : {}),
+                        ...(updates.productName ? { productName: updates.productName } : {}),
+                        ...(updates.price !== undefined ? { price: updates.price } : {}),
+                        ...(updates.affiliateUrl ? { affiliateUrl: updates.affiliateUrl } : {}),
+                        updatedAt: new Date(),
+                    })
+                    .where(
+                        and(
+                            eq(marketplaceMatches.id, matchId),
+                            eq(marketplaceMatches.objectId, detectionId)
+                        )
+                    );
+            }
+        }
+
         // Insert a new marketplace match if provided
         if (data.newMarketplaceMatch) {
             await db

src/features/moderation/components/add-product-dialog.tsx

@@ -1,22 +1,17 @@
-import React, { useState, useTransition, useEffect } from 'react';
+import React, { useState, useTransition } from 'react';
 import {
     Dialog,
     DialogContent,
     DialogDescription,
-    DialogFooter,
     DialogHeader,
     DialogTitle,
     DialogTrigger,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Plus, Save, Search, Loader2, Upload, Trash2, Image as ImageIcon, PlaySquare } from 'lucide-react';
+import { Plus } from 'lucide-react';
 import { addDetection } from '../actions/add-detection';
-import { fetchProductMetadata } from '../actions/fetch-product-metadata';
-import { uploadProductImage } from '../actions/upload-product-image';
 import { toast } from 'sonner';
+import { ProductForm, ProductFormData } from './product-form';
 
 interface Video {
     id: string;
@@ -39,218 +34,40 @@ interface AddProductDialogProps {
 
 export function AddProductDialog({ videos, onAdd }: AddProductDialogProps) {
     const [open, setOpen] = useState(false);
-    const [videoId, setVideoId] = useState(videos[0]?.id || '');
-    const [objectName, setObjectName] = useState('');
-    const [category, setCategory] = useState('Tech');
-    const [thumbnailUrl, setThumbnailUrl] = useState('');
-    const [frameTimestamp, setFrameTimestamp] = useState('0');
-    const [marketplace, setMarketplace] = useState('');
-    const [productName, setProductName] = useState('');
-    const [price, setPrice] = useState('');
-    const [affiliateUrl, setAffiliateUrl] = useState('');
-    const [snapshotUrl, setSnapshotUrl] = useState('');
     const [isPending, startTransition] = useTransition();
-    const [isFetching, setIsFetching] = useState(false);
-    const [isUploading, setIsUploading] = useState(false);
-    const [isUploadingSnapshot, setIsUploadingSnapshot] = useState(false);
-
-    // Auto-select video if videos list changes or when opening
-    useEffect(() => {
-        if (open && videos.length === 1) {
-            setVideoId(videos[0].id);
-        }
-    }, [open, videos]);
-
-    // Clipboard Paste Listener
-    useEffect(() => {
-        const handlePaste = async (e: ClipboardEvent) => {
-            if (!open) return;
-
-            // Only paste into the snapshot if we are not currently focused on an input
-            // that might want the paste data (like the image URL input)
-            const target = e.target as HTMLElement;
-            const isInput = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA';
-
-            // If it's an image in the clipboard, always prioritize snapshot
-            const items = e.clipboardData?.items;
-            if (!items) return;
-
-            for (let i = 0; i < items.length; i++) {
-                if (items[i].type.indexOf('image') !== -1) {
-                    let file = items[i].getAsFile();
-                    if (!file) continue;
-
-                    // Ensure file has a name for storage, as clipboard blobs often don't
-                    if (!file.name || file.name === 'blob') {
-                        const extension = file.type.split('/')[1] || 'png';
-                        file = new File([file], `paste-${Date.now()}.${extension}`, { type: file.type });
-                    }
-
-                    if (file.size > 10 * 1024 * 1024) {
-                        toast.error('Image too large (max 10MB)');
-                        continue;
-                    }
-
-                    setIsUploadingSnapshot(true);
-                    const formData = new FormData();
-                    formData.append('file', file);
-
-                    try {
-                        const result = await uploadProductImage(formData);
-                        if (result.success && result.url) {
-                            setSnapshotUrl(result.url);
-                            toast.success('Snapshot pasted from clipboard!');
-                        } else {
-                            toast.error(result.error || 'Failed to upload pasted image');
-                        }
-                    } catch (err: any) {
-                        console.error('Paste upload error:', err);
-                        toast.error(`Error uploading pasted image: ${err.message || 'Unknown error'}`);
-                    } finally {
-                        setIsUploadingSnapshot(false);
-                    }
-                    break;
-                }
-            }
-        };
-
-        window.addEventListener('paste', handlePaste);
-        return () => window.removeEventListener('paste', handlePaste);
-    }, [open]);
-
-    const resetForm = () => {
-        setVideoId(videos[0]?.id || '');
-        setObjectName('');
-        setCategory('Tech');
-        setThumbnailUrl('');
-        setFrameTimestamp('0');
-        setMarketplace('');
-        setProductName('');
-        setPrice('');
-        setAffiliateUrl('');
-    };
-
-    const handleFetchMetadata = async () => {
-        if (!affiliateUrl) return;
-
-        setIsFetching(true);
-        try {
-            const result = await fetchProductMetadata(affiliateUrl);
-            if (result.success && result.data) {
-                const { productName, price, marketplace, imageUrl } = result.data;
-                setObjectName(productName);
-                setProductName(productName);
-                setPrice(price.toString());
-                setMarketplace(marketplace);
-                if (imageUrl) {
-                    console.log('FETCH_DEBUG: Received imageUrl', imageUrl);
-                    setThumbnailUrl(imageUrl);
-                } else {
-                    console.warn('FETCH_DEBUG: No imageUrl returned');
-                }
-                toast.success('Product info fetched!');
-            } else {
-                toast.error(result.error || 'Could not fetch product info');
-            }
-        } catch (err) {
-            toast.error('Error fetching product info');
-        } finally {
-            setIsFetching(false);
-        }
-    };
-
-    const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-        const file = e.target.files?.[0];
-        if (!file) return;
-
-        setIsUploading(true);
-        const formData = new FormData();
-        formData.append('file', file);
-
-        try {
-            const result = await uploadProductImage(formData);
-            if (result.success && result.url) {
-                setThumbnailUrl(result.url);
-                toast.success('Image uploaded!');
-            } else {
-                toast.error(result.error || 'Failed to upload image');
-            }
-        } catch (err) {
-            toast.error('Error uploading image');
-        } finally {
-            setIsUploading(false);
-        }
-    };
-
-    const handleSnapshotUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-        const file = e.target.files?.[0];
-        if (!file) return;
-
-        setIsUploadingSnapshot(true);
-        const formData = new FormData();
-        formData.append('file', file);
-
-        try {
-            const result = await uploadProductImage(formData);
-            if (result.success && result.url) {
-                setSnapshotUrl(result.url);
-                toast.success('Snapshot uploaded!');
-            } else {
-                toast.error(result.error || 'Failed to upload snapshot');
-            }
-        } catch (err) {
-            toast.error('Error uploading snapshot');
-        } finally {
-            setIsUploadingSnapshot(false);
-        }
-    };
-
-    const handleSave = () => {
-        if (!videoId || !objectName || !category) {
-            toast.error('Please fill in required fields');
-            return;
-        }
 
+    const handleSubmit = (data: ProductFormData) => {
         startTransition(async () => {
             const result = await addDetection({
-                videoId,
-                objectName,
-                category: category as any,
-                thumbnailUrl: snapshotUrl || undefined, // Video snapshot
-                frameTimestamp: parseInt(frameTimestamp, 10) || 0,
-                marketplaceMatch: marketplace && (affiliateUrl || productName)
+                videoId: data.videoId,
+                objectName: data.objectName,
+                category: data.category as any,
+                thumbnailUrl: data.snapshotUrl || data.thumbnailUrl || undefined, // Prioritize snapshot, fallback to product image
+                frameTimestamp: data.frameTimestamp,
+                marketplaceMatch: data.marketplaceData
                     ? {
-                        marketplace: marketplace as any,
-                        productName: productName || objectName,
-                        price: parseFloat(price) || 0,
-                        affiliateUrl: affiliateUrl || '',
-                        imageUrl: thumbnailUrl || undefined, // Marketplace product image
+                        marketplace: data.marketplaceData.marketplace as any,
+                        productName: data.marketplaceData.productName,
+                        price: parseFloat(data.marketplaceData.price) || 0,
+                        affiliateUrl: data.marketplaceData.affiliateUrl,
+                        imageUrl: data.thumbnailUrl || undefined, // Provide product image for marketplace match
                     }
                     : undefined,
             });
 
             if (result.success) {
-                const selectedVideo = videos.find(v => v.id === videoId);
+                const selectedVideo = videos.find(v => v.id === data.videoId);
                 onAdd({
                     id: result.detectionId!,
-                    videoId,
+                    videoId: data.videoId,
                     videoTitle: selectedVideo?.title ?? '',
-                    objectName,
-                    category,
-                    frameTimestamp: parseInt(frameTimestamp, 10) || 0,
-                    thumbnailUrl: snapshotUrl || thumbnailUrl || undefined,
-                    hasMarketplaceMatch: !!(marketplace && (affiliateUrl || productName)),
+                    objectName: data.objectName,
+                    category: data.category,
+                    frameTimestamp: data.frameTimestamp, // Ensure int
+                    thumbnailUrl: data.snapshotUrl || data.thumbnailUrl || undefined,
+                    hasMarketplaceMatch: !!data.marketplaceData,
                 });
                 setOpen(false);
-                // Reset form
-                setObjectName('');
-                setCategory('Tech');
-                setThumbnailUrl('');
-                setSnapshotUrl('');
-                setProductName('');
-                setPrice('');
-                setAffiliateUrl('');
-                setMarketplace('');
                 toast.success('Product added successfully');
             } else {
                 toast.error(result.error || 'Failed to add product');
@@ -276,255 +93,13 @@ export function AddProductDialog({ videos, onAdd }: AddProductDialogProps) {
                     </DialogDescription>
                 </DialogHeader>
 
-                <div className="grid gap-6 py-4">
-                    {/* Link Section - Prioritized */}
-                    <div className="space-y-4 p-4 rounded-xl bg-primary/5 border border-primary/10">
-                        <div className="grid gap-2">
-                            <Label htmlFor="affiliate-url" className="text-sm font-medium text-primary">Affiliate or Product URL</Label>
-                            <div className="flex gap-2">
-                                <Input
-                                    id="affiliate-url"
-                                    value={affiliateUrl}
-                                    onChange={(e) => setAffiliateUrl(e.target.value)}
-                                    placeholder="Paste Amazon, eBay, or Etsy link..."
-                                    className="bg-background/50"
-                                    onBlur={() => {
-                                        if (affiliateUrl && !objectName) handleFetchMetadata();
-                                    }}
-                                />
-                                <Button
-                                    size="icon"
-                                    onClick={handleFetchMetadata}
-                                    disabled={isFetching || !affiliateUrl}
-                                    className="shrink-0"
-                                >
-                                    {isFetching ? <Loader2 className="h-4 w-4 animate-spin" /> : <Search className="h-4 w-4" />}
-                                </Button>
-                            </div>
-                            <p className="text-[10px] text-muted-foreground">
-                                Supported: Amazon, eBay, Etsy. We'll try to fetch price, name, and image.
-                            </p>
-                        </div>
-
-                        {marketplace && (
-                            <div className="grid grid-cols-2 gap-4 animate-in fade-in slide-in-from-top-2">
-                                <div className="grid gap-2">
-                                    <Label className="text-xs">Marketplace</Label>
-                                    <Select value={marketplace} onValueChange={setMarketplace}>
-                                        <SelectTrigger className="h-8 text-xs bg-background/50">
-                                            <SelectValue />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                            <SelectItem value="amazon">Amazon</SelectItem>
-                                            <SelectItem value="ebay">eBay</SelectItem>
-                                            <SelectItem value="etsy">Etsy</SelectItem>
-                                        </SelectContent>
-                                    </Select>
-                                </div>
-                                <div className="grid gap-2">
-                                    <Label htmlFor="price" className="text-xs">Price ($)</Label>
-                                    <Input
-                                        id="price"
-                                        type="number"
-                                        value={price}
-                                        onChange={(e) => setPrice(e.target.value)}
-                                        className="h-8 text-xs bg-background/50"
-                                    />
-                                </div>
-                            </div>
-                        )}
-                    </div>
-
-                    <div className="grid gap-4 px-1">
-                        <div className="grid gap-2">
-                            <Label htmlFor="object-name">Object / Product Name *</Label>
-                            <Input
-                                id="object-name"
-                                value={objectName}
-                                onChange={(e) => setObjectName(e.target.value)}
-                                placeholder="e.g. Sony WH-1000XM5"
-                            />
-                        </div>
-
-                        <div className="grid grid-cols-1 gap-4">
-                            <div className="grid gap-2">
-                                <Label>Video *</Label>
-                                <Select value={videoId} onValueChange={setVideoId}>
-                                    <SelectTrigger className="w-full">
-                                        <SelectValue placeholder="Select video" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        {videos.map(v => (
-                                            <SelectItem key={v.id} value={v.id}>{v.title}</SelectItem>
-                                        ))}
-                                    </SelectContent>
-                                </Select>
-                            </div>
-                            <div className="grid gap-2">
-                                <Label>Category *</Label>
-                                <Select value={category} onValueChange={setCategory}>
-                                    <SelectTrigger className="w-full">
-                                        <SelectValue />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem value="Tech">Tech</SelectItem>
-                                        <SelectItem value="Fashion">Fashion</SelectItem>
-                                        <SelectItem value="Furniture">Furniture</SelectItem>
-                                        <SelectItem value="Audio">Audio</SelectItem>
-                                        <SelectItem value="Other">Other</SelectItem>
-                                    </SelectContent>
-                                </Select>
-                            </div>
-                        </div>
-
-                        <div className="grid grid-cols-1 gap-4">
-                            <div className="grid gap-2">
-                                <Label htmlFor="timestamp">Video Timestamp (sec)</Label>
-                                <Input
-                                    id="timestamp"
-                                    type="number"
-                                    value={frameTimestamp}
-                                    onChange={(e) => setFrameTimestamp(e.target.value)}
-                                />
-                            </div>
-                            <div className="grid grid-cols-2 gap-6">
-                                {/* Product Image Section */}
-                                <div className="space-y-3">
-                                    <Label className="text-sm font-semibold flex items-center gap-2 h-6">
-                                        <ImageIcon className="h-4 w-4 text-primary" />
-                                        Product Image
-                                    </Label>
-                                    <div className="space-y-3">
-                                        <div className="relative aspect-square w-full rounded-xl overflow-hidden border border-white/10 bg-white/5 group">
-                                            {thumbnailUrl ? (
-                                                <>
-                                                    <img
-                                                        src={thumbnailUrl}
-                                                        alt="Product"
-                                                        className="w-full h-full object-contain"
-                                                        onError={() => {
-                                                            console.error('IMAGE_LOAD_ERROR: Failed to load', thumbnailUrl);
-                                                            // Optional: toast.error('Check your internet or image URL');
-                                                        }}
-                                                    />
-                                                    <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-all duration-200">
-                                                        <Button variant="destructive" size="icon" onClick={() => setThumbnailUrl('')} className="rounded-full shadow-xl transform scale-90 hover:scale-100 transition-transform">
-                                                            <Trash2 className="h-4 w-4" />
-                                                        </Button>
-                                                    </div>
-                                                </>
-                                            ) : (
-                                                <div className="absolute inset-0 flex flex-col items-center justify-center text-muted-foreground p-4 text-center">
-                                                    <ImageIcon className="h-8 w-8 mb-2 opacity-20" />
-                                                    <span className="text-[10px]">Marketplace or Custom Image</span>
-                                                </div>
-                                            )}
-                                            {isUploading && (
-                                                <div className="absolute inset-0 bg-black/60 backdrop-blur-[2px] flex items-center justify-center">
-                                                    <Loader2 className="h-6 w-6 animate-spin text-primary" />
-                                                </div>
-                                            )}
-                                        </div>
-                                        <div className="flex gap-2">
-                                            <div className="relative flex-1">
-                                                <Input
-                                                    value={thumbnailUrl}
-                                                    onChange={(e) => setThumbnailUrl(e.target.value)}
-                                                    placeholder="Image URL"
-                                                    className="h-9 text-xs pr-8 bg-background/50"
-                                                />
-                                            </div>
-                                            <div className="relative">
-                                                <input type="file" id="prod-upload" className="hidden" accept="image/*" onChange={handleImageUpload} disabled={isUploading} />
-                                                <Button variant="outline" size="icon" className="h-9 w-9 shrink-0" asChild disabled={isUploading}>
-                                                    <label htmlFor="prod-upload" className="cursor-pointer flex items-center justify-center w-full h-full">
-                                                        <Upload className="h-4 w-4" />
-                                                    </label>
-                                                </Button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                {/* In-Video Snapshot Section */}
-                                <div className="space-y-3">
-                                    <Label className="text-sm font-semibold flex items-center gap-2 h-6">
-                                        <PlaySquare className="h-4 w-4 text-secondary" />
-                                        In-Video Snapshot
-                                        <span className="ml-auto text-[10px] font-normal text-muted-foreground bg-white/5 px-1.5 py-0.5 rounded border border-white/10 animate-pulse">
-                                            Cmd+V to Paste
-                                        </span>
-                                    </Label>
-                                    <div className="space-y-3">
-                                        <div className="relative aspect-square w-full rounded-xl overflow-hidden border border-white/10 bg-white/5 group">
-                                            {snapshotUrl ? (
-                                                <>
-                                                    <img src={snapshotUrl} alt="Snapshot" className="w-full h-full object-cover" />
-                                                    <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-all duration-200">
-                                                        <Button variant="destructive" size="icon" onClick={() => setSnapshotUrl('')} className="rounded-full shadow-xl transform scale-90 hover:scale-100 transition-transform">
-                                                            <Trash2 className="h-4 w-4" />
-                                                        </Button>
-                                                    </div>
-                                                </>
-                                            ) : (
-                                                <div className="absolute inset-0 flex flex-col items-center justify-center text-muted-foreground p-4 text-center">
-                                                    <PlaySquare className="h-8 w-8 mb-2 opacity-20" />
-                                                    <span className="text-[10px]">Actual moment from video</span>
-                                                </div>
-                                            )}
-                                            {isUploadingSnapshot && (
-                                                <div className="absolute inset-0 bg-black/60 backdrop-blur-[2px] flex items-center justify-center">
-                                                    <Loader2 className="h-6 w-6 animate-spin text-secondary" />
-                                                </div>
-                                            )}
-                                        </div>
-                                        <div className="flex gap-2">
-                                            <div className="relative flex-1">
-                                                <Input
-                                                    value={snapshotUrl}
-                                                    onChange={(e) => setSnapshotUrl(e.target.value)}
-                                                    placeholder="Snapshot URL"
-                                                    className="h-9 text-xs pr-8 bg-background/50"
-                                                />
-                                            </div>
-                                            <div className="relative">
-                                                <input type="file" id="snap-upload" className="hidden" accept="image/*" onChange={handleSnapshotUpload} disabled={isUploadingSnapshot} />
-                                                <Button variant="outline" size="icon" className="h-9 w-9 shrink-0" asChild disabled={isUploadingSnapshot}>
-                                                    <label htmlFor="snap-upload" className="cursor-pointer flex items-center justify-center w-full h-full">
-                                                        <Upload className="h-4 w-4" />
-                                                    </label>
-                                                </Button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <DialogFooter className="gap-2 sm:gap-0">
-                    <Button variant="ghost" onClick={() => { setOpen(false); resetForm(); }} disabled={isPending}>
-                        Cancel
-                    </Button>
-                    <Button
-                        onClick={handleSave}
-                        disabled={isPending || !videoId || !objectName || !category}
-                        className="bg-primary hover:bg-primary/90 shadow-lg shadow-primary/20"
-                    >
-                        {isPending ? (
-                            <>
-                                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                                Adding...
-                            </>
-                        ) : (
-                            <>
-                                <Save className="w-4 h-4 mr-2" />
-                                Add to Vault
-                            </>
-                        )}
-                    </Button>
-                </DialogFooter>
+                <ProductForm
+                    mode="create"
+                    videos={videos}
+                    onSubmit={handleSubmit}
+                    onCancel={() => setOpen(false)}
+                    isSubmitting={isPending}
+                />
             </DialogContent>
         </Dialog>
     );

src/features/moderation/components/edit-detection-dialog.tsx

@@ -5,32 +5,23 @@ import {
     Dialog,
     DialogContent,
     DialogDescription,
-    DialogFooter,
     DialogHeader,
     DialogTitle,
     DialogTrigger,
 } from '@/components/ui/dialog';
-import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Edit2, Save, Plus } from 'lucide-react';
+import { Edit2 } from 'lucide-react';
 import { editDetection } from '../actions/edit-detection';
 import { toast } from 'sonner';
+import { ProductForm, ProductFormData } from './product-form';
 
 interface MarketplaceMatch {
     id: string;
     marketplace: string;
     productName: string;
     affiliateUrl: string;
-}
-
-interface NewMatch {
-    marketplace: string;
-    productName: string;
-    price: string;
-    affiliateUrl: string;
+    price?: number; // Optional in interface, but helps if available
+    imageUrl?: string; // Product Image from marketplace
 }
 
 interface EditDetectionDialogProps {
@@ -39,6 +30,7 @@ interface EditDetectionDialogProps {
         objectName: string;
         category: string;
         thumbnailUrl?: string | null;
+        frameTimestamp?: number; // Add if available in detection object from parent, usually it is
     };
     marketplaceMatches: MarketplaceMatch[];
     onSave: (updated: { objectName: string; category: string; thumbnailUrl?: string }) => void;
@@ -46,35 +38,57 @@ interface EditDetectionDialogProps {
 
 export function EditDetectionDialog({ detection, marketplaceMatches, onSave }: EditDetectionDialogProps) {
     const [open, setOpen] = useState(false);
-    const [name, setName] = useState(detection.objectName);
-    const [category, setCategory] = useState(detection.category);
-    const [thumbnailUrl, setThumbnailUrl] = useState(detection.thumbnailUrl ?? '');
-    const [linkOverrides, setLinkOverrides] = useState<Record<string, string>>({});
-    const [newMatch, setNewMatch] = useState<NewMatch>({ marketplace: '', productName: '', price: '', affiliateUrl: '' });
-    const [showNewMatch, setShowNewMatch] = useState(false);
     const [isPending, startTransition] = useTransition();
 
-    const handleSave = () => {
+    // Determine primary match (first one)
+    const primaryMatch = marketplaceMatches[0];
+
+    const handleSubmit = (data: ProductFormData) => {
         startTransition(async () => {
-            const result = await editDetection(detection.id, {
-                objectName: name,
-                category: category as any,
-                thumbnailUrl: thumbnailUrl || undefined,
-                marketplaceLinkOverrides: Object.keys(linkOverrides).length > 0 ? linkOverrides : undefined,
-                newMarketplaceMatch: showNewMatch && newMatch.marketplace && newMatch.affiliateUrl
-                    ? { marketplace: newMatch.marketplace as any, productName: newMatch.productName, price: parseFloat(newMatch.price) || 0, affiliateUrl: newMatch.affiliateUrl }
-                    : undefined,
-            });
+            // Prepare update payload
+            const payload: any = {
+                objectName: data.objectName,
+                category: data.category as any,
+                thumbnailUrl: data.snapshotUrl || data.thumbnailUrl || undefined,
+            };
+
+            // Handle Marketplace Data
+            if (data.marketplaceData) {
+                if (primaryMatch) {
+                    // Update existing primary match
+                    payload.marketplaceMatchUpdates = {
+                        [primaryMatch.id]: {
+                            marketplace: data.marketplaceData.marketplace as any,
+                            productName: data.marketplaceData.productName,
+                            price: parseFloat(data.marketplaceData.price) || 0,
+                            affiliateUrl: data.marketplaceData.affiliateUrl,
+                        }
+                    };
+                } else {
+                    // Create new match
+                    payload.newMarketplaceMatch = {
+                        marketplace: data.marketplaceData.marketplace as any,
+                        productName: data.marketplaceData.productName,
+                        price: parseFloat(data.marketplaceData.price) || 0,
+                        affiliateUrl: data.marketplaceData.affiliateUrl,
+                    };
+                }
+            }
+
+            console.log('[EditDetectionDialog] Submitting payload:', payload);
+
+            const result = await editDetection(detection.id, payload);
 
             if (result.success) {
-                onSave({ objectName: name, category, thumbnailUrl: thumbnailUrl || undefined });
+                onSave({
+                    objectName: data.objectName,
+                    category: data.category,
+                    thumbnailUrl: data.snapshotUrl || data.thumbnailUrl || undefined
+                });
                 setOpen(false);
-                setLinkOverrides({});
-                setNewMatch({ marketplace: '', productName: '', price: '', affiliateUrl: '' });
-                setShowNewMatch(false);
                 toast.success('Detection updated');
             } else {
-                toast.error(result.error);
+                toast.error(result.error || 'Failed to update detection');
             }
         });
     };
@@ -86,137 +100,40 @@ export function EditDetectionDialog({ detection, marketplaceMatches, onSave }: E
                     <Edit2 className="w-4 h-4" />
                 </Button>
             </DialogTrigger>
-            <DialogContent className="sm:max-w-[500px] bg-card/95 backdrop-blur-md border-border/50">
+            <DialogContent className="sm:max-w-[540px] bg-card/95 backdrop-blur-xl border-white/10 max-h-[90vh] overflow-y-auto">
                 <DialogHeader>
-                    <DialogTitle>Edit Detection</DialogTitle>
+                    <DialogTitle className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-amber-400">
+                        Edit Detection
+                    </DialogTitle>
                     <DialogDescription>
                         Manually override the AI-detected object details.
                     </DialogDescription>
                 </DialogHeader>
-                <div className="grid gap-4 py-4">
-                    <div className="grid gap-2">
-                        <Label htmlFor="name">Object Name</Label>
-                        <Input
-                            id="name"
-                            value={name}
-                            onChange={(e) => setName(e.target.value)}
-                            placeholder="e.g. Sony WH-1000XM4"
-                        />
-                    </div>
-                    <div className="grid gap-2">
-                        <Label htmlFor="category">Category</Label>
-                        <Select value={category} onValueChange={setCategory}>
-                            <SelectTrigger>
-                                <SelectValue placeholder="Select category" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="Tech">Tech</SelectItem>
-                                <SelectItem value="Fashion">Fashion</SelectItem>
-                                <SelectItem value="Furniture">Furniture</SelectItem>
-                                <SelectItem value="Audio">Audio</SelectItem>
-                                <SelectItem value="Other">Other</SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </div>
-                    <div className="grid gap-2">
-                        <Label htmlFor="thumbnail-url">Thumbnail URL</Label>
-                        <Input
-                            id="thumbnail-url"
-                            value={thumbnailUrl}
-                            onChange={(e) => setThumbnailUrl(e.target.value)}
-                            placeholder="https://... (object detection crop image)"
-                        />
-                    </div>
-                    {marketplaceMatches.length > 0 && (
-                        <div className="grid gap-2">
-                            <Label>Marketplace Links</Label>
-                            <div className="space-y-2 max-h-32 overflow-y-auto pr-1">
-                                {marketplaceMatches.map((match) => (
-                                    <div key={match.id} className="flex items-center gap-2">
-                                        <Badge variant="outline" className="text-xs whitespace-nowrap shrink-0">{match.marketplace}</Badge>
-                                        <Input
-                                            value={linkOverrides[match.id] ?? match.affiliateUrl}
-                                            onChange={(e) => setLinkOverrides(prev => ({ ...prev, [match.id]: e.target.value }))}
-                                            placeholder="Affiliate URL"
-                                            className="text-xs"
-                                        />
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-                    )}
-                    <div className="grid gap-2">
-                        <button
-                            type="button"
-                            onClick={() => setShowNewMatch(!showNewMatch)}
-                            className="flex items-center gap-1.5 text-sm text-primary hover:text-primary/80 transition-colors w-fit"
-                        >
-                            <Plus className="w-3.5 h-3.5" />
-                            {showNewMatch ? 'Hide new link' : 'Add marketplace link'}
-                        </button>
-                        {showNewMatch && (
-                            <div className="border border-border/50 rounded-lg p-3 space-y-3 bg-card/50">
-                                <div className="grid gap-2">
-                                    <Label className="text-xs">Marketplace</Label>
-                                    <Select value={newMatch.marketplace} onValueChange={(v) => setNewMatch(prev => ({ ...prev, marketplace: v }))}>
-                                        <SelectTrigger className="text-xs">
-                                            <SelectValue placeholder="Select marketplace" />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                            <SelectItem value="amazon">Amazon</SelectItem>
-                                            <SelectItem value="ebay">eBay</SelectItem>
-                                            <SelectItem value="etsy">Etsy</SelectItem>
-                                        </SelectContent>
-                                    </Select>
-                                </div>
-                                <div className="grid gap-2">
-                                    <Label htmlFor="new-product-name" className="text-xs">Product Name</Label>
-                                    <Input
-                                        id="new-product-name"
-                                        value={newMatch.productName}
-                                        onChange={(e) => setNewMatch(prev => ({ ...prev, productName: e.target.value }))}
-                                        placeholder="e.g. Sony WH-1000XM5"
-                                        className="text-xs"
-                                    />
-                                </div>
-                                <div className="grid grid-cols-2 gap-2">
-                                    <div className="grid gap-2">
-                                        <Label htmlFor="new-price" className="text-xs">Price ($)</Label>
-                                        <Input
-                                            id="new-price"
-                                            type="number"
-                                            min="0"
-                                            step="0.01"
-                                            value={newMatch.price}
-                                            onChange={(e) => setNewMatch(prev => ({ ...prev, price: e.target.value }))}
-                                            placeholder="29.99"
-                                            className="text-xs"
-                                        />
-                                    </div>
-                                </div>
-                                <div className="grid gap-2">
-                                    <Label htmlFor="new-affiliate-url" className="text-xs">Affiliate URL</Label>
-                                    <Input
-                                        id="new-affiliate-url"
-                                        value={newMatch.affiliateUrl}
-                                        onChange={(e) => setNewMatch(prev => ({ ...prev, affiliateUrl: e.target.value }))}
-                                        placeholder="https://amazon.com/..."
-                                        className="text-xs"
-                                    />
-                                </div>
-                            </div>
-                        )}
-                    </div>
-                </div>
-                <DialogFooter>
-                    <Button variant="outline" onClick={() => setOpen(false)} disabled={isPending}>
-                        Cancel
-                    </Button>
-                    <Button onClick={handleSave} disabled={isPending}>
-                        {isPending ? 'Saving...' : 'Save Changes'}
-                        {!isPending && <Save className="w-4 h-4 ml-2" />}
-                    </Button>
-                </DialogFooter>
+
+                <ProductForm
+                    mode="edit"
+                    initialData={{
+                        videoId: '', // Not needed for edit
+                        objectName: detection.objectName,
+                        category: detection.category,
+                        // If we have a marketplace match with an image, use that as "Product Image"
+                        // Otherwise, fallback to empty string (user can upload one)
+                        thumbnailUrl: primaryMatch?.imageUrl || '',
+                        // The detection thumbnail is actually the snapshot from the video
+                        // If it matches the product image (fallback), show empty snapshot to encourage upload
+                        snapshotUrl: (detection.thumbnailUrl && detection.thumbnailUrl === primaryMatch?.imageUrl) ? '' : (detection.thumbnailUrl || ''),
+                        frameTimestamp: detection.frameTimestamp || 0,
+                        marketplaceData: primaryMatch ? {
+                            marketplace: primaryMatch.marketplace,
+                            productName: primaryMatch.productName,
+                            price: primaryMatch.price?.toString() || '',
+                            affiliateUrl: primaryMatch.affiliateUrl,
+                        } : undefined
+                    }}
+                    onSubmit={handleSubmit}
+                    onCancel={() => setOpen(false)}
+                    isSubmitting={isPending}
+                />
             </DialogContent>
         </Dialog>
     );

src/features/moderation/components/moderation-queue.tsx

@@ -61,14 +61,14 @@ export function ModerationQueue({ initialDetections, userId, videos, stats, init
         // Status and confidence filter
         if (d.detection.moderationStatus !== filterStatus) return false;
         if (d.detection.confidenceScore < minConfidence) return false;
-        
+
         // Video filter
         if (filterVideo !== 'all' && d.video.id !== filterVideo) return false;
-        
+
         // Affiliate link filter
         if (filterHasLink === 'with-link' && d.marketplaceMatches.length === 0) return false;
         if (filterHasLink === 'without-link' && d.marketplaceMatches.length > 0) return false;
-        
+
         return true;
     });
 
@@ -187,9 +187,8 @@ export function ModerationQueue({ initialDetections, userId, videos, stats, init
                         key={status}
                         type="button"
                         onClick={() => setFilterStatus(status)}
-                        className={`text-left p-4 rounded-lg border transition-all group ${
-                            filterStatus === status ? activeClasses : 'bg-card/40 backdrop-blur-md border-border/40 hover:bg-card/60'
-                        }`}
+                        className={`text-left p-4 rounded-lg border transition-all group ${filterStatus === status ? activeClasses : 'bg-card/40 backdrop-blur-md border-border/40 hover:bg-card/60'
+                            }`}
                     >
                         <div className="flex items-center justify-between pb-2">
                             <span className="text-sm font-medium">{title}</span>
@@ -279,41 +278,41 @@ export function ModerationQueue({ initialDetections, userId, videos, stats, init
                         Showing {filteredDetections.length} of {detections.filter(d => d.detection.moderationStatus === filterStatus).length} items
                     </div>
                     <AddProductDialog
-                    videos={videos}
-                    onAdd={(newItem) => {
-                        setDetections(prev => [{
-                            detection: {
-                                id: newItem.id,
-                                objectName: newItem.objectName,
-                                category: newItem.category,
-                                confidenceScore: 1,
-                                moderationStatus: 'PENDING',
-                                thumbnailUrl: newItem.thumbnailUrl ?? null,
-                                createdAt: new Date(),
-                            },
-                            video: {
-                                id: newItem.videoId,
-                                title: newItem.videoTitle,
-                                thumbnailUrl: '',
-                            },
-                            marketplaceMatches: newItem.hasMarketplaceMatch ? [{ id: 'new', marketplace: 'amazon', productName: '', affiliateUrl: '' }] : [],
-                            clickCount: 0,
-                            interestPledgeCount: 0,
-                        }, ...prev]);
-                    }}
-                />
+                        videos={videos}
+                        onAdd={(newItem) => {
+                            setDetections(prev => [{
+                                detection: {
+                                    id: newItem.id,
+                                    objectName: newItem.objectName,
+                                    category: newItem.category,
+                                    confidenceScore: 1,
+                                    moderationStatus: 'PENDING',
+                                    thumbnailUrl: newItem.thumbnailUrl ?? null,
+                                    createdAt: new Date(),
+                                },
+                                video: {
+                                    id: newItem.videoId,
+                                    title: newItem.videoTitle,
+                                    thumbnailUrl: '',
+                                },
+                                marketplaceMatches: newItem.hasMarketplaceMatch ? [{ id: 'new', marketplace: 'amazon', productName: '', affiliateUrl: '' }] : [],
+                                clickCount: 0,
+                                interestPledgeCount: 0,
+                            }, ...prev]);
+                        }}
+                    />
                 </div>
             </div>
 
             {selectedIds.length > 0 && (
                 <div className="flex items-center gap-2 bg-primary/10 px-4 py-2 rounded-full border border-primary/20 animate-in fade-in slide-in-from-top-2">
-                        <span className="text-sm font-medium mr-2">{selectedIds.length} selected</span>
-                        <Button size="sm" onClick={handleBulkApprove} disabled={isPending}>
-                            <Check className="w-4 h-4 mr-1" /> Approve
-                        </Button>
-                        <Button size="sm" variant="destructive" onClick={handleBulkReject} disabled={isPending}>
-                            <X className="w-4 h-4 mr-1" /> Reject
-                        </Button>
+                    <span className="text-sm font-medium mr-2">{selectedIds.length} selected</span>
+                    <Button size="sm" onClick={handleBulkApprove} disabled={isPending}>
+                        <Check className="w-4 h-4 mr-1" /> Approve
+                    </Button>
+                    <Button size="sm" variant="destructive" onClick={handleBulkReject} disabled={isPending}>
+                        <X className="w-4 h-4 mr-1" /> Reject
+                    </Button>
                 </div>
             )}
 
@@ -328,112 +327,145 @@ export function ModerationQueue({ initialDetections, userId, videos, stats, init
 
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                 {filteredDetections.length > 0 ? (
-                    filteredDetections.map((d) => (
-                        <Card key={d.detection.id} className={`group overflow-hidden transition-all hover:ring-2 hover:ring-primary/50 ${selectedIds.includes(d.detection.id) ? 'ring-2 ring-primary' : 'bg-card/40 backdrop-blur-md border-border/40'}`}>
-                            <div className="relative aspect-video overflow-hidden">
-                                {d.detection.thumbnailUrl ? (
-                                    <Image
-                                        src={d.detection.thumbnailUrl}
-                                        alt={d.detection.objectName}
-                                        fill
-                                        className="object-cover transition-transform group-hover:scale-105"
-                                    />
-                                ) : (
-                                    <div className="w-full h-full bg-muted flex items-center justify-center">
-                                        <Filter className="w-8 h-8 text-muted-foreground" />
-                                    </div>
-                                )}
-                                <div className="absolute top-2 left-2">
-                                    <Checkbox
-                                        checked={selectedIds.includes(d.detection.id)}
-                                        onCheckedChange={() => toggleSelection(d.detection.id)}
-                                        className="bg-background/80 backdrop-blur-sm"
-                                    />
-                                </div>
-                                <div className="absolute top-2 right-2 flex flex-col gap-1 items-end">
-                                    <Badge variant="secondary" className="bg-background/80 backdrop-blur-sm">
-                                        {Math.round(d.detection.confidenceScore * 100)}%
-                                    </Badge>
-                                    {d.clickCount > 0 && (
-                                        <Badge variant="secondary" className="bg-blue-500/90 text-white backdrop-blur-sm flex items-center gap-1 text-xs px-1.5 py-0.5">
-                                            <MousePointerClick className="h-3 w-3" />
-                                            {d.clickCount}
-                                        </Badge>
+                    filteredDetections.map((d) => {
+                        const primaryMatch = d.marketplaceMatches[0];
+                        const productImage = primaryMatch?.imageUrl;
+                        const snapshotImage = d.detection.thumbnailUrl;
+
+                        // Main image priority: Product Image -> Snapshot
+                        const mainImage = productImage || snapshotImage;
+
+                        // PiP Logic: Show Snapshot if we have BOTH images and they are different
+                        // (i.e. snapshot is not just a fallback copy of product image)
+                        const isSnapshotFallback = snapshotImage === productImage;
+                        const showPip = snapshotImage && productImage && !isSnapshotFallback;
+
+                        return (
+                            <Card key={d.detection.id} className={`group overflow-hidden transition-all hover:ring-2 hover:ring-primary/50 ${selectedIds.includes(d.detection.id) ? 'ring-2 ring-primary' : 'bg-card/40 backdrop-blur-md border-border/40'}`}>
+                                <div className="relative aspect-square overflow-hidden bg-muted">
+                                    {mainImage ? (
+                                        <Image
+                                            src={mainImage}
+                                            alt={d.detection.objectName}
+                                            fill
+                                            className="object-contain transition-transform group-hover:scale-105"
+                                        />
+                                    ) : (
+                                        <div className="w-full h-full bg-muted flex items-center justify-center">
+                                            <Filter className="w-8 h-8 text-muted-foreground" />
+                                        </div>
                                     )}
-                                    {d.interestPledgeCount > 0 && (
-                                        <Badge variant="secondary" className="bg-rose-500/90 text-white backdrop-blur-sm flex items-center gap-1 text-xs px-1.5 py-0.5">
-                                            <Heart className="h-3 w-3" />
-                                            {d.interestPledgeCount}
-                                        </Badge>
+
+                                    {/* Video Snapshot Inset (PiP) */}
+                                    {showPip && (
+                                        <div className="absolute bottom-2 left-2 w-16 h-16 rounded-lg overflow-hidden border-2 border-background shadow-xl z-20 transition-transform duration-300 group-hover:translate-x-1 group-hover:-translate-y-1">
+                                            <Image
+                                                src={snapshotImage!}
+                                                alt="In video"
+                                                fill
+                                                className="object-cover"
+                                                sizes="64px"
+                                            />
+                                            <div className="absolute inset-0 bg-black/20" />
+                                            <div className="absolute bottom-0 left-0 right-0 bg-black/60 py-0.5 px-0.5">
+                                                <span className="text-[6px] font-bold text-white uppercase tracking-tighter block text-center">
+                                                    IN VIDEO
+                                                </span>
+                                            </div>
+                                        </div>
                                     )}
-                                </div>
-                                {d.marketplaceMatches.length > 0 && (
-                                    <div className="absolute bottom-2 left-2">
-                                        <Badge variant="default" className="bg-emerald-500/90 gap-1">
-                                            <ShoppingCart className="w-3 h-3" /> {d.marketplaceMatches.length} matches
+                                    <div className="absolute top-2 left-2">
+                                        <Checkbox
+                                            checked={selectedIds.includes(d.detection.id)}
+                                            onCheckedChange={() => toggleSelection(d.detection.id)}
+                                            className="bg-background/80 backdrop-blur-sm"
+                                        />
+                                    </div>
+                                    <div className="absolute top-2 right-2 flex flex-col gap-1 items-end">
+                                        <Badge variant="secondary" className="bg-background/80 backdrop-blur-sm">
+                                            {Math.round(d.detection.confidenceScore * 100)}%
                                         </Badge>
+                                        {d.clickCount > 0 && (
+                                            <Badge variant="secondary" className="bg-blue-500/90 text-white backdrop-blur-sm flex items-center gap-1 text-xs px-1.5 py-0.5">
+                                                <MousePointerClick className="h-3 w-3" />
+                                                {d.clickCount}
+                                            </Badge>
+                                        )}
+                                        {d.interestPledgeCount > 0 && (
+                                            <Badge variant="secondary" className="bg-rose-500/90 text-white backdrop-blur-sm flex items-center gap-1 text-xs px-1.5 py-0.5">
+                                                <Heart className="h-3 w-3" />
+                                                {d.interestPledgeCount}
+                                            </Badge>
+                                        )}
                                     </div>
-                                )}
-                            </div>
-
-                            <CardHeader className="p-4 py-3 space-y-1">
-                                <div className="flex justify-between items-start">
-                                    <CardTitle className="text-lg font-bold truncate pr-2">
-                                        {d.detection.objectName}
-                                    </CardTitle>
-                                    <EditDetectionDialog
-                                        detection={d.detection}
-                                        marketplaceMatches={d.marketplaceMatches}
-                                        onSave={(updated: { objectName: string; category: string; thumbnailUrl?: string }) => {
-                                            setDetections(prev => prev.map(item =>
-                                                item.detection.id === d.detection.id ? { ...item, detection: { ...item.detection, ...updated } } : item
-                                            ));
-                                        }}
-                                    />
-                                </div>
-                                <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                                    <Badge variant="outline" className="text-[10px] uppercase">
-                                        {d.detection.category}
-                                    </Badge>
-                                    <span className="text-[10px] truncate">• {d.video.title}</span>
+                                    {d.marketplaceMatches.length > 0 && (
+                                        <div className="absolute bottom-2 right-2">
+                                            <Badge variant="default" className="bg-emerald-500/90 gap-1">
+                                                <ShoppingCart className="w-3 h-3" /> {d.marketplaceMatches.length} matches
+                                            </Badge>
+                                        </div>
+                                    )}
                                 </div>
-                            </CardHeader>
 
-                            <CardFooter className="p-4 pt-0 gap-2">
-                                {filterStatus === 'PENDING' ? (
-                                    <>
-                                        <Button
-                                            variant="secondary"
-                                            className="grow bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-500 border-none"
-                                            onClick={() => handleApprove(d.detection.id)}
-                                            disabled={isPending}
-                                        >
-                                            <Check className="w-4 h-4 mr-2" /> Approve
-                                        </Button>
-                                        <Button
-                                            variant="secondary"
-                                            className="grow bg-rose-500/10 hover:bg-rose-500/20 text-rose-500 border-none"
-                                            onClick={() => handleReject(d.detection.id)}
-                                            disabled={isPending}
-                                        >
-                                            <X className="w-4 h-4 mr-2" /> Reject
-                                        </Button>
-                                    </>
-                                ) : (
-                                    <div className="flex items-center text-sm font-medium gap-2 py-2 text-muted-foreground">
-                                        {filterStatus === 'APPROVED' ? (
-                                            <><CheckCircle2 className="w-4 h-4 text-emerald-500" /> Approved</>
-                                        ) : (
-                                            <><X className="w-4 h-4 text-rose-500" /> Rejected</>
-                                        )}
-                                        <Button variant="link" size="sm" className="h-auto p-0 ml-auto" onClick={() => handleReset(d.detection.id)} disabled={isPending}>
-                                            Reset
-                                        </Button>
+                                <CardHeader className="p-4 py-3 space-y-1">
+                                    <div className="flex justify-between items-start">
+                                        <CardTitle className="text-lg font-bold truncate pr-2">
+                                            {d.detection.objectName}
+                                        </CardTitle>
+                                        <EditDetectionDialog
+                                            detection={d.detection}
+                                            marketplaceMatches={d.marketplaceMatches}
+                                            onSave={(updated: { objectName: string; category: string; thumbnailUrl?: string }) => {
+                                                setDetections(prev => prev.map(item =>
+                                                    item.detection.id === d.detection.id ? { ...item, detection: { ...item.detection, ...updated } } : item
+                                                ));
+                                            }}
+                                        />
+                                    </div>
+                                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                                        <Badge variant="outline" className="text-[10px] uppercase">
+                                            {d.detection.category}
+                                        </Badge>
+                                        <span className="text-[10px] truncate">• {d.video.title}</span>
                                     </div>
-                                )}
-                            </CardFooter>
-                        </Card>
-                    ))
+                                </CardHeader>
+
+                                <CardFooter className="p-4 pt-0 gap-2">
+                                    {filterStatus === 'PENDING' ? (
+                                        <>
+                                            <Button
+                                                variant="secondary"
+                                                className="grow bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-500 border-none"
+                                                onClick={() => handleApprove(d.detection.id)}
+                                                disabled={isPending}
+                                            >
+                                                <Check className="w-4 h-4 mr-2" /> Approve
+                                            </Button>
+                                            <Button
+                                                variant="secondary"
+                                                className="grow bg-rose-500/10 hover:bg-rose-500/20 text-rose-500 border-none"
+                                                onClick={() => handleReject(d.detection.id)}
+                                                disabled={isPending}
+                                            >
+                                                <X className="w-4 h-4 mr-2" /> Reject
+                                            </Button>
+                                        </>
+                                    ) : (
+                                        <div className="flex items-center text-sm font-medium gap-2 py-2 text-muted-foreground">
+                                            {filterStatus === 'APPROVED' ? (
+                                                <><CheckCircle2 className="w-4 h-4 text-emerald-500" /> Approved</>
+                                            ) : (
+                                                <><X className="w-4 h-4 text-rose-500" /> Rejected</>
+                                            )}
+                                            <Button variant="link" size="sm" className="h-auto p-0 ml-auto" onClick={() => handleReset(d.detection.id)} disabled={isPending}>
+                                                Reset
+                                            </Button>
+                                        </div>
+                                    )}
+                                </CardFooter>
+                            </Card>
+                        );
+                    })
                 ) : (
                     <div className="col-span-full py-20 text-center space-y-4 bg-muted/20 rounded-xl border-2 border-dashed border-border/50">
                         <div className="flex justify-center">

src/features/moderation/components/product-form.tsx

@@ -0,0 +1,483 @@
+import React, { useState, useEffect } from 'react';
+import { Button, buttonVariants } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Search, Loader2, Upload, Trash2, Image as ImageIcon, PlaySquare, Save } from 'lucide-react';
+import { fetchProductMetadata } from '../actions/fetch-product-metadata';
+import { uploadProductImage } from '../actions/upload-product-image';
+import { toast } from 'sonner';
+
+export interface ProductFormData {
+    videoId: string;
+    objectName: string;
+    category: string;
+    frameTimestamp: number;
+    thumbnailUrl: string; // Product Image
+    snapshotUrl: string; // In-Video Snapshot
+    marketplaceData?: {
+        marketplace: string;
+        productName: string;
+        price: string;
+        affiliateUrl: string;
+    };
+}
+
+interface ProductFormProps {
+    mode: 'create' | 'edit';
+    initialData?: Partial<ProductFormData>;
+    videos?: { id: string; title: string }[];
+    onSubmit: (data: ProductFormData) => void;
+    onCancel: () => void;
+    isSubmitting: boolean;
+}
+
+export function ProductForm({ mode, initialData, videos = [], onSubmit, onCancel, isSubmitting }: ProductFormProps) {
+    const [videoId, setVideoId] = useState(initialData?.videoId || videos[0]?.id || '');
+    const [objectName, setObjectName] = useState(initialData?.objectName || '');
+    const [category, setCategory] = useState(initialData?.category || 'Tech');
+    const [frameTimestamp, setFrameTimestamp] = useState(initialData?.frameTimestamp?.toString() || '0');
+
+    // Images
+    const [thumbnailUrl, setThumbnailUrl] = useState(initialData?.thumbnailUrl || '');
+    const [snapshotUrl, setSnapshotUrl] = useState(initialData?.snapshotUrl || '');
+
+    // Marketplace
+    const [affiliateUrl, setAffiliateUrl] = useState(initialData?.marketplaceData?.affiliateUrl || '');
+    const [marketplace, setMarketplace] = useState(initialData?.marketplaceData?.marketplace || '');
+    const [productName, setProductName] = useState(initialData?.marketplaceData?.productName || '');
+    const [price, setPrice] = useState(initialData?.marketplaceData?.price || '');
+
+    const [isFetching, setIsFetching] = useState(false);
+    const [isUploading, setIsUploading] = useState(false);
+    const [isUploadingSnapshot, setIsUploadingSnapshot] = useState(false);
+
+    // Auto-select video if only one
+    useEffect(() => {
+        if (mode === 'create' && videos.length === 1 && !videoId) {
+            setVideoId(videos[0].id);
+        }
+    }, [mode, videos, videoId]);
+
+    // Clipboard Paste Listener
+    useEffect(() => {
+        const handlePaste = async (e: ClipboardEvent) => {
+            // Only paste into the snapshot if we are not currently focused on an input
+            const target = e.target as HTMLElement;
+            const isInput = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA';
+
+            // Allow pasting URL into URL inputs, but intercept images for upload
+            const items = e.clipboardData?.items;
+            if (!items) return;
+
+            for (let i = 0; i < items.length; i++) {
+                if (items[i].type.indexOf('image') !== -1) {
+                    if (isInput) return; // Don't interrupt paste if user is typing
+
+                    let file = items[i].getAsFile();
+                    if (!file) continue;
+
+                    if (!file.name || file.name === 'blob') {
+                        const extension = file.type.split('/')[1] || 'png';
+                        file = new File([file], `paste-${Date.now()}.${extension}`, { type: file.type });
+                    }
+
+                    if (file.size > 10 * 1024 * 1024) {
+                        toast.error('Image too large (max 10MB)');
+                        continue;
+                    }
+
+                    setIsUploadingSnapshot(true);
+                    const formData = new FormData();
+                    formData.append('file', file);
+
+                    try {
+                        const result = await uploadProductImage(formData);
+                        if (result.success && result.url) {
+                            setSnapshotUrl(result.url);
+                            toast.success('Snapshot pasted from clipboard!');
+                        } else {
+                            toast.error(result.error || 'Failed to upload pasted image');
+                        }
+                    } catch (err: any) {
+                        toast.error(`Error uploading pasted image: ${err.message || 'Unknown error'}`);
+                    } finally {
+                        setIsUploadingSnapshot(false);
+                    }
+                    break;
+                }
+            }
+        };
+
+        window.addEventListener('paste', handlePaste);
+        return () => window.removeEventListener('paste', handlePaste);
+    }, []);
+
+    const handleFetchMetadata = async () => {
+        if (!affiliateUrl) return;
+
+        setIsFetching(true);
+        try {
+            const result = await fetchProductMetadata(affiliateUrl);
+            if (result.success && result.data) {
+                const { productName: fetchedName, price: fetchedPrice, marketplace: fetchedMarket, imageUrl } = result.data;
+
+                // Only update fields if they are empty or we want to overwrite
+                if (!objectName) setObjectName(fetchedName);
+                if (!productName) setProductName(fetchedName);
+                setPrice(fetchedPrice.toString());
+                setMarketplace(fetchedMarket);
+                if (imageUrl && !thumbnailUrl) {
+                    setThumbnailUrl(imageUrl);
+                }
+                toast.success('Product info fetched!');
+            } else {
+                toast.error(result.error || 'Could not fetch product info');
+            }
+        } catch (err) {
+            toast.error('Error fetching product info');
+        } finally {
+            setIsFetching(false);
+        }
+    };
+
+    const handleUpload = async (file: File, type: 'product' | 'snapshot') => {
+        const setUrl = type === 'product' ? setThumbnailUrl : setSnapshotUrl;
+        const setLoading = type === 'product' ? setIsUploading : setIsUploadingSnapshot;
+
+        setLoading(true);
+        const formData = new FormData();
+        formData.append('file', file);
+
+        try {
+            const result = await uploadProductImage(formData);
+            if (result.success && result.url) {
+                setUrl(result.url);
+                toast.success('Image uploaded!');
+            } else {
+                toast.error(result.error || 'Failed to upload image');
+            }
+        } catch (err) {
+            toast.error('Error uploading image');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleSubmit = () => {
+        if (mode === 'create' && !videoId) {
+            toast.error('Please select a video');
+            return;
+        }
+        if (!objectName || !category) {
+            toast.error('Please fill in required fields');
+            return;
+        }
+
+        const data: ProductFormData = {
+            videoId,
+            objectName,
+            category,
+            frameTimestamp: parseInt(frameTimestamp, 10) || 0,
+            thumbnailUrl,
+            snapshotUrl,
+        };
+
+        if (marketplace && (affiliateUrl || productName)) {
+            data.marketplaceData = {
+                marketplace,
+                productName: productName || objectName,
+                price,
+                affiliateUrl
+            };
+        }
+
+        onSubmit(data);
+    };
+
+    return (
+        <div className="grid gap-6 py-4">
+            {/* Link Section - Prioritized */}
+            <div className="space-y-4 p-4 rounded-xl bg-primary/5 border border-primary/10">
+                <div className="grid gap-2">
+                    <Label htmlFor="affiliate-url" className="text-sm font-medium text-primary">Affiliate or Product URL</Label>
+                    <div className="flex gap-2">
+                        <Input
+                            id="affiliate-url"
+                            value={affiliateUrl}
+                            onChange={(e) => setAffiliateUrl(e.target.value)}
+                            placeholder="Paste Amazon, eBay, or Etsy link..."
+                            className="bg-background/50"
+                            onBlur={() => {
+                                if (affiliateUrl && !objectName) handleFetchMetadata();
+                            }}
+                        />
+                        <Button
+                            size="icon"
+                            onClick={handleFetchMetadata}
+                            disabled={isFetching || !affiliateUrl}
+                            className="shrink-0"
+                            type="button"
+                        >
+                            {isFetching ? <Loader2 className="h-4 w-4 animate-spin" /> : <Search className="h-4 w-4" />}
+                        </Button>
+                    </div>
+                </div>
+
+                {(marketplace || affiliateUrl) && (
+                    <div className="grid grid-cols-2 gap-4 animate-in fade-in slide-in-from-top-2">
+                        <div className="grid gap-2">
+                            <Label className="text-xs">Marketplace</Label>
+                            <Select value={marketplace} onValueChange={setMarketplace}>
+                                <SelectTrigger className="h-8 text-xs bg-background/50">
+                                    <SelectValue placeholder="Select..." />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="amazon">Amazon</SelectItem>
+                                    <SelectItem value="ebay">eBay</SelectItem>
+                                    <SelectItem value="etsy">Etsy</SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </div>
+                        <div className="grid gap-2">
+                            <Label htmlFor="price" className="text-xs">Price ($)</Label>
+                            <Input
+                                id="price"
+                                type="number"
+                                value={price}
+                                onChange={(e) => setPrice(e.target.value)}
+                                className="h-8 text-xs bg-background/50"
+                            />
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            <div className="grid gap-4 px-1">
+                <div className="grid gap-2">
+                    <Label htmlFor="object-name">Object / Product Name *</Label>
+                    <Input
+                        id="object-name"
+                        value={objectName}
+                        onChange={(e) => setObjectName(e.target.value)}
+                        placeholder="e.g. Sony WH-1000XM5"
+                    />
+                </div>
+
+                <div className="grid grid-cols-1 gap-4">
+                    <div className="grid gap-2">
+                        <Label>Video {mode === 'create' ? '*' : ''}</Label>
+                        {mode === 'create' ? (
+                            <Select value={videoId} onValueChange={setVideoId}>
+                                <SelectTrigger className="w-full">
+                                    <SelectValue placeholder="Select video" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    {videos.map(v => (
+                                        <SelectItem key={v.id} value={v.id}>{v.title}</SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        ) : (
+                            <div className="p-2 rounded border border-input bg-muted/50 text-sm text-muted-foreground">
+                                {videos.find(v => v.id === videoId)?.title || 'Current Video'}
+                            </div>
+                        )}
+                    </div>
+                    <div className="grid gap-2">
+                        <Label>Category *</Label>
+                        <Select value={category} onValueChange={setCategory}>
+                            <SelectTrigger className="w-full">
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="Tech">Tech</SelectItem>
+                                <SelectItem value="Fashion">Fashion</SelectItem>
+                                <SelectItem value="Furniture">Furniture</SelectItem>
+                                <SelectItem value="Audio">Audio</SelectItem>
+                                <SelectItem value="Other">Other</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+                </div>
+
+                <div className="grid grid-cols-1 gap-4">
+                    <div className="grid gap-2">
+                        <Label htmlFor="timestamp">Video Timestamp (sec)</Label>
+                        <Input
+                            id="timestamp"
+                            type="number"
+                            value={frameTimestamp}
+                            onChange={(e) => setFrameTimestamp(e.target.value)}
+                        />
+                    </div>
+                    <div className="grid grid-cols-2 gap-6">
+                        {/* Product Image Section */}
+                        <ImageUpload
+                            label="Product Image"
+                            icon={<ImageIcon className="h-4 w-4 text-primary" />}
+                            url={thumbnailUrl}
+                            onChange={setThumbnailUrl}
+                            onUpload={(file) => handleUpload(file, 'product')}
+                            isUploading={isUploading}
+                            placeholderText="Marketplace or Custom Image"
+                        />
+
+                        {/* In-Video Snapshot Section */}
+                        <ImageUpload
+                            label="In-Video Snapshot"
+                            icon={<PlaySquare className="h-4 w-4 text-secondary" />}
+                            url={snapshotUrl}
+                            onChange={setSnapshotUrl}
+                            onUpload={(file) => handleUpload(file, 'snapshot')}
+                            isUploading={isUploadingSnapshot}
+                            placeholderText="Actual moment from video"
+                            extraLabel={
+                                <span className="ml-auto text-[10px] font-normal text-muted-foreground bg-white/5 px-1.5 py-0.5 rounded border border-white/10 animate-pulse">
+                                    Cmd+V to Paste
+                                </span>
+                            }
+                        />
+                    </div>
+                </div>
+            </div>
+
+            <div className="flex justify-end gap-2 pt-4">
+                <Button variant="ghost" onClick={onCancel} disabled={isSubmitting}>
+                    Cancel
+                </Button>
+                <Button
+                    onClick={handleSubmit}
+                    disabled={isSubmitting || !objectName || !category}
+                    className="bg-primary hover:bg-primary/90 shadow-lg shadow-primary/20"
+                >
+                    {isSubmitting ? (
+                        <>
+                            <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                            {mode === 'create' ? 'Adding...' : 'Saving...'}
+                        </>
+                    ) : (
+                        <>
+                            <Save className="w-4 h-4 mr-2" />
+                            {mode === 'create' ? 'Add to Vault' : 'Save Changes'}
+                        </>
+                    )}
+                </Button>
+            </div>
+        </div>
+    );
+}
+
+// Helper component for Image sections
+function ImageUpload({
+    label, icon, url, onChange, onUpload, isUploading, placeholderText, extraLabel
+}: {
+    label: string,
+    icon: React.ReactNode,
+    url: string,
+    onChange: (val: string) => void,
+    onUpload: (file: File) => void,
+    isUploading: boolean,
+    placeholderText: string,
+    extraLabel?: React.ReactNode
+}) {
+    const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files?.[0]) {
+            onUpload(e.target.files[0]);
+        }
+        // Reset input value to allow selecting same file again
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+    };
+
+    return (
+        <div className="space-y-3">
+            <Label className="text-sm font-semibold flex items-center gap-2 h-6">
+                {icon}
+                {label}
+                {extraLabel}
+            </Label>
+            <div className="space-y-3">
+                <div className="relative aspect-square w-full rounded-xl overflow-hidden border border-white/10 bg-white/5 group">
+                    {url ? (
+                        <>
+                            <img
+                                src={url}
+                                alt={label}
+                                className="w-full h-full object-contain bg-black/20"
+                                onError={(e) => console.error('Image load error', e)}
+                            />
+                            <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 flex items-center justify-center gap-2 transition-all duration-200">
+                                <Button
+                                    variant="secondary"
+                                    size="sm"
+                                    onClick={() => fileInputRef.current?.click()}
+                                    className="h-8 px-3 rounded-full shadow-xl transform scale-90 hover:scale-100 transition-transform font-medium text-xs bg-white text-black hover:bg-white/90"
+                                >
+                                    <Upload className="h-3 w-3 mr-1.5" />
+                                    Replace
+                                </Button>
+                                <Button
+                                    variant="destructive"
+                                    size="icon"
+                                    onClick={() => onChange('')}
+                                    className="h-8 w-8 rounded-full shadow-xl transform scale-90 hover:scale-100 transition-transform"
+                                >
+                                    <Trash2 className="h-4 w-4" />
+                                </Button>
+                            </div>
+                        </>
+                    ) : (
+                        <div
+                            className="absolute inset-0 flex flex-col items-center justify-center text-muted-foreground p-4 text-center cursor-pointer hover:bg-white/5 transition-colors"
+                            onClick={() => fileInputRef.current?.click()}
+                        >
+                            {React.isValidElement(icon)
+                                ? React.cloneElement(icon as React.ReactElement<{ className?: string }>, { className: "h-8 w-8 mb-2 opacity-20" })
+                                : icon}
+                            <span className="text-[10px]">{placeholderText}</span>
+                            <span className="mt-2 text-[10px] text-primary/70 font-medium">Click to Upload</span>
+                        </div>
+                    )}
+                    {isUploading && (
+                        <div className="absolute inset-0 bg-black/60 backdrop-blur-[2px] flex items-center justify-center z-10">
+                            <Loader2 className="h-6 w-6 animate-spin text-primary" />
+                        </div>
+                    )}
+                </div>
+                <div className="flex gap-2">
+                    <div className="relative flex-1">
+                        <Input
+                            value={url}
+                            onChange={(e) => onChange(e.target.value)}
+                            placeholder="Image URL"
+                            className="h-9 text-xs pr-8 bg-background/50"
+                        />
+                    </div>
+                    <div className="relative">
+                        <Input
+                            ref={fileInputRef}
+                            type="file"
+                            className="hidden"
+                            accept="image/*"
+                            onChange={handleFileChange}
+                            disabled={isUploading}
+                        />
+                        <Button
+                            variant="outline"
+                            size="icon"
+                            className="h-9 w-9 shrink-0"
+                            onClick={() => fileInputRef.current?.click()}
+                            disabled={isUploading}
+                        >
+                            <Upload className="h-4 w-4" />
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

src/features/moderation/services/moderation.service.ts

@@ -33,7 +33,8 @@ export class ModerationService {
                 'productName', ${marketplaceMatches.productName},
                 'price', ${marketplaceMatches.price},
                 'availability', ${marketplaceMatches.availabilityStatus},
-                'affiliateUrl', ${marketplaceMatches.affiliateUrl}
+                'affiliateUrl', ${marketplaceMatches.affiliateUrl},
+                'imageUrl', ${marketplaceMatches.imageUrl}
               )
             ) FILTER (WHERE ${marketplaceMatches.id} IS NOT NULL),
             '[]'

src/features/vault/services/showcase.service.ts

@@ -392,7 +392,15 @@ export class ShowcaseService {
                             .where(eq(youtubeChannels.id, currentChannel.id));
                     }
 
-                    // If video is failed or pending, allow re-trigger of analysis
+                    // If skipAnalysis is requested, force status to completed to avoid stuck pending state
+                    if (options.skipAnalysis && (existing.scanStatus === 'pending' || existing.scanStatus === 'in_progress')) {
+                        console.log(`Forcing scanStatus to 'completed' for existing video ${videoId} (was ${existing.scanStatus})`);
+                        await db.update(youtubeVideos)
+                            .set({ scanStatus: 'completed' })
+                            .where(eq(youtubeVideos.id, existing.id));
+                    }
+
+                    // If video is failed or pending, allow re-trigger of analysis (only if NOT skipping)
                     if (!options.skipAnalysis && (existing.scanStatus === 'failed' || existing.scanStatus === 'pending')) {
                         console.log(`Re-triggering analysis for ${videoId} (status: ${existing.scanStatus})`);
                         await inngest.send({
@@ -461,6 +469,7 @@ export class ShowcaseService {
                 viewCount: 0,
                 publishedAt: new Date(),
                 availabilityStatus: 'available',
+                scanStatus: options.skipAnalysis ? 'completed' : 'pending',
             }).returning();
 
             // 6. Trigger Inngest