refactor handles

src/components/graph/ConfigNode.tsx

@@ -1,5 +1,4 @@
 import React, { memo, useCallback, useContext, useEffect, useRef, useState } from 'react'
-import { Handle, Position } from 'reactflow'
 import Editor, { loader } from '@monaco-editor/react'
 import FlowContext from '../../lib/flowContext'
 import {
@@ -22,6 +21,7 @@ import {
     MenubarSubTrigger,
     MenubarTrigger,
 } from '../ui/menubar'
+import { InputHandle, OutputHandle } from './NodeHandles'
 
 // Ensure Monaco can load its web workers under Vite by pointing to a CDN
 loader.config({ paths: { vs: 'https://unpkg.com/monaco-editor@latest/min/vs' } })
@@ -201,12 +201,11 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
             </BaseNodeContent>
 
             <BaseNodeFooter>
-                <div className="w-full text-xs text-gray-500">Stored YAML: {storedYaml ? `${storedYaml.length} chars` : 'none'}</div>
+                <div className="w-full text-xs text-gray-500">{storedYaml ? `${storedYaml.length} chars` : 'none'}</div>
             </BaseNodeFooter>
 
-            <Handle type="target" position={Position.Left} id="ain" style={{ background: '#F97316', top: 20, width: 12, height: 12, borderRadius: 3 }} />
-
-            <Handle type="source" position={Position.Right} id="out" style={{ background: '#10B981', top: 20, width: 12, height: 12, borderRadius: 3 }} />
+            <InputHandle id="ain" />
+            <OutputHandle id="out" />
         </BaseNode>
     )
 })