health score

src/features/catalogue/CatalogueDetailDrawer.tsx

@@ -12,6 +12,7 @@ import { VStack } from '@astryxdesign/core/VStack';
 import { Check, DownloadCloud, ImageOff, Info } from 'lucide-react';
 import type { CatalogueProduct } from '@/api/types';
 import { Drawer } from '@/features/store-admin/Drawer';
+import { HealthScorePanel } from '@/features/store-admin/HealthScorePanel';
 
 /**
  * One global-catalogue product, in full.
@@ -205,6 +206,17 @@ export function CatalogueDetailDrawer({
         </VStack>
       ) : null}
 
+      {/* ── Health score ──────────────────────────────────────────────────
+          On the CATALOGUE drawer as well as the tenant one, and this is the
+          drawer where it actually has data: the scored products all live in the
+          global catalogue. A merchant's own shelf overlaps it barely at all
+          today — 0 of 26 — so a panel only on the tenant product page shows
+          nothing to anybody, which is exactly what happened.
+
+          `brand` and `image_id` come straight off the catalogue row, so no
+          lookup is needed to find the key. */}
+      <HealthScorePanel product={{ productid: 0, productbrand: product.brand, imageid: product.image_id }} />
+
       {product.highlights?.length || product.nutrients?.length ? (
         <div className="form-grid">
           {product.highlights?.length ? (