feat: connections improvements

frontend/src/app/canvas/CanvasPage.tsx

@@ -66,7 +66,7 @@ import {
   getNodeType,
   isConnectionAllowed,
 } from '@/lib/nodeRegistry'
-import { getPathNodeIds } from '@/lib/graphPath'
+import { getPathNodeIds, getPausedSegmentNodeIds } from '@/lib/graphPath'
 import type { AppNode, AppEdge } from '@/lib/nodeTypes'
 import { toast } from 'sonner'
 import {
@@ -273,9 +273,16 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
   const pathUpdateStartTimeRef = useRef<number | null>(null)
   const pathUpdateEndTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
+  const [connectionPathPausedNodeIds, setConnectionPathPausedNodeIds] = React.useState<string[]>([])
+  const connectionPathPausedNodeIdsRef = useRef<string[]>([])
+  connectionPathPausedNodeIdsRef.current = connectionPathPausedNodeIds
+
   const clearPathUpdateSession = useCallback(() => {
     setConnectionPathUpdatingNodeIds([])
-    setConnectionPathTriggerNodeIds([])
+    if (connectionPathPausedNodeIdsRef.current.length === 0) {
+      setConnectionPathTriggerNodeIds([])
+      setConnectionPathPausedNodeIds([])
+    }
   }, [])
 
   const startConnectionPathUpdate = useCallback((nodeId: string) => {
@@ -544,10 +551,41 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
   }, [])
 
   const connectionPathNodeIds = useMemo(
-    () => getPathNodeIds(edges, connectionPathUpdatingNodeIds, connectionPathTriggerNodeIds),
-    [edges, connectionPathUpdatingNodeIds, connectionPathTriggerNodeIds]
+    () =>
+      getPathNodeIds(
+        edges,
+        connectionPathUpdatingNodeIds,
+        connectionPathTriggerNodeIds,
+        connectionPathPausedNodeIds
+      ),
+    [edges, connectionPathUpdatingNodeIds, connectionPathTriggerNodeIds, connectionPathPausedNodeIds]
   )
 
+  const connectionPathPausedSegmentNodeIds = useMemo(
+    () =>
+      getPausedSegmentNodeIds(
+        edges,
+        connectionPathNodeIds,
+        connectionPathTriggerNodeIds,
+        connectionPathPausedNodeIds
+      ),
+    [edges, connectionPathNodeIds, connectionPathTriggerNodeIds, connectionPathPausedNodeIds]
+  )
+
+  const connectionPathActiveSegmentNodeIds = useMemo(() => {
+    const active = new Set(connectionPathNodeIds)
+    connectionPathPausedSegmentNodeIds.forEach((id) => active.delete(id))
+    return active
+  }, [connectionPathNodeIds, connectionPathPausedSegmentNodeIds])
+
+  const addConnectionPathPausedNode = useCallback((nodeId: string) => {
+    setConnectionPathPausedNodeIds((prev) => (prev.includes(nodeId) ? prev : [...prev, nodeId]))
+  }, [])
+
+  const removeConnectionPathPausedNode = useCallback((nodeId: string) => {
+    setConnectionPathPausedNodeIds((prev) => prev.filter((id) => id !== nodeId))
+  }, [])
+
   const flowContextValue = useMemo(
     () => ({
       nodes,
@@ -566,6 +604,11 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
       connectionPathTriggerNodeIds,
       addConnectionPathTrigger,
       connectionPathNodeIds,
+      connectionPathPausedSegmentNodeIds,
+      connectionPathActiveSegmentNodeIds,
+      connectionPathPausedNodeIds,
+      addConnectionPathPausedNode,
+      removeConnectionPathPausedNode,
       startConnectionPathUpdate,
       endConnectionPathUpdate,
     }),
@@ -586,6 +629,11 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
       connectionPathTriggerNodeIds,
       addConnectionPathTrigger,
       connectionPathNodeIds,
+      connectionPathPausedSegmentNodeIds,
+      connectionPathActiveSegmentNodeIds,
+      connectionPathPausedNodeIds,
+      addConnectionPathPausedNode,
+      removeConnectionPathPausedNode,
       startConnectionPathUpdate,
       endConnectionPathUpdate,
     ]