From a0073500045e0a1e7f53e69432aa1e839e9780e3 Mon Sep 17 00:00:00 2001
From: kumaradityaraj <sedulous.0007@gmail.com>
Date: Thu, 25 Jun 2026 15:14:19 +0530
Subject: [PATCH 1/8] start end node styling

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>
---
 .../src/react-flow/diagram/Diagram.css        | 52 +++++++++++++++++++
 .../src/react-flow/nodes/Nodes.tsx            | 22 +++++++-
 2 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
index 9f52b4f..ec4b314 100644
--- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
+++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
@@ -402,6 +402,58 @@
   }
 
     /* end validation errors */
+  
+  .dec-start-end-node {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .dec-start-node,
+  .dec-end-node {
+    width: 72px;
+    height: 72px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    background: var(--color-background, white);
+  }
+  
+  /* Start node - green single circle */
+  .dec-start-node {
+    border: 1px solid grey;
+    background-color: lightgray;
+  }
+
+  .dec-end-node {
+    border: 1px solid grey;
+    background-color: lightgray;
+  }
+  
+  .dec-end-node-inner {
+    position: absolute;
+    inset: 6px;
+    border-radius: 50%;
+    border: 1px solid grey;
+    background-color: lightgray;
+    pointer-events: none;
+  }
+  
+  .dec-start-end-node.selected .dec-start-node {
+    box-shadow: 0 0 0 4px rgba(209, 204, 204, 0.3);
+  }
+  
+  .dec-start-end-node.selected .dec-end-node {
+    box-shadow: 0 0 0 4px rgba(209, 204, 204, 0.3);
+  }
+  
+  .dec-start-node:hover,
+  .dec-end-node:hover {
+    box-shadow: 0 0 0 4px rgba(209, 204, 204, 0.3);
+  }
 }
 
 /* custom edges */
diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx b/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
index 9a9efe6..e453407 100644
--- a/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
+++ b/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
@@ -206,18 +206,36 @@ function PlaceholderContent({ id, data, selected, type }: PlaceholderProps) {
   );
 }
 
+function StartEndNode({ id, data, selected, type }: NodeContentProps) {
+  const isStart = type === GraphNodeType.Start;
+  return (
+    <div
+      className={`dec-start-end-node ${selected ? "selected" : ""} ${
+        data.hasError ? "has-error" : ""
+      }`}
+      data-testid={`${type}-node-${id}`}
+    >
+      {!isStart && <RF.Handle type="target" position={RF.Position.Top} />}
+      <div className={isStart ? "dec-start-node" : "dec-end-node"}>
+        {!isStart && <div className="dec-end-node-inner" />}
+      </div>
+      {isStart && <RF.Handle type="source" position={RF.Position.Bottom} />}
+    </div>
+  );
+}
+
 /* start node */
 export type StartNodeType = RF.Node<BaseNodeData, typeof GraphNodeType.Start>;
 export function StartNode({ id, data, selected, type }: RF.NodeProps<StartNodeType>) {
   // TODO: This component is just a placeholder
-  return <PlaceholderContent id={id} data={data} selected={selected} type={type} />;
+  return <StartEndNode id={id} data={data} selected={selected} type={type} />;
 }
 
 /* end node */
 export type EndNodeType = RF.Node<BaseNodeData, typeof GraphNodeType.End>;
 export function EndNode({ id, data, selected, type }: RF.NodeProps<EndNodeType>) {
   // TODO: This component is just a placeholder
-  return <PlaceholderContent id={id} data={data} selected={selected} type={type} />;
+  return <StartEndNode id={id} data={data} selected={selected} type={type} />;
 }
 
 /* entry node */

From 87b0d3387e68f2a911f15e94397b8ae9178e3a87 Mon Sep 17 00:00:00 2001
From: kumaradityaraj <sedulous.0007@gmail.com>
Date: Fri, 26 Jun 2026 17:10:10 +0530
Subject: [PATCH 2/8] Copilot and team review

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>
---
 .../src/react-flow/diagram/Diagram.css        | 12 +++++------
 .../src/react-flow/nodes/Nodes.tsx            | 20 +------------------
 2 files changed, 7 insertions(+), 25 deletions(-)

diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
index ec4b314..9e4d5ef 100644
--- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
+++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
@@ -424,21 +424,21 @@
   
   /* Start node - green single circle */
   .dec-start-node {
-    border: 1px solid grey;
-    background-color: lightgray;
+  border: 1px solid #aea6a6;
+  background-color: #f2f2f2;
   }
 
   .dec-end-node {
-    border: 1px solid grey;
-    background-color: lightgray;
+  border: 1px solid #aea6a6;
+  background-color: #e7e3e3;
   }
   
   .dec-end-node-inner {
     position: absolute;
     inset: 6px;
     border-radius: 50%;
-    border: 1px solid grey;
-    background-color: lightgray;
+    border: 1px solid #aea6a6;
+    background-color: #e7e3e3;
     pointer-events: none;
   }
   
diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx b/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
index e453407..0d68d8f 100644
--- a/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
+++ b/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
@@ -190,29 +190,11 @@ interface PlaceholderProps {
   type: string;
 }
 
-// TODO: This content is just a placeholder
-function PlaceholderContent({ id, data, selected, type }: PlaceholderProps) {
-  return (
-    <div
-      className={`custom-node-container ${selected ? "selected" : ""}`}
-      data-testid={`${type}-node-${id}`}
-    >
-      <RF.Handle type="target" position={RF.Position.Top} />
-      <div className="node-label-container" data-testid={`${type}-label-${id}`}>
-        {`${type}\n${data.label}`}
-      </div>
-      <RF.Handle type="source" position={RF.Position.Bottom} />
-    </div>
-  );
-}
-
 function StartEndNode({ id, data, selected, type }: NodeContentProps) {
   const isStart = type === GraphNodeType.Start;
   return (
     <div
-      className={`dec-start-end-node ${selected ? "selected" : ""} ${
-        data.hasError ? "has-error" : ""
-      }`}
+      className={`dec-start-end-node ${selected ? "selected" : ""}`}
       data-testid={`${type}-node-${id}`}
     >
       {!isStart && <RF.Handle type="target" position={RF.Position.Top} />}

From b372714e248c81bb4a519abd72b263d338e6568b Mon Sep 17 00:00:00 2001
From: kumaradityaraj <sedulous.0007@gmail.com>
Date: Fri, 26 Jun 2026 17:16:27 +0530
Subject: [PATCH 3/8] updating pmpl from upstream

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>
---
 pnpm-lock.yaml | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8d88428..5e458c1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,6 +93,9 @@ catalogs:
     jsdom:
       specifier: ^29.1.0
       version: 29.1.1
+    lint-staged:
+      specifier: ^17.0.8
+      version: 17.0.8
     lucide-react:
       specifier: ^1.21.0
       version: 1.21.0
@@ -153,7 +156,7 @@ importers:
         specifier: 'catalog:'
         version: 9.1.7
       lint-staged:
-        specifier: 17.0.8
+        specifier: 'catalog:'
         version: 17.0.8
       oxfmt:
         specifier: 'catalog:'

From 8a4c8a31f8891bda8ec2d64c409b132ffd6aefb8 Mon Sep 17 00:00:00 2001
From: kumaradityaraj <sedulous.0007@gmail.com>
Date: Fri, 26 Jun 2026 17:24:13 +0530
Subject: [PATCH 4/8] Copilot reviews

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>
---
 .../src/react-flow/diagram/Diagram.css                    | 1 -
 .../src/react-flow/nodes/Nodes.tsx                        | 8 --------
 2 files changed, 9 deletions(-)

diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
index f6b6b98..2e588e7 100644
--- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
+++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
@@ -422,7 +422,6 @@
     background: var(--color-background, white);
   }
   
-  /* Start node - green single circle */
   .dec-start-node {
   border: 1px solid #aea6a6;
   background-color: #f2f2f2;
diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx b/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
index 0d68d8f..c676b5e 100644
--- a/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
+++ b/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
@@ -182,14 +182,6 @@ function TerminalNodeContent({ id, type }: { id: string; type: TerminalNodeType
   );
 }
 
-// TODO: These props are just a placeholder
-interface PlaceholderProps {
-  id: string;
-  data: BaseNodeData;
-  selected: boolean;
-  type: string;
-}
-
 function StartEndNode({ id, data, selected, type }: NodeContentProps) {
   const isStart = type === GraphNodeType.Start;
   return (

From 34493d440ae435c2711c2e615a8c041760b5c203 Mon Sep 17 00:00:00 2001
From: kumaradityaraj <sedulous.0007@gmail.com>
Date: Mon, 29 Jun 2026 11:03:44 +0530
Subject: [PATCH 5/8] colour fixing

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>
---
 .../src/react-flow/diagram/Diagram.css                     | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
index 2e588e7..1d0acf9 100644
--- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
+++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
@@ -453,6 +453,13 @@
   .dec-end-node:hover {
     box-shadow: 0 0 0 4px rgba(209, 204, 204, 0.3);
   }
+
+  .dec-root.dark .dec-start-node,
+  .dec-root.dark .dec-end-node,
+  .dec-root.dark .dec-end-node-inner {
+  @apply dec:border-slate-600
+    dec:bg-slate-800;
+  }
 }
 
 /* custom edges */

From e4bb37befe6305f10b2ea4bd1c6d014d64ff049b Mon Sep 17 00:00:00 2001
From: kumaradityaraj <sedulous.0007@gmail.com>
Date: Mon, 29 Jun 2026 11:19:03 +0530
Subject: [PATCH 6/8] fixing colour

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>
---
 .../src/react-flow/diagram/Diagram.css        | 109 +++++++++---------
 1 file changed, 53 insertions(+), 56 deletions(-)

diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
index 1d0acf9..baeda0e 100644
--- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
+++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
@@ -404,62 +404,59 @@
     /* end validation errors */
   
   .dec-start-end-node {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  
-  .dec-start-node,
-  .dec-end-node {
-    width: 72px;
-    height: 72px;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    background: var(--color-background, white);
-  }
-  
-  .dec-start-node {
-  border: 1px solid #aea6a6;
-  background-color: #f2f2f2;
-  }
-
-  .dec-end-node {
-  border: 1px solid #aea6a6;
-  background-color: #e7e3e3;
-  }
-  
-  .dec-end-node-inner {
-    position: absolute;
-    inset: 6px;
-    border-radius: 50%;
-    border: 1px solid #aea6a6;
-    background-color: #e7e3e3;
-    pointer-events: none;
-  }
-  
-  .dec-start-end-node.selected .dec-start-node {
-    box-shadow: 0 0 0 4px rgba(209, 204, 204, 0.3);
-  }
-  
-  .dec-start-end-node.selected .dec-end-node {
-    box-shadow: 0 0 0 4px rgba(209, 204, 204, 0.3);
-  }
-  
-  .dec-start-node:hover,
-  .dec-end-node:hover {
-    box-shadow: 0 0 0 4px rgba(209, 204, 204, 0.3);
-  }
-
-  .dec-root.dark .dec-start-node,
-  .dec-root.dark .dec-end-node,
-  .dec-root.dark .dec-end-node-inner {
-  @apply dec:border-slate-600
-    dec:bg-slate-800;
-  }
+   position: relative;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+ }
+ 
+ .dec-start-node,
+ .dec-end-node {
+   width: 72px;
+   height: 72px;
+   border-radius: 50%;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   position: relative;
+ 
+   @apply dec:border
+     dec:border-slate-300
+     dec:bg-slate-100
+     dec:text-slate-600;
+ }
+ 
+ .dec-end-node-inner {
+   position: absolute;
+   inset: 6px;
+   border-radius: 50%;
+   pointer-events: none;
+ 
+   @apply dec:border
+     dec:border-slate-300
+     dec:bg-slate-100;
+ }
+ 
+ .dec-start-end-node.selected .dec-start-node,
+ .dec-start-end-node.selected .dec-end-node,
+ .dec-start-node:hover,
+ .dec-end-node:hover {
+   box-shadow: 0 0 0 4px rgba(209, 204, 204, 0.3);
+ }
+ 
+ .dec-root.dark .dec-start-node,
+ .dec-root.dark .dec-end-node {
+   @apply dec:border
+     dec:border-slate-600
+     dec:bg-slate-800
+     dec:text-slate-300;
+ }
+ 
+ .dec-root.dark .dec-end-node-inner {
+   @apply dec:border
+     dec:border-slate-600
+     dec:bg-slate-800;
+ }
 }
 
 /* custom edges */

From ca4b86ca3b237b993865d21c27e12ee6acee79bd Mon Sep 17 00:00:00 2001
From: kumaradityaraj <sedulous.0007@gmail.com>
Date: Wed, 1 Jul 2026 14:15:52 +0530
Subject: [PATCH 7/8] node unclickable

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>
---
 .../src/react-flow/diagram/Diagram.css        |  6 ---
 .../src/react-flow/nodes/Nodes.tsx            | 53 +++++++++++++++----
 2 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
index baeda0e..b6b262f 100644
--- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
+++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
@@ -437,12 +437,6 @@
      dec:bg-slate-100;
  }
  
- .dec-start-end-node.selected .dec-start-node,
- .dec-start-end-node.selected .dec-end-node,
- .dec-start-node:hover,
- .dec-end-node:hover {
-   box-shadow: 0 0 0 4px rgba(209, 204, 204, 0.3);
- }
  
  .dec-root.dark .dec-start-node,
  .dec-root.dark .dec-end-node {
diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx b/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
index c676b5e..b4763f7 100644
--- a/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
+++ b/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
@@ -182,34 +182,67 @@ function TerminalNodeContent({ id, type }: { id: string; type: TerminalNodeType
   );
 }
 
-function StartEndNode({ id, data, selected, type }: NodeContentProps) {
+// function StartEndNode({ id, data, selected, type }: NodeContentProps) {
+//   const isStart = type === GraphNodeType.Start;
+//   return (
+//     <div
+//       className={`dec-start-end-node ${selected ? "selected" : ""}`}
+//       data-testid={`${type}-node-${id}`}
+//     >
+//       {!isStart && <RF.Handle type="target" position={RF.Position.Top} />}
+//       <div className={isStart ? "dec-start-node" : "dec-end-node"}>
+//         {!isStart && <div className="dec-end-node-inner" />}
+//       </div>
+//       {isStart && <RF.Handle type="source" position={RF.Position.Bottom} />}
+//     </div>
+//   );
+// }
+
+// /* start node */
+// export type StartNodeType = RF.Node<BaseNodeData, typeof GraphNodeType.Start>;
+// export function StartNode({ id, data, selected, type }: RF.NodeProps<StartNodeType>) {
+//   // TODO: This component is just a placeholder
+//   return <StartEndNode id={id} data={data} selected={selected} type={type} />;
+// }
+
+// /* end node */
+// export type EndNodeType = RF.Node<BaseNodeData, typeof GraphNodeType.End>;
+// export function EndNode({ id, data, selected, type }: RF.NodeProps<EndNodeType>) {
+//   // TODO: This component is just a placeholder
+//   return <StartEndNode id={id} data={data} selected={selected} type={type} />;
+// }
+
+function StartEndNode({ id, type }: { id: string; type: GraphNodeType.Start | GraphNodeType.End }) {
   const isStart = type === GraphNodeType.Start;
   return (
     <div
-      className={`dec-start-end-node ${selected ? "selected" : ""}`}
+      className="dec-start-end-node"
       data-testid={`${type}-node-${id}`}
+      onClick={(e) => e.stopPropagation()}
     >
-      {!isStart && <RF.Handle type="target" position={RF.Position.Top} />}
+      {isStart ? (
+        <RF.Handle type="source" position={RF.Position.Bottom} />
+      ) : (
+        <RF.Handle type="target" position={RF.Position.Top} />
+      )}
+
       <div className={isStart ? "dec-start-node" : "dec-end-node"}>
         {!isStart && <div className="dec-end-node-inner" />}
       </div>
-      {isStart && <RF.Handle type="source" position={RF.Position.Bottom} />}
     </div>
   );
 }
 
 /* start node */
 export type StartNodeType = RF.Node<BaseNodeData, typeof GraphNodeType.Start>;
-export function StartNode({ id, data, selected, type }: RF.NodeProps<StartNodeType>) {
-  // TODO: This component is just a placeholder
-  return <StartEndNode id={id} data={data} selected={selected} type={type} />;
+export function StartNode({ id, type }: RF.NodeProps<StartNodeType>) {
+  return <StartEndNode id={id} type={type} />;
 }
 
 /* end node */
 export type EndNodeType = RF.Node<BaseNodeData, typeof GraphNodeType.End>;
-export function EndNode({ id, data, selected, type }: RF.NodeProps<EndNodeType>) {
-  // TODO: This component is just a placeholder
-  return <StartEndNode id={id} data={data} selected={selected} type={type} />;
+export function EndNode({ id, type }: RF.NodeProps<EndNodeType>) {
+  return <StartEndNode id={id} type={type} />;
 }
 
 /* entry node */

From a18b66484e0a3a2d3d91fd712b6c2afadb7aaaab Mon Sep 17 00:00:00 2001
From: kumaradityaraj <sedulous.0007@gmail.com>
Date: Wed, 1 Jul 2026 14:54:28 +0530
Subject: [PATCH 8/8] size made small

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>
---
 .../src/react-flow/diagram/Diagram.css        | 117 +++++++++---------
 .../src/react-flow/nodes/Nodes.tsx            |  30 -----
 2 files changed, 61 insertions(+), 86 deletions(-)

diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
index cd5b440..19f2b01 100644
--- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
+++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
@@ -74,25 +74,25 @@
   }
 
   /* minimap */
-  .dec-root .react-flow__minimap{
+  .dec-root .react-flow__minimap {
     --xy-minimap-background-color: var(--dec-minimap-bg);
     --xy-minimap-mask-background-color: var(--dec-minimap-mask);
     --xy-minimap-mask-stroke-color: var(--dec-minimap-viewport);
     --xy-minimap-node-background-color: var(--dec-minimap-node);
     --xy-minimap-node-stroke-color: var(--dec-minimap-node-stroke);
     --xy-minimap-node-stroke-width: 2;
-    
+
     border: 1px solid var(--dec-minimap-border);
-    border-radius:8px;
+    border-radius: 8px;
     box-shadow: 0 4px 12px var(--dec-minimap-shadow);
     overflow: hidden;
-}
+  }
 
   .dec-root .react-flow__minimap-node {
     fill: var(--dec-minimap-node);
     stroke: var(--dec-minimap-node-stroke);
     stroke-width: 2;
-}
+  }
 }
 
 /* custom nodes */
@@ -316,13 +316,21 @@
   .dec-root .dec-task-node-badge,
   .dec-root .dec-task-node-badge-custom {
     color: color-mix(in srgb, var(--task-node-color) 60%, black);
-    background-color: color-mix(in srgb, var(--task-node-color) 12%, transparent);
+    background-color: color-mix(
+      in srgb,
+      var(--task-node-color) 12%,
+      transparent
+    );
   }
 
   .dec-root.dark .dec-task-node-badge,
   .dec-root.dark .dec-task-node-badge-custom {
     color: color-mix(in srgb, var(--task-node-color) 18%, white);
-    background-color: color-mix(in srgb, var(--task-node-color) 40%, transparent);
+    background-color: color-mix(
+      in srgb,
+      var(--task-node-color) 40%,
+      transparent
+    );
   }
 
   .dec-root .dec-task-node-badge {
@@ -429,56 +437,53 @@
     stroke-width: 2.25;
   }
 
-    /* end validation errors */
-  
-  .dec-start-end-node {
-   position: relative;
-   display: flex;
-   justify-content: center;
-   align-items: center;
- }
- 
- .dec-start-node,
- .dec-end-node {
-   width: 72px;
-   height: 72px;
-   border-radius: 50%;
-   display: flex;
-   justify-content: center;
-   align-items: center;
-   position: relative;
- 
-   @apply dec:border
-     dec:border-slate-300
-     dec:bg-slate-100
-     dec:text-slate-600;
- }
- 
- .dec-end-node-inner {
-   position: absolute;
-   inset: 6px;
-   border-radius: 50%;
-   pointer-events: none;
- 
-   @apply dec:border
-     dec:border-slate-300
+  /* end validation errors */
+
+  .dec-root .dec-start-end-node {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .dec-root .dec-start-node, .dec-root .dec-end-node{
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    @apply dec:border
+     dec:border-slate-400
+     dec:bg-slate-100;
+  }
+
+  .dec-root .dec-end-node-inner {
+    position: absolute;
+    inset: 6px;
+    border-radius: 50%;
+    pointer-events: none;
+
+    @apply dec:border
+     dec:border-slate-400
      dec:bg-slate-100;
- }
- 
- 
- .dec-root.dark .dec-start-node,
- .dec-root.dark .dec-end-node {
-   @apply dec:border
+  }
+
+  .dec-root.dark .dec-start-node,
+  .dec-root.dark .dec-end-node {
+    @apply dec:border
      dec:border-slate-600
      dec:bg-slate-800
      dec:text-slate-300;
- }
- 
- .dec-root.dark .dec-end-node-inner {
-   @apply dec:border
+  }
+
+  .dec-root.dark .dec-end-node-inner {
+    @apply dec:border
      dec:border-slate-600
      dec:bg-slate-800;
- }
+  }
 }
 
 /* custom edges */
@@ -491,7 +496,7 @@
 
 .dec-root .edge-line.error {
   stroke: var(--dec-error-accent);
-  @apply  dec:[stroke-dasharray:5_5];
+  @apply dec:[stroke-dasharray:5_5];
 }
 
 .dec-root .edge-line.condition {
@@ -514,14 +519,14 @@
 /* Selected edge shadow effect - lighter for light mode */
 .dec-root .edge-line.selected {
   filter: drop-shadow(0 0 2px rgba(59, 130, 246, 0.8))
-          drop-shadow(0 0 6px rgba(59, 130, 246, 0.4))
-          drop-shadow(0 0 12px rgba(59, 130, 246, 0.2));
+    drop-shadow(0 0 6px rgba(59, 130, 246, 0.4))
+    drop-shadow(0 0 12px rgba(59, 130, 246, 0.2));
 }
 
 .dec-root.dark .edge-line.selected {
   filter: drop-shadow(0 0 3px rgb(59 130 246))
-          drop-shadow(0 0 8px rgb(59 130 246))
-          drop-shadow(0 0 16px rgba(59, 130, 246, 0.8));
+    drop-shadow(0 0 8px rgb(59 130 246))
+    drop-shadow(0 0 16px rgba(59, 130, 246, 0.8));
 }
 
 /* custom edge labels */
diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx b/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
index 003a797..ec48e16 100644
--- a/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
+++ b/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
@@ -188,36 +188,6 @@ function TerminalNodeContent({ id, type }: { id: string; type: TerminalNodeType
   );
 }
 
-// function StartEndNode({ id, data, selected, type }: NodeContentProps) {
-//   const isStart = type === GraphNodeType.Start;
-//   return (
-//     <div
-//       className={`dec-start-end-node ${selected ? "selected" : ""}`}
-//       data-testid={`${type}-node-${id}`}
-//     >
-//       {!isStart && <RF.Handle type="target" position={RF.Position.Top} />}
-//       <div className={isStart ? "dec-start-node" : "dec-end-node"}>
-//         {!isStart && <div className="dec-end-node-inner" />}
-//       </div>
-//       {isStart && <RF.Handle type="source" position={RF.Position.Bottom} />}
-//     </div>
-//   );
-// }
-
-// /* start node */
-// export type StartNodeType = RF.Node<BaseNodeData, typeof GraphNodeType.Start>;
-// export function StartNode({ id, data, selected, type }: RF.NodeProps<StartNodeType>) {
-//   // TODO: This component is just a placeholder
-//   return <StartEndNode id={id} data={data} selected={selected} type={type} />;
-// }
-
-// /* end node */
-// export type EndNodeType = RF.Node<BaseNodeData, typeof GraphNodeType.End>;
-// export function EndNode({ id, data, selected, type }: RF.NodeProps<EndNodeType>) {
-//   // TODO: This component is just a placeholder
-//   return <StartEndNode id={id} data={data} selected={selected} type={type} />;
-// }
-
 function StartEndNode({ id, type }: { id: string; type: GraphNodeType.Start | GraphNodeType.End }) {
   const isStart = type === GraphNodeType.Start;
   return (