Fix(agentflow) - Fix z-index for validation button (#6238)

* Fix z-index for validation

* Reverting changes to ValidationFeedback.tsx

* Use tokens for z index

Author: j-sanaa

packages/agentflow/src/Agentflow.tsx

@@ -267,7 +267,7 @@ function AgentflowCanvas({
                                 position: 'absolute',
                                 left: showDefaultPalette ? 70 : 20, // 70px offset = ~10px gap between buttons
                                 top: 20,
-                                zIndex: 1001
+                                zIndex: tokens.zIndex.canvasButton
                             }}
                         >
                             <IconSparkles />
@@ -276,7 +276,16 @@ function AgentflowCanvas({
 
                     {/* Canvas action buttons - positioned at top right */}
                     {!readOnly && (
-                        <div style={{ position: 'absolute', right: 20, top: 20, zIndex: 1001, display: 'flex', gap: 8 }}>
+                        <div
+                            style={{
+                                position: 'absolute',
+                                right: 20,
+                                top: 20,
+                                zIndex: tokens.zIndex.canvasButton,
+                                display: 'flex',
+                                gap: 8
+                            }}
+                        >
                             <ValidationFeedback
                                 nodes={nodes as FlowNode[]}
                                 edges={edges as FlowEdge[]}

packages/agentflow/src/core/theme/tokens.ts

@@ -256,6 +256,13 @@ export const tokens = {
         md: 8,
         lg: 12,
         round: '50%'
+    },
+
+    // Z-index scale for canvas overlay elements.
+    // All values sit below the Canvas Kit modal overlay (30–50).
+    zIndex: {
+        canvasButton: 10, // FABs and button containers
+        canvasPanel: 20 // Open panels/poppers anchored to buttons
     }
 } as const
 

packages/agentflow/src/features/canvas/components/ValidationFeedback.tsx

@@ -151,7 +151,6 @@ function ValidationFeedbackComponent({ nodes, edges, availableNodes, setNodes }:
                         title='Validate flow'
                         onClick={handleToggle}
                         sx={{
-                            zIndex: 10,
                             color: 'white',
                             backgroundColor: 'primary.main',
                             '&:hover': {
@@ -172,7 +171,7 @@ function ValidationFeedbackComponent({ nodes, edges, availableNodes, setNodes }:
                                 right: 0,
                                 mt: 1.5,
                                 width: 400,
-                                zIndex: 10
+                                zIndex: tokens.zIndex.canvasPanel
                             }}
                         >
                             <Box sx={{ p: 2 }}>

packages/agentflow/src/features/node-palette/AddNodesDrawer.tsx

@@ -30,8 +30,6 @@ import { debounce, groupNodesByCategory, searchNodes } from './search'
 import { StyledFab } from './StyledFab'
 import { useDrawerMaxHeight } from './useDrawerMaxHeight'
 
-const Z_INDEX_DRAWER = 10
-
 export interface AddNodesDrawerProps {
     /** Available nodes to display */
     nodes: NodeDataSchema[]
@@ -154,7 +152,7 @@ function AddNodesDrawerComponent({ nodes, onDragStart, onNodeClick }: AddNodesDr
                     position: 'absolute',
                     left: 20,
                     top: 20,
-                    zIndex: Z_INDEX_DRAWER
+                    zIndex: tokens.zIndex.canvasButton
                 }}
             >
                 {open ? <IconMinus /> : <IconPlus />}
@@ -177,7 +175,7 @@ function AddNodesDrawerComponent({ nodes, onDragStart, onNodeClick }: AddNodesDr
                         }
                     ]
                 }}
-                sx={{ zIndex: Z_INDEX_DRAWER }}
+                sx={{ zIndex: tokens.zIndex.canvasPanel }}
             >
                 {({ TransitionProps }) => (
                     <Fade {...TransitionProps} timeout={200}>