input highlights

src/components/graph/ConfigNode.tsx

@@ -161,7 +161,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data, width, height }:
             : undefined
 
     return (
-        <BaseNode className="min-w-80 min-h-[280px]" dimensions={dimensions} resizable nodeId={id} handles={<><InputHandle id="ain" /><OutputHandle id="out" /></>}>
+        <BaseNode className="min-w-80 min-h-[280px]" dimensions={dimensions} resizable nodeId={id} handles={<><InputHandle id="ain" nodeId={id} /><OutputHandle id="out" /></>}>
             <BaseNodeHeaderRow icon={<ScrollText className="size-4" />} title={<NodeHeaderTitle nodeId={id} displayTitle={`${id}`} />} />
 
             <BaseNodeContent>

src/components/graph/FunctionNode.tsx

@@ -48,7 +48,7 @@ export const FunctionNode = memo(function FunctionNode({ id, data, width, height
             : undefined
 
     return (
-        <BaseNode className="min-w-72 min-h-[260px]" dimensions={dimensions} resizable nodeId={id} handles={<><InputHandle id="in" /><OutputHandle id="out" /></>}>
+        <BaseNode className="min-w-72 min-h-[260px]" dimensions={dimensions} resizable nodeId={id} handles={<><InputHandle id="in" nodeId={id} /><OutputHandle id="out" /></>}>
             <BaseNodeHeaderRow icon={<Code2 className="size-4" />} title={<NodeHeaderTitle nodeId={id} displayTitle={id} />} />
 
             <BaseNodeContent>

src/components/graph/NodeHandles.tsx

@@ -1,17 +1,35 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { Handle, Position } from '@xyflow/react'
 import { ArrowDownLeft, ArrowUpRight } from 'lucide-react'
+import FlowContext from '@/lib/flowContext'
+import { cn } from '@/lib/utils'
 
 type NodeHandleProps = {
     id: string
+    /** Pass when this handle is a connection target so valid highlight can show as soon as connection starts */
+    nodeId?: string
 }
 
-export function InputHandle({ id }: NodeHandleProps) {
+export function InputHandle({ id, nodeId }: NodeHandleProps) {
+    const ctx = useContext(FlowContext)
+    const connectionFrom = ctx?.connectionFrom ?? null
+    const isValidConnection = ctx?.isValidConnection
+    const isConnecting = Boolean(nodeId && connectionFrom && connectionFrom.nodeId !== nodeId)
+    const isValidTarget =
+        isConnecting &&
+        isValidConnection?.({
+            source: connectionFrom!.nodeId,
+            sourceHandle: connectionFrom!.sourceHandle ?? undefined,
+            target: nodeId!,
+            targetHandle: id,
+        })
+
     return (
         <Handle
             type="target"
             position={Position.Left}
             id={id}
+            className={cn(isValidTarget && 'connection-valid-target', isConnecting && !isValidTarget && 'connection-invalid-target')}
             style={{
                 top: 20,
                 width: 20,

src/components/graph/RenderingNode.tsx

@@ -16,7 +16,7 @@ import { NodeMenubar } from './NodeMenubar'
 import { NodeStatusIndicator } from './NodeStatusIndicator'
 import { MenubarItem, MenubarSub, MenubarSubContent, MenubarSubTrigger } from '../ui/menubar'
 import { Sparkles } from 'lucide-react'
-import { InputHandle, OutputHandle } from './NodeHandles'
+import { InputHandle } from './NodeHandles'
 
 // Use relative URL so Vite dev proxy (and optional prod proxy) avoids CORS
 const KROKI_PLANTUML_SVG = '/api/kroki/plantuml/svg'
@@ -414,7 +414,7 @@ export const RenderingNode = memo(function RenderingNode({ id, width, height }:
 
     return (
         <NodeStatusIndicator status={status} variant="border" width={dimensions?.width} height={dimensions?.height}>
-        <BaseNode className="min-w-96 min-h-[320px]" dimensions={dimensions} resizable nodeId={id} handles={<><InputHandle id="ain" /><OutputHandle id="out" /></>}>
+        <BaseNode className="min-w-96 min-h-[320px]" dimensions={dimensions} resizable nodeId={id} handles={<InputHandle id="ain" nodeId={id} />}>
             <BaseNodeHeaderRow icon={<Sparkles className="size-4" />} title={<NodeHeaderTitle nodeId={id} displayTitle={id} />} />
 
             <BaseNodeContent>