feat: error connections

frontend/src/components/base/AnimatedEdge.tsx

@@ -5,6 +5,7 @@ import {
   type EdgeProps,
 } from '@xyflow/react'
 import FlowContext from '../../lib/flowContext'
+import { getConnectionStatus, CONNECTION_STATUS_CLASS } from '../../lib/connectionStatus'
 import { getConnectionLabelForTarget } from '../../lib/nodeRegistry'
 
 const EDGE_STROKE_WIDTH = 2
@@ -30,6 +31,10 @@ export function AnimatedEdge({
   const pathNodeIds = ctx?.connectionPathNodeIds ?? EMPTY_PATH_NODE_IDS
   const pausedSegmentNodeIds = ctx?.connectionPathPausedSegmentNodeIds ?? EMPTY_PATH_NODE_IDS
   const activeSegmentNodeIds = ctx?.connectionPathActiveSegmentNodeIds ?? EMPTY_PATH_NODE_IDS
+  const errorTargetNodeIds = useMemo(
+    () => new Set(ctx?.connectionPathErrorNodeIds ?? []),
+    [ctx?.connectionPathErrorNodeIds]
+  )
   const targetNode = useMemo(() => nodes.find((n: any) => n.id === target), [nodes, target])
   const derivedLabel = useMemo(
     () => (targetNode?.type != null ? getConnectionLabelForTarget(targetNode.type) : undefined),
@@ -37,10 +42,26 @@ export function AnimatedEdge({
   )
   const label = labelProp ?? derivedLabel
 
-  const isOnPausedSegment =
-    pathNodeIds.has(source) && pathNodeIds.has(target) && pausedSegmentNodeIds.has(source) && pausedSegmentNodeIds.has(target)
-  const isOnUpdatingPath =
-    pathNodeIds.has(source) && pathNodeIds.has(target) && activeSegmentNodeIds.has(source) && activeSegmentNodeIds.has(target)
+  const connectionStatus = useMemo(
+    () =>
+      getConnectionStatus({
+        source,
+        target,
+        pathNodeIds,
+        pausedSegmentNodeIds,
+        activeSegmentNodeIds,
+        errorTargetNodeIds,
+      }),
+    [
+      source,
+      target,
+      pathNodeIds,
+      pausedSegmentNodeIds,
+      activeSegmentNodeIds,
+      errorTargetNodeIds,
+    ]
+  )
+  const statusClass = CONNECTION_STATUS_CLASS[connectionStatus]
 
   const [edgePath, edgeLabelX, edgeLabelY] = getBezierPath({
     sourceX,
@@ -98,7 +119,7 @@ export function AnimatedEdge({
           strokeWidth: EDGE_STROKE_WIDTH,
           ...style,
         }}
-        className={`animated-edge-path${isOnPausedSegment ? ' animated-edge-path--paused' : isOnUpdatingPath ? ' animated-edge-path--updating' : ''}`}
+        className={`animated-edge-path${statusClass ? ` ${statusClass}` : ''}`}
         interactionWidth={interactionWidth}
       />
       {label != null && (

frontend/src/components/nodes/RenderingNode.tsx

@@ -52,6 +52,8 @@ function RenderingNodeComponent({ id, data, width, height, selected }: Props) {
     const setFullscreenNodeId = flowContext?.setFullscreenNodeId
     const startConnectionPathUpdate = flowContext?.startConnectionPathUpdate
     const endConnectionPathUpdate = flowContext?.endConnectionPathUpdate
+    const addConnectionPathError = flowContext?.addConnectionPathError
+    const removeConnectionPathError = flowContext?.removeConnectionPathError
     const supportsFullscreen = getNodeType('render')?.supportsFullscreen
     const [renderedContent, setRenderedContent] = useState<string | null>(null)
     const [resolvedContent, setResolvedContent] = useState<string | null>(null)
@@ -78,6 +80,15 @@ function RenderingNodeComponent({ id, data, width, height, selected }: Props) {
     const sourceContent = srcNode?.type === 'config' ? getConfigContent((srcNode.data ?? undefined) as Record<string, unknown> | undefined) : isAgentSource ? agentOutputMarkdown : ''
     const srcData = srcNode?.data ?? {}
 
+    useEffect(() => {
+        if (!addConnectionPathError || !removeConnectionPathError) return
+        if (error != null) {
+            addConnectionPathError(id)
+            return () => removeConnectionPathError(id)
+        }
+        removeConnectionPathError(id)
+    }, [id, error, addConnectionPathError, removeConnectionPathError])
+
     /** Set of node IDs that can affect this render node (configs in the chain + variables/functions feeding them) */
     const connectedNodeIds = useMemo(() => {
         const out = new Set<string>()