From 04c3b995314eff61245bb3a4e47a18509d5ee5f7 Mon Sep 17 00:00:00 2001
From: Tomas Dvorak <contact.dvorak@gmail.com>
Date: Mon, 21 Sep 2026 19:38:41 +0200
Subject: [PATCH] fix: render service icons via function call, not dynamic
 component

---
 .../src/features/workspace/canvas/nodes.tsx     | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/app/frontend/src/features/workspace/canvas/nodes.tsx b/app/frontend/src/features/workspace/canvas/nodes.tsx
index e5ee315..7872f0b 100644
--- a/app/frontend/src/features/workspace/canvas/nodes.tsx
+++ b/app/frontend/src/features/workspace/canvas/nodes.tsx
@@ -17,16 +17,16 @@ export type GroupNodeData = {
 export type ServiceNodeType = Node<ServiceNodeData, 'serviceNode'>;
 export type GroupNodeType = Node<GroupNodeData, 'groupNode'>;
 
-function serviceTypeIcon(type: string): typeof Box {
+function renderServiceTypeIcon(type: string, size = 18) {
   switch (type) {
     case 'web':
-      return Globe;
+      return <Globe size={size} />;
     case 'database':
-      return Database;
+      return <Database size={size} />;
     case 'worker':
-      return Terminal;
+      return <Terminal size={size} />;
     default:
-      return Box;
+      return <Box size={size} />;
   }
 }
 
@@ -56,11 +56,6 @@ function statusLabel(status: string): string {
   }
 }
 
-function ServiceTypeIcon({ type, size = 18 }: { type: string; size?: number }) {
-  const Icon = serviceTypeIcon(type);
-  return <Icon size={size} />;
-}
-
 export function ServiceNode({ data }: NodeProps<ServiceNodeType>) {
   const { service, selected } = data;
   const typeColor = serviceTypeColor(service.type);
@@ -103,7 +98,7 @@ export function ServiceNode({ data }: NodeProps<ServiceNodeType>) {
               color: selected ? 'white' : typeColor,
             }}
           >
-            <ServiceTypeIcon type={service.type} size={18} />
+            {renderServiceTypeIcon(service.type, 18)}
           </div>
           <div className="min-w-0 flex-1 pt-0.5">
             <h4 className="font-semibold text-sm text-[var(--text-primary)] truncate tracking-tight">{service.name}</h4>