From e2d4d78abe81b8642e4285858f844c7940173ce0 Mon Sep 17 00:00:00 2001
From: Roman Snapko <roman@openops.com>
Date: Thu, 12 Mar 2026 09:22:59 +0100
Subject: [PATCH 1/3] Handle deleted steps in flow run details view

---
 .../flow-step-details-card-item.tsx           | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/react-ui/src/app/features/builder/run-details/flow-step-details-card-item.tsx b/packages/react-ui/src/app/features/builder/run-details/flow-step-details-card-item.tsx
index 288458c397..98c969650a 100644
--- a/packages/react-ui/src/app/features/builder/run-details/flow-step-details-card-item.tsx
+++ b/packages/react-ui/src/app/features/builder/run-details/flow-step-details-card-item.tsx
@@ -6,7 +6,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@openops/components/ui';
-import { ChevronRight } from 'lucide-react';
+import { ChevronRight, TrashIcon } from 'lucide-react';
 import React, { useCallback, useMemo } from 'react';
 
 import { blocksHooks } from '@/app/features/blocks/lib/blocks-hook';
@@ -18,6 +18,7 @@ import { ActionType, FlagId, flowHelper } from '@openops/shared';
 import { flagsHooks } from '@/app/common/hooks/flags-hooks';
 import { useCenterWorkflowViewOntoStep } from '@/app/features/builder/hooks/center-workflow-view-onto-step';
 import { StepStatusIcon } from '@/app/features/flow-runs/components/step-status-icon';
+import { t } from 'i18next';
 import { RUN_DETAILS_STEP_CARD_ID_PREFIX } from './constants';
 import { LoopIterationInput } from './loop-iteration-input';
 
@@ -145,10 +146,19 @@ const FlowStepDetailsCardItem = ({
                 />
               </Button>
             )}
-            <img className="w-6 h-6" alt={'logo'} src={stepMetadata?.logoUrl} />
-            <div className="break-all truncate">{`${stepIndex + 1}. ${
-              step?.displayName
-            }`}</div>
+            {stepMetadata?.logoUrl ? (
+              <img
+                className="w-6 h-6"
+                alt={'logo'}
+                src={stepMetadata?.logoUrl}
+              />
+            ) : (
+              <TrashIcon className="w-6 h-6" />
+            )}
+
+            <div className="break-all truncate">{`${
+              stepIndex !== -1 ? `${stepIndex + 1}. ` : ''
+            }${step?.displayName ?? t('Deleted Step')}`}</div>
             <div className="w-2"></div>
             <div className="flex gap-1 justify-end items-center flex-grow">
               {isLoopStep && (

From a0ed501de6ac7d13be8828cbbdd25074969325a4 Mon Sep 17 00:00:00 2001
From: Roman Snapko <roman@openops.com>
Date: Thu, 12 Mar 2026 13:56:07 +0100
Subject: [PATCH 2/3] Update deleted step icon and styling in flow run details

---
 .../run-details/flow-step-details-card-item.tsx    | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/react-ui/src/app/features/builder/run-details/flow-step-details-card-item.tsx b/packages/react-ui/src/app/features/builder/run-details/flow-step-details-card-item.tsx
index 98c969650a..3b259919b2 100644
--- a/packages/react-ui/src/app/features/builder/run-details/flow-step-details-card-item.tsx
+++ b/packages/react-ui/src/app/features/builder/run-details/flow-step-details-card-item.tsx
@@ -6,7 +6,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@openops/components/ui';
-import { ChevronRight, TrashIcon } from 'lucide-react';
+import { ChevronRight, SquareX } from 'lucide-react';
 import React, { useCallback, useMemo } from 'react';
 
 import { blocksHooks } from '@/app/features/blocks/lib/blocks-hook';
@@ -153,12 +153,16 @@ const FlowStepDetailsCardItem = ({
                 src={stepMetadata?.logoUrl}
               />
             ) : (
-              <TrashIcon className="w-6 h-6" />
+              <SquareX className="w-6 h-6 text-muted-foreground" />
             )}
 
-            <div className="break-all truncate">{`${
-              stepIndex !== -1 ? `${stepIndex + 1}. ` : ''
-            }${step?.displayName ?? t('Deleted Step')}`}</div>
+            <div
+              className={cn('break-all truncate', {
+                'text-muted-foreground italic': !step?.displayName,
+              })}
+            >{`${stepIndex !== -1 ? `${stepIndex + 1}. ` : ''}${
+              step?.displayName ?? t('Deleted Step')
+            }`}</div>
             <div className="w-2"></div>
             <div className="flex gap-1 justify-end items-center flex-grow">
               {isLoopStep && (

From 173d759851a8af2993a796783730995c57045b00 Mon Sep 17 00:00:00 2001
From: Roman Snapko <roman@openops.com>
Date: Thu, 12 Mar 2026 14:02:09 +0100
Subject: [PATCH 3/3] Refactor step display name concatenation in flow step
 details card

---
 .../builder/run-details/flow-step-details-card-item.tsx    | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/react-ui/src/app/features/builder/run-details/flow-step-details-card-item.tsx b/packages/react-ui/src/app/features/builder/run-details/flow-step-details-card-item.tsx
index 3b259919b2..ea245f5091 100644
--- a/packages/react-ui/src/app/features/builder/run-details/flow-step-details-card-item.tsx
+++ b/packages/react-ui/src/app/features/builder/run-details/flow-step-details-card-item.tsx
@@ -160,9 +160,10 @@ const FlowStepDetailsCardItem = ({
               className={cn('break-all truncate', {
                 'text-muted-foreground italic': !step?.displayName,
               })}
-            >{`${stepIndex !== -1 ? `${stepIndex + 1}. ` : ''}${
-              step?.displayName ?? t('Deleted Step')
-            }`}</div>
+            >
+              {(stepIndex !== -1 ? `${stepIndex + 1}. ` : '') +
+                (step?.displayName ?? t('Deleted Step'))}
+            </div>
             <div className="w-2"></div>
             <div className="flex gap-1 justify-end items-center flex-grow">
               {isLoopStep && (