From f92b363d167f610d222f1ae0bd0f585a2a6a9765 Mon Sep 17 00:00:00 2001
From: Michele Baldessari <michele@acksyn.org>
Date: Thu, 28 May 2026 17:41:40 +0200
Subject: [PATCH] Support per-pattern logos

---
 console/src/api.ts                            |  7 ++++++-
 console/src/components/PatternCatalogPage.css |  5 +++++
 console/src/components/PatternCatalogPage.tsx | 17 ++++++++++++++++-
 console/src/types.ts                          |  1 +
 4 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/console/src/api.ts b/console/src/api.ts
index 821469bc6..ba305693e 100644
--- a/console/src/api.ts
+++ b/console/src/api.ts
@@ -58,7 +58,12 @@ export async function fetchAllPatterns(): Promise<{
   const patterns = await Promise.all(
     catalog.patterns.map(async (key) => {
       const pattern = await fetchPattern(key);
-      return { ...pattern, catalogKey: key };
+      const logo = pattern.logo
+        ? /^https?:\/\//.test(pattern.logo)
+          ? pattern.logo
+          : `${PATTERN_UI_CATALOG_BASE_URL}/${key}/${pattern.logo}`
+        : undefined;
+      return { ...pattern, catalogKey: key, logo };
     }),
   );
   return {
diff --git a/console/src/components/PatternCatalogPage.css b/console/src/components/PatternCatalogPage.css
index d39e67705..407b43f33 100644
--- a/console/src/components/PatternCatalogPage.css
+++ b/console/src/components/PatternCatalogPage.css
@@ -9,6 +9,11 @@
   object-fit: contain;
 }
 
+.patterns-operator__pattern-logo {
+  max-height: 32px;
+  object-fit: contain;
+}
+
 .patterns-operator__card-field {
   margin-bottom: 4px;
 }
diff --git a/console/src/components/PatternCatalogPage.tsx b/console/src/components/PatternCatalogPage.tsx
index 922f03bdf..58beef6ca 100644
--- a/console/src/components/PatternCatalogPage.tsx
+++ b/console/src/components/PatternCatalogPage.tsx
@@ -341,7 +341,22 @@ export default function PatternCatalogPage() {
                       isDisabled ? ' patterns-operator__card--disabled' : ''
                     }`}
                   >
-                    <CardHeader>
+                    <CardHeader
+                      actions={
+                        pattern.logo
+                          ? {
+                              actions: (
+                                <img
+                                  src={pattern.logo}
+                                  alt={`${pattern.display_name} logo`}
+                                  className="patterns-operator__pattern-logo"
+                                />
+                              ),
+                              hasNoOffset: true,
+                            }
+                          : undefined
+                      }
+                    >
                       <Tooltip content={TIER_DESCRIPTIONS[pattern.tier] || pattern.tier}>
                         <Label
                           color={TIER_COLORS[pattern.tier] || 'grey'}
diff --git a/console/src/types.ts b/console/src/types.ts
index 1d8eb3e8e..7c90a439b 100644
--- a/console/src/types.ts
+++ b/console/src/types.ts
@@ -48,6 +48,7 @@ export interface Pattern {
   requirements?: PatternRequirements;
   extra_features?: ExtraFeatures;
   external_requirements?: ExternalRequirements;
+  logo?: string;
   /** The catalog directory key used to fetch this pattern. */
   catalogKey?: string;
 }