@inspirer-dev/crm-dashboard 1.0.72 → 1.0.73

package/admin/src/components/StepFlowBuilder/constants.ts

@@ -110,16 +110,12 @@ export const CHANNEL_OPTIONS: { value: ChannelType; label: string }[] = [
   { value: 'sms', label: 'SMS' },
 ];
 
-export const CHANNELS = CHANNEL_OPTIONS;
-
 export const DURATION_UNIT_OPTIONS: { value: DurationUnit; label: string }[] = [
   { value: 'minutes', label: 'Minutes' },
   { value: 'hours', label: 'Hours' },
   { value: 'days', label: 'Days' },
 ];
 
-export const DURATION_UNITS = DURATION_UNIT_OPTIONS;
-
 export const DEFAULT_NODE_DATA: Record<StepType, { name: string; config: object }> = {
   entry: {
     name: 'Entry',
@@ -166,24 +162,3 @@ export const PROXIMITY_THRESHOLD = 350;
 
 export const AUTO_DISCONNECT_ENABLED = false;
 
-export const DEFAULT_STEP_CONFIG: Record<StepType, object> = {
-  entry: {},
-  message: {
-    channel: 'telegram' as ChannelType,
-    variants: [],
-  },
-  wait: {
-    duration: 1,
-    durationUnit: 'hours' as DurationUnit,
-  },
-  branch: {
-    branchSegmentId: undefined,
-  },
-  exit: {},
-  event_trigger: {
-    eventTrigger: {
-      events: [],
-      logic: 'or',
-    },
-  },
-};

package/admin/src/components/StepFlowBuilder/flow-canvas/FlowCanvas.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState, useMemo } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import ReactFlow, {
   Background,
   MiniMap,
@@ -52,7 +52,6 @@ interface FlowCanvasProps {
   onStepsChange: (steps: FlowStep[]) => void;
   onValidationChange?: (validation: ValidationResult) => void;
   disabled?: boolean;
-  error?: string;
   campaignContext?: CampaignContext;
 }
 
@@ -61,29 +60,43 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({
   onStepsChange,
   onValidationChange,
   disabled,
-  error,
   campaignContext,
 }) => {
   const [nodes, setNodes, onNodesChange] = useNodesState<FlowNodeData>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
   const [selectedNode, setSelectedNode] = useState<FlowNode | null>(null);
   const [, setHistoryTick] = useState(0);
+  const [validation, setValidation] = useState<ValidationResult>(() =>
+    validateFlow([] as FlowNode[], [] as FlowEdge[])
+  );
   const isInitialMount = useRef(true);
   const syncTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const validationTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const lastStepsRef = useRef<string>('');
+  const lastValidationJsonRef = useRef<string>('');
   const isRestoringRef = useRef(false);
   const history = useFlowHistory();
   const { fitView, getViewport, setViewport, setCenter } = useReactFlow();
   const store = useStoreApi();
   const updateNodeInternals = useUpdateNodeInternals();
 
-  const validation = useMemo(() => {
-    return validateFlow(nodes as FlowNode[], edges as FlowEdge[]);
-  }, [nodes, edges]);
-
   useEffect(() => {
-    onValidationChange?.(validation);
-  }, [validation, onValidationChange]);
+    if (validationTimeoutRef.current) {
+      clearTimeout(validationTimeoutRef.current);
+    }
+    validationTimeoutRef.current = setTimeout(() => {
+      const result = validateFlow(nodes as FlowNode[], edges as FlowEdge[]);
+      const json = JSON.stringify({ e: result.errors.map((e) => e.id), w: result.warnings.map((w) => w.id) });
+      if (json !== lastValidationJsonRef.current) {
+        lastValidationJsonRef.current = json;
+        setValidation(result);
+        onValidationChange?.(result);
+      }
+    }, 200);
+    return () => {
+      if (validationTimeoutRef.current) clearTimeout(validationTimeoutRef.current);
+    };
+  }, [nodes, edges, onValidationChange]);
 
   const fitViewWithOffset = useCallback(
     ({ topOffset = 40, rightOffset = 150, targetZoom = 0.5 } = {}) => {
@@ -220,8 +233,8 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({
     [store]
   );
 
-  const handleNodeDrag = useCallback(
-    (_: React.MouseEvent, node: Node<FlowNodeData>) => {
+  const applyProximityEdges = useCallback(
+    (node: Node<FlowNodeData>, isPreview: boolean) => {
       const closeEdge = getClosestEdge(node);
 
       setEdges((es) => {
@@ -252,7 +265,7 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({
           if (!sourceHandleAlreadyUsed && !targetAlreadyHasInput) {
             nextEdges.push({
               ...closeEdge,
-              className: 'temp',
+              ...(isPreview ? { className: 'temp' } : {}),
               type: closeEdge.sourceHandle ? 'labeled' : 'default',
             });
           }
@@ -264,47 +277,18 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({
     [getClosestEdge, getNodeDistance, setEdges]
   );
 
-  const handleNodeDragStop = useCallback(
+  const handleNodeDrag = useCallback(
     (_: React.MouseEvent, node: Node<FlowNodeData>) => {
-      const closeEdge = getClosestEdge(node);
-
-      setEdges((es) => {
-        const nextEdges = es.filter((e) => {
-          if (e.className === 'temp') return false;
-          if (AUTO_DISCONNECT_ENABLED) {
-            const isConnectedToDragged = e.source === node.id || e.target === node.id;
-            if (isConnectedToDragged) {
-              const otherNodeId = e.source === node.id ? e.target : e.source;
-              const distance = getNodeDistance(node.id, otherNodeId);
-              if (distance > PROXIMITY_THRESHOLD) {
-                return false;
-              }
-            }
-          }
-          return true;
-        });
-
-        if (closeEdge) {
-          const sourceHandleAlreadyUsed = nextEdges.find(
-            (ne) =>
-              ne.source === closeEdge.source &&
-              ne.sourceHandle === closeEdge.sourceHandle
-          );
-          const targetAlreadyHasInput = nextEdges.find(
-            (ne) => ne.target === closeEdge.target
-          );
-          if (!sourceHandleAlreadyUsed && !targetAlreadyHasInput) {
-            nextEdges.push({
-              ...closeEdge,
-              type: closeEdge.sourceHandle ? 'labeled' : 'default',
-            });
-          }
-        }
+      applyProximityEdges(node, true);
+    },
+    [applyProximityEdges]
+  );
 
-        return nextEdges;
-      });
+  const handleNodeDragStop = useCallback(
+    (_: React.MouseEvent, node: Node<FlowNodeData>) => {
+      applyProximityEdges(node, false);
     },
-    [getClosestEdge, getNodeDistance, setEdges]
+    [applyProximityEdges]
   );
 
   useEffect(() => {
@@ -564,7 +548,7 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({
         style={{
           height: '100%',
           width: '100%',
-          border: error ? '1px solid #ee5e52' : 'none',
+          border: 'none',
           borderRadius: 0,
           overflow: 'hidden',
           position: 'relative',
@@ -609,6 +593,7 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({
                 wait: '#f59e0b',
                 branch: '#8b5cf6',
                 exit: '#6b7280',
+                event_trigger: '#f43f5e',
               };
               return colors[(node.data as FlowNodeData)?.stepType] || '#4a4a6a';
             }}

package/admin/src/components/StepFlowBuilder/hooks/useFlowHistory.ts

@@ -24,6 +24,9 @@ export const useFlowHistory = () => {
   const redo = useCallback((currentStepsJson: string): string | null => {
     if (redoStack.current.length === 0) return null;
     undoStack.current.push(currentStepsJson);
+    if (undoStack.current.length > MAX_HISTORY) {
+      undoStack.current.shift();
+    }
     return redoStack.current.pop()!;
   }, []);
 

package/admin/src/components/StepFlowBuilder/hooks/useFlowTheme.ts

@@ -7,19 +7,17 @@ export interface FlowThemeColors {
   text: string;
   textMuted: string;
   textSubtle: string;
-  isDark: boolean;
 }
 
-export const useFlowTheme = (): FlowThemeColors => {
-  return {
-    background: '#1a1a2e',
-    surface: '#252540',
-    surfaceHover: '#2f2f4a',
-    border: 'rgba(255, 255, 255, 0.1)',
-    borderLight: 'rgba(255, 255, 255, 0.06)',
-    text: '#ffffff',
-    textMuted: 'rgba(255, 255, 255, 0.6)',
-    textSubtle: 'rgba(255, 255, 255, 0.4)',
-    isDark: true,
-  };
+const THEME: FlowThemeColors = {
+  background: '#1a1a2e',
+  surface: '#252540',
+  surfaceHover: '#2f2f4a',
+  border: 'rgba(255, 255, 255, 0.1)',
+  borderLight: 'rgba(255, 255, 255, 0.06)',
+  text: '#ffffff',
+  textMuted: 'rgba(255, 255, 255, 0.6)',
+  textSubtle: 'rgba(255, 255, 255, 0.4)',
 };
+
+export const useFlowTheme = (): FlowThemeColors => THEME;

package/admin/src/components/StepFlowBuilder/index.tsx

@@ -11,12 +11,20 @@ import {
 
 import type { StepFlowBuilderProps, FlowStep, CampaignContext, EntrySegment } from './types';
 import type { ValidationResult } from './validation';
-import { parseValue } from './utils';
+import { parseValue, pluralize } from './utils';
 import { FlowCanvas } from './flow-canvas';
 
 type SegmentItem = { id?: number; documentId?: string; name?: string };
 type ConnectDisconnect = { connect?: SegmentItem[]; disconnect?: SegmentItem[] };
 
+const useContentManagerContextSafe = () => {
+  try {
+    return useContentManagerContext();
+  } catch {
+    return null;
+  }
+};
+
 interface StepFlowModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -27,6 +35,15 @@ interface StepFlowModalProps {
   onValidationChange: (validation: ValidationResult) => void;
 }
 
+const SPIN_STYLE_ID = 'crm-spin-keyframes';
+const ensureSpinKeyframes = () => {
+  if (document.getElementById(SPIN_STYLE_ID)) return;
+  const style = document.createElement('style');
+  style.id = SPIN_STYLE_ID;
+  style.textContent = `@keyframes crm-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.crm-spin{animation:crm-spin 1s linear infinite}`;
+  document.head.appendChild(style);
+};
+
 const StepFlowModal: React.FC<StepFlowModalProps> = ({
   isOpen,
   onClose,
@@ -36,11 +53,13 @@ const StepFlowModal: React.FC<StepFlowModalProps> = ({
   disabled,
   onValidationChange,
 }) => {
+  useEffect(() => { ensureSpinKeyframes(); }, []);
   const [steps, setSteps] = useState<FlowStep[]>(initialSteps);
   const [validation, setValidation] = useState<ValidationResult | null>(null);
   const [saveLabel, setSaveLabel] = useState<'save' | 'saved' | 'saving'>('save');
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
   const savedStepsRef = useRef<string>(JSON.stringify(initialSteps));
+  const saveTimersRef = useRef<NodeJS.Timeout[]>([]);
 
   useEffect(() => {
     setSteps(initialSteps);
@@ -61,15 +80,26 @@ const StepFlowModal: React.FC<StepFlowModalProps> = ({
     [onValidationChange]
   );
 
+  useEffect(() => {
+    return () => {
+      saveTimersRef.current.forEach(clearTimeout);
+    };
+  }, []);
+
   const handleSave = useCallback(() => {
+    saveTimersRef.current.forEach(clearTimeout);
+    saveTimersRef.current = [];
+
     setSaveLabel('saving');
-    setTimeout(() => {
+    const t1 = setTimeout(() => {
       onSave(steps);
       savedStepsRef.current = JSON.stringify(steps);
       setHasUnsavedChanges(false);
       setSaveLabel('saved');
-      setTimeout(() => setSaveLabel('save'), 1500);
+      const t2 = setTimeout(() => setSaveLabel('save'), 1500);
+      saveTimersRef.current.push(t2);
     }, 150);
+    saveTimersRef.current.push(t1);
   }, [steps, onSave]);
 
   if (!isOpen) return null;
@@ -78,23 +108,9 @@ const StepFlowModal: React.FC<StepFlowModalProps> = ({
   const errorCount = validation?.errors.length || 0;
   const warningCount = validation?.warnings.length || 0;
 
-  const getStepLabel = (count: number) => {
-    if (count === 1) return 'шаг';
-    if (count >= 2 && count <= 4) return 'шага';
-    return 'шагов';
-  };
-
-  const getErrorLabel = (count: number) => {
-    if (count === 1) return 'ошибка';
-    if (count >= 2 && count <= 4) return 'ошибки';
-    return 'ошибок';
-  };
-
-  const getWarningLabel = (count: number) => {
-    if (count === 1) return 'предупреждение';
-    if (count >= 2 && count <= 4) return 'предупреждения';
-    return 'предупреждений';
-  };
+  const getStepLabel = (count: number) => pluralize(count, 'шаг', 'шага', 'шагов');
+  const getErrorLabel = (count: number) => pluralize(count, 'ошибка', 'ошибки', 'ошибок');
+  const getWarningLabel = (count: number) => pluralize(count, 'предупреждение', 'предупреждения', 'предупреждений');
 
   return (
     <Modal.Root open={isOpen} onOpenChange={(open) => !open && onClose()}>
@@ -275,7 +291,7 @@ const StepFlowModal: React.FC<StepFlowModalProps> = ({
                     height="14"
                     viewBox="0 0 24 24"
                     fill="none"
-                    style={{ animation: 'spin 1s linear infinite' }}
+                    className="crm-spin"
                   >
                     <circle
                       cx="12"
@@ -306,14 +322,6 @@ const StepFlowModal: React.FC<StepFlowModalProps> = ({
               position: 'relative',
             }}
           >
-            <style>
-              {`
-                @keyframes spin {
-                  from { transform: rotate(0deg); }
-                  to { transform: rotate(360deg); }
-                }
-              `}
-            </style>
             <ReactFlowProvider>
               <div style={{ position: 'absolute', inset: 0 }}>
                 <FlowCanvas
@@ -342,16 +350,9 @@ const StepFlowBuilderInner = forwardRef<HTMLDivElement, StepFlowBuilderProps>(
 
     const form = useForm('StepFlowBuilder', (state) => state);
     const { get } = useFetchClient();
-
-    let documentId: string | undefined;
-    let model: string | undefined;
-    try {
-      const ctx = useContentManagerContext();
-      documentId = ctx?.id;
-      model = ctx?.model;
-    } catch (err) {
-      // No ContentManagerContext (test page?)
-    }
+    const ctx = useContentManagerContextSafe();
+    const documentId = ctx?.id;
+    const model = ctx?.model;
 
     useEffect(() => {
       if (!documentId || !model || hasFetched) {
@@ -402,7 +403,9 @@ const StepFlowBuilderInner = forwardRef<HTMLDivElement, StepFlowBuilderProps>(
 
         if (connect.length > 0) {
           const seg = connect[0];
-          return { id: seg.id!, name: seg.name || `Segment #${seg.id}` };
+          if (seg.id != null) {
+            return { id: seg.id, name: seg.name || `Segment #${seg.id}` };
+          }
         }
 
         if (disconnect.length > 0 && initialSegment) {
@@ -438,7 +441,7 @@ const StepFlowBuilderInner = forwardRef<HTMLDivElement, StepFlowBuilderProps>(
     useEffect(() => {
       const parsed = parseValue(value);
       setSteps(parsed);
-    }, []);
+    }, [value]);
 
     const handleValidationChange = useCallback((newValidation: ValidationResult) => {
       setValidation(newValidation);
@@ -473,7 +476,7 @@ const StepFlowBuilderInner = forwardRef<HTMLDivElement, StepFlowBuilderProps>(
     const validationError = useMemo(() => {
       if (!validation || validation.isValid) return null;
       const errorCount = validation.errors.length;
-      const errorWord = errorCount === 1 ? 'ошибка' : errorCount < 5 ? 'ошибки' : 'ошибок';
+      const errorWord = pluralize(errorCount, 'ошибка', 'ошибки', 'ошибок');
       return `Поток содержит ${errorCount} ${errorWord} валидации. Исправьте все ошибки перед публикацией.`;
     }, [validation]);
 
@@ -487,11 +490,7 @@ const StepFlowBuilderInner = forwardRef<HTMLDivElement, StepFlowBuilderProps>(
             {validation && !validation.isValid && (
               <Badge backgroundColor="danger100" textColor="danger600">
                 {validation.errors.length}{' '}
-                {validation.errors.length === 1
-                  ? 'ошибка'
-                  : validation.errors.length < 5
-                    ? 'ошибки'
-                    : 'ошибок'}
+                {pluralize(validation.errors.length, 'ошибка', 'ошибки', 'ошибок')}
               </Badge>
             )}
             {validation && validation.isValid && validation.warnings.length > 0 && (
@@ -502,7 +501,7 @@ const StepFlowBuilderInner = forwardRef<HTMLDivElement, StepFlowBuilderProps>(
             )}
           </Flex>
           <Badge backgroundColor="neutral100" textColor="neutral600">
-            {stepCount} {stepCount === 1 ? 'шаг' : stepCount < 5 ? 'шага' : 'шагов'}
+            {stepCount} {pluralize(stepCount, 'шаг', 'шага', 'шагов')}
           </Badge>
         </Flex>
 
@@ -552,12 +551,6 @@ const StepFlowBuilderInner = forwardRef<HTMLDivElement, StepFlowBuilderProps>(
   }
 );
 
-StepFlowBuilderInner.displayName = 'StepFlowBuilderInner';
-
-const StepFlowBuilder = forwardRef<HTMLDivElement, StepFlowBuilderProps>((props, ref) => {
-  return <StepFlowBuilderInner {...props} ref={ref} />;
-});
-
-StepFlowBuilder.displayName = 'StepFlowBuilder';
+StepFlowBuilderInner.displayName = 'StepFlowBuilder';
 
-export default StepFlowBuilder;
+export default StepFlowBuilderInner;

package/admin/src/components/StepFlowBuilder/nodes/BranchNode.tsx

@@ -1,44 +1,16 @@
 import React, { memo, useState } from 'react';
-import { Handle, Position, useReactFlow, type NodeProps } from 'reactflow';
+import { Handle, Position, type NodeProps } from 'reactflow';
 import type { FlowNodeData } from '../types';
 import { NODE_COLORS, NODE_DIMENSIONS, HANDLE_SIZE } from '../constants';
 import { useNodeValidation } from '../context/ValidationContext';
+import { getBorderStyle, getBoxShadow, ValidationBadge, DeleteButton } from './shared';
 
 const BranchNode: React.FC<NodeProps<FlowNodeData>> = ({ id, data, selected }) => {
   const [isHovered, setIsHovered] = useState(false);
-  const { deleteElements } = useReactFlow();
   const colors = NODE_COLORS.branch;
   const segmentName = data.config.branchSegment?.name || 'No segment';
   const { hasError, hasWarning } = useNodeValidation(id);
 
-  const handleDelete = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    deleteElements({ nodes: [{ id }] });
-  };
-
-  const getBorderStyle = () => {
-    if (hasError) return '2px solid #ef4444';
-    if (hasWarning) return '2px solid #f59e0b';
-    if (selected) return `2px solid ${colors.border}`;
-    return '2px solid transparent';
-  };
-
-  const getBoxShadow = () => {
-    if (hasError) {
-      return selected
-        ? '0 0 0 3px rgba(239, 68, 68, 0.25), 0 10px 25px -5px rgba(0, 0, 0, 0.1)'
-        : '0 0 0 2px rgba(239, 68, 68, 0.15), 0 4px 12px -2px rgba(0, 0, 0, 0.08)';
-    }
-    if (hasWarning) {
-      return selected
-        ? '0 0 0 3px rgba(245, 158, 11, 0.25), 0 10px 25px -5px rgba(0, 0, 0, 0.1)'
-        : '0 0 0 2px rgba(245, 158, 11, 0.15), 0 4px 12px -2px rgba(0, 0, 0, 0.08)';
-    }
-    return selected
-      ? `0 0 0 3px ${colors.glow}, 0 10px 25px -5px rgba(0, 0, 0, 0.1)`
-      : '0 4px 12px -2px rgba(0, 0, 0, 0.08)';
-  };
-
   return (
     <div
       style={{
@@ -47,8 +19,8 @@ const BranchNode: React.FC<NodeProps<FlowNodeData>> = ({ id, data, selected }) =
         boxSizing: 'border-box',
         background: colors.background,
         borderRadius: 12,
-        border: getBorderStyle(),
-        boxShadow: getBoxShadow(),
+        border: getBorderStyle(hasError, hasWarning, !!selected, colors),
+        boxShadow: getBoxShadow(hasError, hasWarning, !!selected, colors),
         display: 'flex',
         alignItems: 'center',
         padding: '0 16px',
@@ -72,56 +44,8 @@ const BranchNode: React.FC<NodeProps<FlowNodeData>> = ({ id, data, selected }) =
           boxShadow: '0 0 0 3px white, 0 2px 4px rgba(0,0,0,0.1)',
         }}
       />
-      {(hasError || hasWarning) && !isHovered && (
-        <div
-          style={{
-            position: 'absolute',
-            top: -6,
-            right: -6,
-            width: 18,
-            height: 18,
-            borderRadius: '50%',
-            background: hasError ? '#ef4444' : '#f59e0b',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
-          }}
-        >
-          <svg width="10" height="10" viewBox="0 0 24 24" fill="none">
-            <path d="M12 8v4M12 16h.01" stroke="white" strokeWidth="3" strokeLinecap="round" />
-          </svg>
-        </div>
-      )}
-      {isHovered && (
-        <button
-          type="button"
-          onClick={handleDelete}
-          style={{
-            position: 'absolute',
-            top: -8,
-            right: -8,
-            width: 22,
-            height: 22,
-            borderRadius: '50%',
-            background: '#ef4444',
-            border: '2px solid white',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            cursor: 'pointer',
-            boxShadow: '0 2px 6px rgba(0,0,0,0.3)',
-            transition: 'transform 0.15s ease',
-            zIndex: 10,
-          }}
-          onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.1)'; }}
-          onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
-        >
-          <svg width="10" height="10" viewBox="0 0 24 24" fill="none">
-            <path d="M18 6L6 18M6 6l12 12" stroke="white" strokeWidth="3" strokeLinecap="round" />
-          </svg>
-        </button>
-      )}
+      {!isHovered && <ValidationBadge hasError={hasError} hasWarning={hasWarning} />}
+      {isHovered && <DeleteButton nodeId={id} />}
       <div
         style={{
           width: 36,

package/admin/src/components/StepFlowBuilder/nodes/EntryNode.tsx

@@ -3,34 +3,12 @@ import { Handle, Position, type NodeProps } from 'reactflow';
 import type { FlowNodeData } from '../types';
 import { NODE_COLORS, NODE_DIMENSIONS, HANDLE_SIZE, ENTRY_NODE_ID } from '../constants';
 import { useNodeValidation } from '../context/ValidationContext';
+import { getBorderStyle, getBoxShadow, ValidationBadge } from './shared';
 
 const EntryNode: React.FC<NodeProps<FlowNodeData>> = ({ selected }) => {
   const colors = NODE_COLORS.entry;
   const { hasError, hasWarning } = useNodeValidation(ENTRY_NODE_ID);
 
-  const getBorderStyle = () => {
-    if (hasError) return '2px solid #ef4444';
-    if (hasWarning) return '2px solid #f59e0b';
-    if (selected) return `2px solid ${colors.border}`;
-    return '2px solid transparent';
-  };
-
-  const getBoxShadow = () => {
-    if (hasError) {
-      return selected
-        ? '0 0 0 3px rgba(239, 68, 68, 0.25), 0 10px 25px -5px rgba(0, 0, 0, 0.1)'
-        : '0 0 0 2px rgba(239, 68, 68, 0.15), 0 4px 12px -2px rgba(0, 0, 0, 0.08)';
-    }
-    if (hasWarning) {
-      return selected
-        ? '0 0 0 3px rgba(245, 158, 11, 0.25), 0 10px 25px -5px rgba(0, 0, 0, 0.1)'
-        : '0 0 0 2px rgba(245, 158, 11, 0.15), 0 4px 12px -2px rgba(0, 0, 0, 0.08)';
-    }
-    return selected
-      ? `0 0 0 3px ${colors.glow}, 0 10px 25px -5px rgba(0, 0, 0, 0.1)`
-      : '0 4px 12px -2px rgba(0, 0, 0, 0.08)';
-  };
-
   return (
     <div
       style={{
@@ -39,8 +17,8 @@ const EntryNode: React.FC<NodeProps<FlowNodeData>> = ({ selected }) => {
         boxSizing: 'border-box',
         background: colors.background,
         borderRadius: 12,
-        border: getBorderStyle(),
-        boxShadow: getBoxShadow(),
+        border: getBorderStyle(hasError, hasWarning, !!selected, colors),
+        boxShadow: getBoxShadow(hasError, hasWarning, !!selected, colors),
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -50,27 +28,7 @@ const EntryNode: React.FC<NodeProps<FlowNodeData>> = ({ selected }) => {
         position: 'relative',
       }}
     >
-      {(hasError || hasWarning) && (
-        <div
-          style={{
-            position: 'absolute',
-            top: -6,
-            right: -6,
-            width: 18,
-            height: 18,
-            borderRadius: '50%',
-            background: hasError ? '#ef4444' : '#f59e0b',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
-          }}
-        >
-          <svg width="10" height="10" viewBox="0 0 24 24" fill="none">
-            <path d="M12 8v4M12 16h.01" stroke="white" strokeWidth="3" strokeLinecap="round" />
-          </svg>
-        </div>
-      )}
+      <ValidationBadge hasError={hasError} hasWarning={hasWarning} />
       <div
         style={{
           width: 36,