@@ -239,12 +281,13 @@ export function GalleryPage({ user }: GalleryPageProps) {
{model.category ?? t('gallery.uncategorized')}
- {isReady && (
-
- {t('gallery.ready3d')}
-
- )}
+
+ {isFailed && (
+
+ Blocked — publish gated
+
+ )}
@@ -262,8 +305,25 @@ export function GalleryPage({ user }: GalleryPageProps) {
+ {/* QA Score row */}
+
+ {model.qaScore !== undefined && (
+ = 70 ? 'bg-emerald-50 text-emerald-700' :
+ model.qaScore >= 40 ? 'bg-amber-50 text-amber-700' :
+ 'bg-red-50 text-red-700')
+ }>
+ {t('gallery.qaScore', { score: model.qaScore })}
+
+ )}
+
+ {readiness.label}
+
+
+
{model.errorMessage && (
- {model.errorMessage}
+{model.errorMessage}
)}
diff --git a/apps/web/src/pages/ProductDetailPage.tsx b/apps/web/src/pages/ProductDetailPage.tsx
index 19aeb21..b33f3a6 100644
--- a/apps/web/src/pages/ProductDetailPage.tsx
+++ b/apps/web/src/pages/ProductDetailPage.tsx
@@ -5,16 +5,22 @@ import { useNavigate, useParams } from 'react-router-dom';
import {
Conversion,
ConversionStatus,
+ HotspotQuality,
+ type ImportedImageCandidate,
MediaAsset,
PRODUCT_CATEGORIES,
+ ProductWorkflowStatus,
QualityReport,
+ SourceImageReadiness,
generateId,
type ConversionSnapshot,
type Hotspot,
type Product,
type ProductCategory,
+ type ProductCluster,
} from '@minimalblock/core';
-import { ModelViewer, ModelViewerPlaceholder, StatusBadge, Button, Spinner, Card, Modal } from '@minimalblock/ui';
+import { MultiProductClusterSelector } from '../components/import/MultiProductClusterSelector.js';
+import { ModelViewer, ModelViewerPlaceholder, ModelInfoCard, StatusBadge, WorkflowStatusBadge, Button, Spinner, Card, Modal, AiDiagnosisPanel, SourceImageReadinessCard, HotspotEditorPanel, type ModelViewerHandle } from '@minimalblock/ui';
import { useApp } from '../context/AppContext.js';
import type { SupabaseUser } from '../types.js';
@@ -33,12 +39,12 @@ function hydrateConversion(snapshot: ConversionSnapshot): Conversion {
}));
const outputAsset = snapshot.outputAsset
? new MediaAsset({
- url: snapshot.outputAsset.url,
- storageKey: snapshot.outputAsset.storageKey,
- mimeType: snapshot.outputAsset.mimeType,
- kind: 'generated-model',
- sizeBytes: snapshot.outputAsset.sizeBytes,
- })
+ url: snapshot.outputAsset.url,
+ storageKey: snapshot.outputAsset.storageKey,
+ mimeType: snapshot.outputAsset.mimeType,
+ kind: 'generated-model',
+ sizeBytes: snapshot.outputAsset.sizeBytes,
+ })
: undefined;
return new Conversion({
@@ -52,6 +58,7 @@ function hydrateConversion(snapshot: ConversionSnapshot): Conversion {
errorMessage: snapshot.errorMessage,
provider: snapshot.provider,
qualityReport: snapshot.qualityReport ? QualityReport.fromJSON(snapshot.qualityReport) : undefined,
+ modelSource: snapshot.modelSource ?? 'ai-generated',
approvedAt: snapshot.approvedAt ? new Date(snapshot.approvedAt) : undefined,
rejectionReason: snapshot.rejectionReason,
createdAt: new Date(snapshot.createdAt),
@@ -79,6 +86,30 @@ function buildModelViewerSnippet(modelUrl: string): string {
return `\n`;
}
+function toImportedMediaAssets(candidates: ImportedImageCandidate[] | undefined): MediaAsset[] {
+ return (candidates ?? [])
+ .filter((candidate) => candidate.selected && candidate.url && candidate.storageKey && candidate.mimeType && candidate.sizeBytes !== undefined)
+ .map((candidate) => new MediaAsset({
+ url: candidate.url!,
+ storageKey: candidate.storageKey!,
+ mimeType: candidate.mimeType!,
+ kind: 'source-image',
+ sizeBytes: candidate.sizeBytes!,
+ }));
+}
+
+function supportLevelLabel(level: string | undefined): string {
+ switch (level) {
+ case 'supported':
+ return 'Supported domain';
+ case 'mock':
+ return 'Mock demo import';
+ case 'best_effort':
+ default:
+ return 'Best-effort extraction';
+ }
+}
+
export function ProductDetailPage({ user }: ProductDetailPageProps) {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
@@ -93,6 +124,9 @@ export function ProductDetailPage({ user }: ProductDetailPageProps) {
const [editingMeta, setEditingMeta] = useState(false);
const [metaForm, setMetaForm] = useState({ name: '', description: '', category: 'other' as ProductCategory });
const [savingMeta, setSavingMeta] = useState(false);
+ const [savingImportReview, setSavingImportReview] = useState(false);
+ const [retryingImport, setRetryingImport] = useState(false);
+ const [startingImported3d, setStartingImported3d] = useState(false);
const [editMode, setEditMode] = useState(false);
const [savingHotspots, setSavingHotspots] = useState(false);
const [pendingHotspot, setPendingHotspot] = useState<{ position: string; normal: string } | null>(null);
@@ -108,24 +142,49 @@ export function ProductDetailPage({ user }: ProductDetailPageProps) {
const [rejectReason, setRejectReason] = useState('');
const [busyAction, setBusyAction] = useState(null);
const [trendyolOpen, setTrendyolOpen] = useState(false);
+ const [overrideOpen, setOverrideOpen] = useState(false);
+ const [overrideReason, setOverrideReason] = useState('');
+ const [approvingProduct, setApprovingProduct] = useState(false);
+ const [diagnosisLoading, setDiagnosisLoading] = useState(false);
+ const [diagnosisError, setDiagnosisError] = useState(null);
+ const [importForm, setImportForm] = useState({
+ title: '',
+ description: '',
+ category: 'other' as ProductCategory,
+ materials: '',
+ dimensions: '',
+ selectedImageIds: [] as string[],
+ sellerConfirmedText: false,
+ sellerConfirmedImages: false,
+ });
const trendyolPublish = useTrendyolPublish(apiClient);
const lastRotateEvent = useRef(0);
+ const modelViewerRef = useRef(null);
const loadRecord = useCallback(async () => {
if (!id) return;
setLoading(true);
try {
- const found = await conversionRepo.findById(id);
- if (!found || !found.isAccessibleBy(user.id)) {
- throw new Error('Model not found');
+ let foundProduct = await productRepo.findById(id);
+ let foundConversion: Conversion | null = null;
+
+ if (foundProduct) {
+ const productConversions = await conversionRepo.findByProductId(foundProduct.id);
+ foundConversion = [...productConversions].sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())[0] ?? null;
+ } else {
+ const found = await conversionRepo.findById(id);
+ if (!found || !found.isAccessibleBy(user.id)) {
+ throw new Error('Model not found');
+ }
+ foundConversion = found;
+ foundProduct = await productRepo.findById(found.productId);
}
- const foundProduct = await productRepo.findById(found.productId);
if (!foundProduct) {
throw new Error('Product not found');
}
- setConversion(found);
+ setConversion(foundConversion);
setProduct(foundProduct);
setHotspots(foundProduct.hotspots);
setMetaForm({
@@ -133,6 +192,16 @@ export function ProductDetailPage({ user }: ProductDetailPageProps) {
description: foundProduct.description,
category: foundProduct.category,
});
+ setImportForm({
+ title: foundProduct.importData?.fields.title?.value ?? foundProduct.name,
+ description: foundProduct.importData?.fields.description?.value ?? foundProduct.description,
+ category: foundProduct.importData?.fields.category?.value ?? foundProduct.category,
+ materials: (foundProduct.importData?.fields.materials?.value ?? foundProduct.aiAnalysis?.materials ?? []).join(', '),
+ dimensions: foundProduct.importData?.fields.dimensions?.value ?? '',
+ selectedImageIds: foundProduct.importData?.selectedImageIds ?? [],
+ sellerConfirmedText: foundProduct.importData?.sellerConfirmedText ?? false,
+ sellerConfirmedImages: foundProduct.importData?.sellerConfirmedImages ?? false,
+ });
setError(null);
} catch (loadError) {
setError(loadError instanceof Error ? loadError.message : 'Failed to load product');
@@ -160,8 +229,6 @@ export function ProductDetailPage({ user }: ProductDetailPageProps) {
}, [apiClient, conversion]);
const productName = product?.name ?? conversion?.sourceAsset.storageKey.split('/').pop() ?? 'Product';
- const publicUrl = product && conversion?.status.isViewable() ? `${window.location.origin}${product.publicUrl}` : null;
- const qualityScore = conversion?.qualityReport?.score();
const visibleHotspots = useMemo(() => hotspots.filter((hotspot) => hotspot.position && hotspot.normal), [hotspots]);
async function saveMeta() {
@@ -176,6 +243,75 @@ export function ProductDetailPage({ user }: ProductDetailPageProps) {
}
}
+ async function saveImportReview() {
+ if (!product) return;
+ setSavingImportReview(true);
+ setError(null);
+ try {
+ const response = await apiClient.saveImportedReview(product.id, {
+ title: importForm.title.trim(),
+ description: importForm.description.trim(),
+ category: importForm.category,
+ materials: importForm.materials.split(',').map((value) => value.trim()).filter(Boolean),
+ dimensions: importForm.dimensions.trim(),
+ selectedImageIds: importForm.selectedImageIds,
+ sellerConfirmedText: importForm.sellerConfirmedText,
+ sellerConfirmedImages: importForm.sellerConfirmedImages,
+ });
+ const refreshed = await productRepo.findById(response.product.productId);
+ if (refreshed) {
+ setProduct(refreshed);
+ setHotspots(refreshed.hotspots);
+ }
+ } catch (saveError) {
+ setError(saveError instanceof Error ? saveError.message : 'Failed to save imported review');
+ } finally {
+ setSavingImportReview(false);
+ }
+ }
+
+ async function retryImport() {
+ if (!product) return;
+ setRetryingImport(true);
+ setError(null);
+ try {
+ const response = await apiClient.retryImportedProduct(product.id);
+ const refreshed = await productRepo.findById(response.product.productId);
+ if (refreshed) {
+ setProduct(refreshed);
+ setHotspots(refreshed.hotspots);
+ setImportForm({
+ title: refreshed.importData?.fields.title?.value ?? refreshed.name,
+ description: refreshed.importData?.fields.description?.value ?? refreshed.description,
+ category: refreshed.importData?.fields.category?.value ?? refreshed.category,
+ materials: (refreshed.importData?.fields.materials?.value ?? refreshed.aiAnalysis?.materials ?? []).join(', '),
+ dimensions: refreshed.importData?.fields.dimensions?.value ?? '',
+ selectedImageIds: refreshed.importData?.selectedImageIds ?? [],
+ sellerConfirmedText: refreshed.importData?.sellerConfirmedText ?? false,
+ sellerConfirmedImages: refreshed.importData?.sellerConfirmedImages ?? false,
+ });
+ }
+ } catch (retryError) {
+ setError(retryError instanceof Error ? retryError.message : 'Failed to retry import');
+ } finally {
+ setRetryingImport(false);
+ }
+ }
+
+ async function tryImported3d() {
+ if (!product) return;
+ setStartingImported3d(true);
+ setError(null);
+ try {
+ await apiClient.tryImportedProduct3d(product.id);
+ await loadRecord();
+ } catch (startError) {
+ setError(startError instanceof Error ? startError.message : 'Failed to start AI 3D generation');
+ } finally {
+ setStartingImported3d(false);
+ }
+ }
+
async function handleDelete() {
if (!product) return;
setDeleting(true);
@@ -210,6 +346,14 @@ export function ProductDetailPage({ user }: ProductDetailPageProps) {
setHotspots((current) => current.filter((hotspot) => hotspot.id !== hotspotId));
}
+ function updateHotspot(id: string, patch: Partial>) {
+ setHotspots((current) => current.map((h) => (h.id === id ? { ...h, ...patch } : h)));
+ }
+
+ function toggleHotspotApproval(id: string, approved: boolean) {
+ updateHotspot(id, { approved });
+ }
+
async function saveHotspots() {
if (!product) return;
setSavingHotspots(true);
@@ -233,8 +377,8 @@ export function ProductDetailPage({ user }: ProductDetailPageProps) {
await navigator.clipboard.writeText(text);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
- if (conversion) {
- await eventsRepo.track(conversion.productId, user.id, 'embed_copied');
+ if (product) {
+ await eventsRepo.track(product.id, user.id, 'embed_copied');
}
}
@@ -269,6 +413,10 @@ export function ProductDetailPage({ user }: ProductDetailPageProps) {
async function runAiAction(action: 'analyze' | 'hotspots' | 'description' | 'risk' | 'quality') {
if (!product) return;
setBusyAction(action);
+ if (action === 'analyze') {
+ setDiagnosisLoading(true);
+ setDiagnosisError(null);
+ }
try {
if (action === 'analyze') await apiClient.analyzeProduct(product.id);
if (action === 'hotspots') await apiClient.generateHotspots(product.id);
@@ -281,9 +429,15 @@ export function ProductDetailPage({ user }: ProductDetailPageProps) {
setHotspots(refreshed.hotspots);
}
} catch (actionError) {
- setError(actionError instanceof Error ? actionError.message : 'AI action failed');
+ const msg = actionError instanceof Error ? actionError.message : 'AI action failed';
+ if (action === 'analyze') {
+ setDiagnosisError(msg);
+ } else {
+ setError(msg);
+ }
} finally {
setBusyAction(null);
+ if (action === 'analyze') setDiagnosisLoading(false);
}
}
@@ -310,13 +464,47 @@ export function ProductDetailPage({ user }: ProductDetailPageProps) {
setMetaForm((current) => ({ ...current, description: saved.description }));
}
+ async function handleApproveProduct(reason?: string) {
+ if (!product) return;
+ setApprovingProduct(true);
+ try {
+ const saved = await productRepo.save(product.withWorkflowStatus('approved'));
+ setProduct(saved);
+ setOverrideOpen(false);
+ setOverrideReason('');
+ if (reason) {
+ await eventsRepo.track(product.id, user.id, 'product_approved_with_override', { reason });
+ } else {
+ await eventsRepo.track(product.id, user.id, 'product_approved');
+ }
+ } catch (approveError) {
+ setError(approveError instanceof Error ? approveError.message : 'Failed to approve product');
+ } finally {
+ setApprovingProduct(false);
+ }
+ }
+
+ async function handlePublishProduct() {
+ if (!product) return;
+ setApprovingProduct(true);
+ try {
+ const saved = await productRepo.save(product.withWorkflowStatus('published'));
+ setProduct(saved);
+ await eventsRepo.track(product.id, user.id, 'product_published');
+ } catch (publishError) {
+ setError(publishError instanceof Error ? publishError.message : 'Failed to publish product');
+ } finally {
+ setApprovingProduct(false);
+ }
+ }
+
async function handleDownload() {
- if (!conversion?.outputAsset) return;
+ if (!outputAsset) return;
setDownloading(true);
setDownloadError(null);
try {
- const filename = conversion.outputAsset.storageKey.split('/').pop() ?? 'model.glb';
- await downloadGlb(conversion.outputAsset.url, filename);
+ const filename = outputAsset.storageKey.split('/').pop() ?? 'model.glb';
+ await downloadGlb(outputAsset.url, filename);
} catch (downloadIssue) {
setDownloadError(downloadIssue instanceof Error ? downloadIssue.message : 'Download failed');
} finally {
@@ -332,7 +520,7 @@ export function ProductDetailPage({ user }: ProductDetailPageProps) {
);
}
- if (!conversion || !product) {
+ if (!product) {
return (
{error ?? t('product.notFound')}
@@ -341,8 +529,45 @@ export function ProductDetailPage({ user }: ProductDetailPageProps) {
);
}
+ // WorkflowStatus is the authoritative gate for all publish/export/approval decisions.
+ // ConversionStatus only controls the 3D pipeline display (pending → processing → done).
+ const workflowStatus = ProductWorkflowStatus.from(product.workflowStatus);
+ const importedSourceAssets = toImportedMediaAssets(product.importData?.imageCandidates);
+ const sourceAssetsForReview = conversion?.sourceAssets?.length ? conversion.sourceAssets : importedSourceAssets;
+ const outputAsset = conversion?.outputAsset;
+ const supportsReviewActions = sourceAssetsForReview.length > 0;
+ const importStatusValues = new Set([
+ 'url_submitted',
+ 'scraping',
+ 'scrape_failed',
+ 'extraction_review_needed',
+ 'autofill_ready',
+ 'imported_source_images_ready',
+ 'source_readiness_pending',
+ ]);
+ const isImportFlow = product.inputMethod === 'url_import' || !!product.importData;
+ const isImportReviewState = importStatusValues.has(product.workflowStatus);
+
+ // Phase 4: prefer AI-enriched entries from product analysis; fall back to heuristic derivation.
+ const sourceImageReadiness = product.aiAnalysis?.sourceImageEntries
+ ? SourceImageReadiness.fromEntries(product.aiAnalysis.sourceImageEntries)
+ : sourceAssetsForReview.length > 0
+ ? SourceImageReadiness.fromMediaAssets([...sourceAssetsForReview])
+ : SourceImageReadiness.fromEntries([]);
+ const isBlocked = workflowStatus.isBlocked(); // failed_qa — hard block
+ const isNeedsFix = workflowStatus.value === 'needs_fix';
+ const isReadyForReview = workflowStatus.value === 'ready_for_review';
+ const isApproved = workflowStatus.value === 'approved';
+ const isPublished = workflowStatus.value === 'published';
+ const canPublish = workflowStatus.isPublishable(); // approved | published
+ const canEmbed = workflowStatus.canExport();
+ const isAwaitingApproval = conversion?.status.isAwaitingApproval() ?? false; // 3D pipeline state
+ const isFailed = conversion?.status.value === 'failed' || conversion?.status.value === 'rejected'; // 3D pipeline
+ const qaScore = conversion?.qualityReport?.score();
+ const publicUrl = canPublish ? `${window.location.origin}${product.publicUrl}` : null;
+
return (
-
+
{error && (
+ {/* Status banners — seller decision guide driven by workflow status */}
+ {isBlocked && (
+ {error}
)}
@@ -358,31 +583,86 @@ export function ProductDetailPage({ user }: ProductDetailPageProps) {
) : (
{productName}
)} -
+
+ )}
+ {isNeedsFix && (
+ ✕
+
+
+ Visual QA Failed — Publishing blocked
++ AI analysis found critical issues that prevent listing. Readiness score is below 40. Re-upload with better images (at least 3 angles, plain background) to try again. +
+
+
+ )}
+ {isReadyForReview && (
+ !
+
+
+ Needs Fix — Quality issues detected
++ Readiness score is 40–69. Review the AI diagnosis below and fix the flagged issues before approving, or provide an override reason to approve anyway. +
+
+
+ )}
+ {isApproved && (
+ →
+
+
+ Ready for Merchant Review
+AI quality check passed. Review the 3D model and AI diagnosis, then approve to unlock publishing.
+
+
+ )}
+ {isPublished && (
+ ✓
+
+
+ Approved — Ready to publish
+You have reviewed and approved this product. Click Publish to make it live, or use Embed / Public Page to share.
+
+
+ )}
+
✓
+
+
+ Published
+This product is live. It can be embedded, shared via public page, or exported to Trendyol.
+
- {conversion.outputAsset ? (
+ {/* E.4 — Load GLB in the viewer when output exists (E.18: even for failed QA) */}
+ {outputAsset ? (
<>
eventsRepo.track(conversion.productId, user.id, 'viewer_loaded').catch(() => null)}
- onArOpen={() => eventsRepo.track(conversion.productId, user.id, 'ar_opened').catch(() => null)}
+ onLoad={() => eventsRepo.track(product.id, user.id, 'viewer_loaded').catch(() => null)}
+ onArOpen={() => eventsRepo.track(product.id, user.id, 'ar_opened').catch(() => null)}
onRotate={() => {
const now = Date.now();
if (now - lastRotateEvent.current < 10_000) return;
lastRotateEvent.current = now;
- eventsRepo.track(conversion.productId, user.id, 'model_rotated').catch(() => null);
+ eventsRepo.track(product.id, user.id, 'model_rotated').catch(() => null);
}}
- onSessionEnd={(durationMs) => eventsRepo.track(conversion.productId, user.id, 'session_ended', { duration_ms: durationMs }).catch(() => null)}
+ onSessionEnd={(durationMs) => eventsRepo.track(product.id, user.id, 'session_ended', { duration_ms: durationMs }).catch(() => null)}
onHotspotClick={(hotspotId) => {
const hotspot = visibleHotspots.find((item) => item.id === hotspotId);
- eventsRepo.track(conversion.productId, user.id, 'hotspot_clicked', {
+ eventsRepo.track(product.id, user.id, 'hotspot_clicked', {
hotspot_id: hotspotId,
hotspot_label: hotspot?.label,
}).catch(() => null);
@@ -404,46 +684,140 @@ export function ProductDetailPage({ user }: ProductDetailPageProps) {
)}
+ ) : conversion && (conversion.status.isProcessing() || conversion.status.isPending()) ? (
+ /* E.5 — Loading state while AI is generating the model */
+
+
) : (
- This can take up to 60 seconds
+
+
)}
3D generation failed
++ AI could not generate a 3D model from the provided images. Use the Manual GLB Fallback to upload a model you have prepared — it will still go through merchant review before publishing. +
+ + + ) : isImportFlow ? ( + <> +No 3D model yet
++ URL-imported products can continue through review and quality gates without a GLB. + Add or generate 3D later if you want a public interactive preview. +
+ + ) : ( +No 3D model yet
+ )} +
- {conversion.outputAsset && (
+ {/* Download always available when output exists */}
+ {outputAsset && (
)}
- {conversion.status.isViewable() && conversion.outputAsset && (
-
+
+ {/* Embed — requires approved or published */}
+ {outputAsset && (
+ canEmbed ? (
+
+ ) : (
+
+ )
)}
- {publicUrl && (
+
+ {/* Public page link — requires approved or published */}
+ {publicUrl && canPublish ? (
- Public page ↗
+ {t('product.sharePublicPage')} ↗
+ ) : !canPublish && outputAsset && (
+
)}
- {!editMode && conversion.outputAsset && (
+
+ {/* Hotspot editing — available when output exists */}
+ {!editMode && outputAsset && (
)}
- {conversion.status.isAwaitingApproval() && (
+
+ {isImportFlow && !outputAsset && supportsReviewActions && (
+
+ )}
+
+ {/* Product approval gate — driven by workflow status, not conversion status */}
+ {isReadyForReview && (
+
+ )}
+ {isNeedsFix && (
+
+ )}
+ {isApproved && (
+
+ )}
+
+ {/* 3D pipeline approval — keep for awaiting_approval conversion state */}
+ {isAwaitingApproval && (
<>
)}
- {conversion.status.isFailed() && (
-
+
+ {/* Fix path for blocked products */}
+ {(isBlocked || isFailed) && (
+
)}
- {conversion.status.isViewable() && (
+
+ {/* Export to Trendyol — requires published */}
+ {isPublished ? (
+
+ ) : canPublish ? (
+ ) : (
+
)}
+
{downloadError &&
+ {/* Marketplace readiness + export package status */}
+ {downloadError}
}
+ {/* QA Score */}
+
+
{t('product.qaScoreLabel')}
+ {qaScore !== undefined ? ( +
+
+ ) : (
+ = 70 ? 'text-emerald-600' : qaScore >= 40 ? 'text-amber-600' : 'text-red-600'}`}> + {qaScore}/100 +
+Not scored yet
+ )} + {qaScore !== undefined && ( +
+
+
+
+ {/* Export package */}
+
+
+
+
= 70 ? 'bg-emerald-500' : qaScore >= 40 ? 'bg-amber-500' : 'bg-red-500'}`}
+ style={{ width: `${qaScore}%` }}
+ />
+
+ )}
+
+
+ {/* Marketplace readiness */}
+ {t('product.marketplaceReadiness')}
+
+ {canPublish ? (
+
+
+ {t('product.readinessApproved')}
+
+ ) : isBlocked ? (
+
+
+ Visual QA Failed
+
+ ) : isNeedsFix ? (
+
+
+ Needs Fix
+
+ ) : (
+
+
+ {t('product.readinessPending')}
+
+ )}
+
+ + {canPublish ? 'Trendyol · Shopify · Amazon' : 'Listing blocked until approved'} +
+{t('product.exportPackage')}
+
+ {canEmbed ? (
+
+
+ {t('product.exportPackageReady')}
+
+ ) : isBlocked ? (
+
+
+ {t('product.exportPackageBlocked')}
+
+ ) : (
+
+
+ {t('product.exportPackagePending')}
+
+ )}
+
+ + {canEmbed ? 'GLB · preview · catalog metadata' : 'Available after approval'} +
+
-
{editingMeta ? (
Merchant review
-This is the seller-facing control center for product metadata, AI output, and publish state.
+Seller review
+AI quality diagnosis, source images, and product metadata. Approve to unlock publish — or block to request a fix.
@@ -475,6 +940,209 @@ export function ProductDetailPage({ user }: ProductDetailPageProps) {
)}
+ {isImportFlow && product.importData && (
+
+
+
+
+ {(product.importData.warnings.length > 0 || product.importData.failureReasons.length > 0) && (
+
+
+ Imported from URL
++ {supportLevelLabel(product.importData.supportLevel)} · {product.importData.domain} · confidence {Math.round(product.importData.overallConfidence * 100)}% +
+{product.importData.sourceUrl}
+ {product.importData.scrapeTimestamp && ( +Scraped {new Date(product.importData.scrapeTimestamp).toLocaleString()}
+ )} +
+ {product.workflowStatus === 'scrape_failed' && (
+
+ )}
+
+
+
+ {product.importData.warnings.map((warning) => (
+ {warning}
+ ))}
+ {product.importData.failureReasons.map((reason) => (
+ {reason.replace(/_/g, ' ')}
+ ))}
+
+ )}
+
+ {product.importData.multiProductDetected && product.importData.productClusters && product.importData.productClusters.length > 0 && (
+
+ {
+ await apiClient.acceptProductCluster(product.id, { clusterId });
+ const refreshed = await productRepo.findById(product.id);
+ if (refreshed) setProduct(refreshed);
+ }}
+ />
+
+ )}
+
+ {isImportReviewState && (
+
+
+
+
+
+ setImportForm((current) => ({ ...current, title: event.target.value }))}
+ className="block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+ />
+
+
+
+
+
+
+
+