From c1293ea51bdd979f4bea6923da7c5b388f99e9ec Mon Sep 17 00:00:00 2001
From: Justin Levine <20596508+jal-co@users.noreply.github.com>
Date: Wed, 15 Jul 2026 18:51:44 -0400
Subject: [PATCH] fix(catalog): show live tool preview first

Signed-off-by: Justin Levine <20596508+jal-co@users.noreply.github.com>
---
 apps/web/src/components/tool-listing-detail.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/tool-listing-detail.tsx b/apps/web/src/components/tool-listing-detail.tsx
index 416aaf5..1bf3ae4 100644
--- a/apps/web/src/components/tool-listing-detail.tsx
+++ b/apps/web/src/components/tool-listing-detail.tsx
@@ -27,11 +27,7 @@ export function ToolListingDetail({ item }: { item: CatalogItem }) {
         <Button asChild><a href={site.url} target="_blank" rel="noreferrer"><External className="size-4" /> Visit {site.domain}</a></Button>
       </div>
 
-      <div className="overflow-hidden rounded-2xl border border-border/60 bg-card/40">
-        <ToolImageCarousel images={images} domain={site.domain} title={item.title} className="aspect-[16/9] min-h-[28rem]" />
-      </div>
-
-      <div className="mt-6">
+      <div>
         <h2 className="mb-3 text-sm font-semibold">Live site preview</h2>
         <div className="overflow-hidden rounded-2xl border border-border/60 bg-card/40">
         <ExternalSitePreview
@@ -44,6 +40,13 @@ export function ToolListingDetail({ item }: { item: CatalogItem }) {
         </div>
       </div>
 
+      <div className="mt-6">
+        <h2 className="mb-3 text-sm font-semibold">Site thumbnails</h2>
+        <div className="overflow-hidden rounded-2xl border border-border/60 bg-card/40">
+          <ToolImageCarousel images={images} domain={site.domain} title={item.title} className="aspect-[16/9] min-h-[28rem]" />
+        </div>
+      </div>
+
       <div className="mt-6 grid gap-4 md:grid-cols-2">
         <div className="rounded-xl border border-border/60 bg-card/40 p-5"><h2 className="flex items-center gap-2 text-sm font-semibold"><Globe className="size-4" /> Site metadata and fallback</h2>{site.ogImageUrl ? <ToolListingImage src={site.ogImageUrl} domain={site.domain} alt={`Open Graph preview for ${item.title}`} className="mt-4 aspect-[16/9] w-full rounded-lg border border-border/60" /> : null}<dl className="mt-4 grid gap-3 text-sm"><div><dt className="text-xs text-muted-foreground">Fetched title</dt><dd>{site.ogTitle || "Not provided"}</dd></div><div><dt className="text-xs text-muted-foreground">Fetched description</dt><dd className="leading-relaxed">{site.ogDescription || "Not provided"}</dd></div></dl></div>
         <div className="rounded-xl border border-border/60 bg-card/40 p-5"><h2 className="flex items-center gap-2 text-sm font-semibold"><Check className="size-4 text-receipt" /> Scoped evidence</h2><p className="mt-3 text-sm leading-relaxed">{domainEvidence ? `The creator proved DNS control of ${site.domain}.` : "No public domain-control evidence is available."}</p><p className="mt-2 text-xs leading-relaxed text-muted-foreground">Domain control and curator approval do not certify security, privacy, legality, accessibility, or ongoing usefulness.</p></div>