feat: ant path rendering on cahnges

frontend/src/lib/abstractNode.ts

@@ -72,6 +72,7 @@ export function useAbstractNode<TData = Record<string, unknown>>(
   const setNodes = ctx?.setNodes
   const setEdges = ctx?.setEdges
 
+  const addConnectionPathTrigger = ctx?.addConnectionPathTrigger
   const updateData = useCallback(
     (partial: Partial<TData>) => {
       if (!setNodes) return
@@ -80,8 +81,9 @@ export function useAbstractNode<TData = Record<string, unknown>>(
           n.id === id ? { ...n, data: { ...(n.data as object), ...partial } } : n
         ) as AppNode[]
       )
+      addConnectionPathTrigger?.(id)
     },
-    [id, setNodes]
+    [id, setNodes, addConnectionPathTrigger]
   )
 
   const incomingEdges = useMemo(

frontend/src/lib/flowContext.tsx

@@ -1,9 +1,12 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import type { Connection } from '@xyflow/react'
 import type { AppNode, AppEdge } from '@/lib/nodeTypes'
 
 export type ConnectionFrom = { nodeId: string; sourceHandle?: string } | null
 
+/** Role of a node in the current connection path update: pushing data, receiving/loading, or just on path. */
+export type ConnectionPathRole = 'trigger' | 'updating' | 'on-path'
+
 export type FlowActions = {
     pasteAtViewportCenter: () => void
     fitView: () => void
@@ -25,8 +28,38 @@ export type FlowContextValue = {
     /** When set, graph centers on this node and a fullscreen dialog shows the node. Cleared on close. */
     fullscreenNodeId: string | null
     setFullscreenNodeId: (id: string | null) => void
+    /** Node ids currently updating (e.g. render loading, agent running). Only edges on those paths show the ant trail. */
+    connectionPathUpdatingNodeIds: string[]
+    /** Node ids that triggered the current update (e.g. variable/config that changed). Path is restricted to downstream(trigger) ∩ upstream(updating). */
+    connectionPathTriggerNodeIds: string[]
+    /** Call when this node's output changed and may trigger downstream updates (e.g. variable value, config content). */
+    addConnectionPathTrigger: (nodeId: string) => void
+    /** All node ids on the path of an update. Edges with both endpoints in this set animate. */
+    connectionPathNodeIds: Set<string>
+    /** Call when a path update starts for this node. Animation runs at least CONNECTION_PATH_UPDATE_MIN_MS. */
+    startConnectionPathUpdate: (nodeId: string) => void
+    /** Call when a path update ends for this node. If min duration not reached, animation continues until then. */
+    endConnectionPathUpdate: (nodeId: string) => void
 }
 
 const FlowContext = React.createContext<FlowContextValue | null>(null)
 
 export default FlowContext
+
+/**
+ * Returns this node's role in the current path update for styling (pushing vs receiving).
+ * Use with BaseNode's connectionPathRole prop or data-path-role for CSS.
+ */
+export function useConnectionPathRole(nodeId: string | undefined): ConnectionPathRole | null {
+  const ctx = React.useContext(FlowContext)
+  return useMemo(() => {
+    if (!nodeId) return null
+    const triggers = ctx?.connectionPathTriggerNodeIds
+    const updating = ctx?.connectionPathUpdatingNodeIds
+    const path = ctx?.connectionPathNodeIds
+    if (!path?.has(nodeId)) return null
+    if (triggers?.includes(nodeId)) return 'trigger'
+    if (updating?.includes(nodeId)) return 'updating'
+    return 'on-path'
+  }, [nodeId, ctx?.connectionPathTriggerNodeIds, ctx?.connectionPathUpdatingNodeIds, ctx?.connectionPathNodeIds])
+}

frontend/src/lib/graphPath.ts

@@ -0,0 +1,67 @@
+/**
+ * Graph path utilities: compute which nodes/edges are "on the path" of an update.
+ * Used to show connection ant trail only along the full chain (upstream → updating → downstream).
+ * Works with any node types; any node can signal it is updating via startConnectionPathUpdate(id).
+ */
+
+export type GraphEdge = { source: string; target: string }
+
+/** Nodes reachable from seedIds by following edges forward (source → target). */
+export function getDownstreamNodeIds(edges: GraphEdge[], seedIds: string[]): Set<string> {
+  const out = new Set<string>(seedIds)
+  let added = true
+  while (added) {
+    added = false
+    for (const e of edges) {
+      if (out.has(e.source) && !out.has(e.target)) {
+        out.add(e.target)
+        added = true
+      }
+    }
+  }
+  return out
+}
+
+/** Nodes that can reach any seed by following edges backward (target → source). */
+export function getUpstreamNodeIds(edges: GraphEdge[], seedIds: string[]): Set<string> {
+  const out = new Set<string>(seedIds)
+  let added = true
+  while (added) {
+    added = false
+    for (const e of edges) {
+      if (out.has(e.target) && !out.has(e.source)) {
+        out.add(e.source)
+        added = true
+      }
+    }
+  }
+  return out
+}
+
+/**
+ * All node ids that lie on the path of an update.
+ * - If triggerNodeIds is non-empty: path = nodes that are both downstream of a trigger and
+ *   upstream of an updating node (only the chain that actually triggered the update).
+ * - Otherwise: path = upstream ∪ updating ∪ downstream of updating (legacy full upstream/downstream).
+ * An edge should show the update animation iff both its source and target are in this set.
+ */
+export function getPathNodeIds(
+  edges: GraphEdge[],
+  updatingNodeIds: string[],
+  triggerNodeIds?: string[]
+): Set<string> {
+  if (updatingNodeIds.length === 0) return new Set()
+  const upstream = getUpstreamNodeIds(edges, updatingNodeIds)
+  if (triggerNodeIds != null && triggerNodeIds.length > 0) {
+    const downstreamOfTrigger = getDownstreamNodeIds(edges, triggerNodeIds)
+    const path = new Set<string>()
+    upstream.forEach((id) => {
+      if (downstreamOfTrigger.has(id)) path.add(id)
+    })
+    return path
+  }
+  const downstream = getDownstreamNodeIds(edges, updatingNodeIds)
+  const path = new Set<string>(upstream)
+  downstream.forEach((id) => path.add(id))
+  return path
+}