fix(ui): workflow edge under handle

sim/app/globals.css

@@ -2,6 +2,23 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Z-index fixes for workflow components */
+.workflow-container .react-flow__edges {
+  z-index: 0 !important;
+}
+
+.workflow-container .react-flow__node {
+  z-index: 20 !important;
+}
+
+.workflow-container .react-flow__handle {
+  z-index: 30 !important;
+}
+
+.workflow-container .react-flow__edge [data-testid="workflow-edge"] {
+  z-index: 0 !important;
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;

sim/app/w/[id]/components/workflow-block/workflow-block.tsx

@@ -204,7 +204,8 @@ export function WorkflowBlock({ id, data }: NodeProps<WorkflowBlockProps>) {
           isWide ? 'w-[480px]' : 'w-[320px]',
           !isEnabled && 'shadow-sm',
           isActive && 'ring-2 animate-pulse-ring ring-blue-500',
-          isPending && 'ring-2 ring-amber-500'
+          isPending && 'ring-2 ring-amber-500',
+          'z-[20]'
         )}
       >
         {/* Show debug indicator for pending blocks */}
@@ -226,7 +227,7 @@ export function WorkflowBlock({ id, data }: NodeProps<WorkflowBlockProps>) {
             className={cn(
               '!w-[7px] !h-5',
               '!bg-slate-300 dark:!bg-slate-500 !rounded-[2px] !border-none',
-              '!z-[-1]',
+              '!z-[30]',
               'group-hover:!shadow-[0_0_0_3px_rgba(156,163,175,0.15)]',
               horizontalHandles
                 ? 'hover:!w-[10px] hover:!left-[-10px] hover:!rounded-l-full hover:!rounded-r-none'
@@ -377,7 +378,7 @@ export function WorkflowBlock({ id, data }: NodeProps<WorkflowBlockProps>) {
               className={cn(
                 '!w-[7px] !h-5',
                 '!bg-slate-300 dark:!bg-slate-500 !rounded-[2px] !border-none',
-                '!z-[-1]',
+                '!z-[30]',
                 'group-hover:!shadow-[0_0_0_3px_rgba(156,163,175,0.15)]',
                 horizontalHandles
                   ? 'hover:!w-[10px] hover:!right-[-10px] hover:!rounded-r-full hover:!rounded-l-none'
@@ -405,7 +406,7 @@ export function WorkflowBlock({ id, data }: NodeProps<WorkflowBlockProps>) {
                 className={cn(
                   '!w-[7px] !h-5',
                   '!bg-red-400 dark:!bg-red-500 !rounded-[2px] !border-none',
-                  '!z-[-1]',
+                  '!z-[30]',
                   'group-hover:!shadow-[0_0_0_3px_rgba(248,113,113,0.15)]',
                   horizontalHandles
                     ? 'hover:!w-[10px] hover:!right-[-10px] hover:!rounded-r-full hover:!rounded-l-none'

sim/app/w/[id]/components/workflow-edge/workflow-edge.tsx

@@ -30,10 +30,12 @@ export const WorkflowEdge = ({
     <>
       <BaseEdge
         path={edgePath}
+        data-testid="workflow-edge"
         style={{
           strokeWidth: 2,
           stroke: isSelected ? '#475569' : '#94a3b8',
           strokeDasharray: '5,5',
+          zIndex: -10,
         }}
         interactionWidth={20}
       />
@@ -52,6 +54,7 @@ export const WorkflowEdge = ({
             style={{
               transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
               pointerEvents: 'all',
+              zIndex: 1000,
             }}
             onClick={(e) => {
               e.preventDefault()

sim/app/w/[id]/workflow.tsx

@@ -472,6 +472,7 @@ function WorkflowContent() {
           noWheelClassName="allow-scroll"
           edgesFocusable={true}
           edgesUpdatable={true}
+          className="workflow-container"
         >
           <Background />
         </ReactFlow>