refactor(web): destructure mutation result to narrow useCallback dependencies

web/app/components/workflow/skill/hooks/file-tree/operations/use-create-operations.ts

@@ -32,9 +32,9 @@ export function useCreateOperations({
   const fileInputRef = useRef<HTMLInputElement>(null)
   const folderInputRef = useRef<HTMLInputElement>(null)
 
-  const createFolder = useCreateAppAssetFolder()
-  const uploadFile = useUploadFileWithPresignedUrl()
-  const batchUpload = useBatchUpload()
+  const { isPending: isCreateFolderPending } = useCreateAppAssetFolder()
+  const { mutateAsync: uploadFileAsync, isPending: isUploadFilePending } = useUploadFileWithPresignedUrl()
+  const { mutateAsync: batchUploadAsync, isPending: isBatchUploadPending } = useBatchUpload()
   const emitTreeUpdate = useSkillTreeUpdateEmitter()
 
   const handleNewFile = useCallback(() => {
@@ -65,7 +65,7 @@ export function useCreateOperations({
       await Promise.all(
         uploadFiles.map(async (file) => {
           try {
-            await uploadFile.mutateAsync({ appId, file, parentId })
+            await uploadFileAsync({ appId, file, parentId })
             progress.uploaded++
           }
           catch {
@@ -87,7 +87,7 @@ export function useCreateOperations({
       e.target.value = ''
       onClose()
     }
-  }, [appId, uploadFile, onClose, parentId, storeApi, emitTreeUpdate])
+  }, [appId, uploadFileAsync, onClose, parentId, storeApi, emitTreeUpdate])
 
   const handleFolderChange = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = Array.from(e.target.files || [])
@@ -144,7 +144,7 @@ export function useCreateOperations({
         }
       }
 
-      await batchUpload.mutateAsync({
+      await batchUploadAsync({
         appId,
         tree,
         files: fileMap,
@@ -165,12 +165,12 @@ export function useCreateOperations({
       e.target.value = ''
       onClose()
     }
-  }, [appId, batchUpload, onClose, parentId, storeApi, emitTreeUpdate])
+  }, [appId, batchUploadAsync, onClose, parentId, storeApi, emitTreeUpdate])
 
   return {
     fileInputRef,
     folderInputRef,
-    isCreating: uploadFile.isPending || createFolder.isPending || batchUpload.isPending,
+    isCreating: isUploadFilePending || isCreateFolderPending || isBatchUploadPending,
     handleNewFile,
     handleNewFolder,
     handleFileChange,

web/app/components/workflow/skill/hooks/file-tree/operations/use-modify-operations.ts

@@ -35,7 +35,7 @@ export function useModifyOperations({
 }: UseModifyOperationsOptions) {
   const { t } = useTranslation('workflow')
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
-  const deleteNode = useDeleteAppAssetNode()
+  const { mutateAsync: deleteNodeAsync, isPending: isDeleting } = useDeleteAppAssetNode()
   const emitTreeUpdate = useSkillTreeUpdateEmitter()
 
   const handleRename = useCallback(() => {
@@ -60,7 +60,7 @@ export function useModifyOperations({
         ? getAllDescendantFileIds(nodeId, treeData.children)
         : []
 
-      await deleteNode.mutateAsync({ appId, nodeId })
+      await deleteNodeAsync({ appId, nodeId })
       emitTreeUpdate()
 
       descendantFileIds.forEach((fileId) => {
@@ -93,7 +93,7 @@ export function useModifyOperations({
       setShowDeleteConfirm(false)
       onClose()
     }
-  }, [appId, nodeId, node?.data?.node_type, deleteNode, storeApi, treeData?.children, onClose, t, emitTreeUpdate])
+  }, [appId, nodeId, node?.data?.node_type, deleteNodeAsync, storeApi, treeData?.children, onClose, t, emitTreeUpdate])
 
   const handleDeleteCancel = useCallback(() => {
     setShowDeleteConfirm(false)
@@ -101,7 +101,7 @@ export function useModifyOperations({
 
   return {
     showDeleteConfirm,
-    isDeleting: deleteNode.isPending,
+    isDeleting,
     handleRename,
     handleDeleteClick,
     handleDeleteConfirm,

web/app/components/workflow/skill/hooks/file-tree/operations/use-node-move.ts

@@ -15,13 +15,13 @@ export function useNodeMove() {
   const { t } = useTranslation('workflow')
   const appDetail = useAppStore(s => s.appDetail)
   const appId = appDetail?.id || ''
-  const moveNode = useMoveAppAssetNode()
+  const { mutateAsync: moveNodeAsync, isPending: isMoving } = useMoveAppAssetNode()
   const emitTreeUpdate = useSkillTreeUpdateEmitter()
 
   // Execute move API call - validation is handled by react-arborist's disableDrop callback
   const executeMoveNode = useCallback(async (nodeId: string, targetFolderId: string | null) => {
     try {
-      await moveNode.mutateAsync({
+      await moveNodeAsync({
         appId,
         nodeId,
         payload: { parent_id: toApiParentId(targetFolderId) },
@@ -39,10 +39,10 @@ export function useNodeMove() {
         message: t('skillSidebar.menu.moveError'),
       })
     }
-  }, [appId, moveNode, t, emitTreeUpdate])
+  }, [appId, moveNodeAsync, t, emitTreeUpdate])
 
   return {
     executeMoveNode,
-    isMoving: moveNode.isPending,
+    isMoving,
   }
 }

web/app/components/workflow/skill/hooks/file-tree/operations/use-node-reorder.ts

@@ -13,12 +13,12 @@ export function useNodeReorder() {
   const { t } = useTranslation('workflow')
   const appDetail = useAppStore(s => s.appDetail)
   const appId = appDetail?.id || ''
-  const reorderNode = useReorderAppAssetNode()
+  const { mutateAsync: reorderNodeAsync, isPending: isReordering } = useReorderAppAssetNode()
   const emitTreeUpdate = useSkillTreeUpdateEmitter()
 
   const executeReorderNode = useCallback(async (nodeId: string, afterNodeId: string | null) => {
     try {
-      await reorderNode.mutateAsync({
+      await reorderNodeAsync({
         appId,
         nodeId,
         payload: { after_node_id: afterNodeId },
@@ -36,10 +36,10 @@ export function useNodeReorder() {
         message: t('skillSidebar.menu.moveError'),
       })
     }
-  }, [appId, reorderNode, t, emitTreeUpdate])
+  }, [appId, reorderNodeAsync, t, emitTreeUpdate])
 
   return {
     executeReorderNode,
-    isReordering: reorderNode.isPending,
+    isReordering,
   }
 }

web/app/components/workflow/skill/hooks/file-tree/operations/use-paste-operation.ts

@@ -33,7 +33,7 @@ export function usePasteOperation({
   const storeApi = useWorkflowStore()
   const appDetail = useAppStore(s => s.appDetail)
   const appId = appDetail?.id || ''
-  const moveNode = useMoveAppAssetNode()
+  const { mutateAsync: moveNodeAsync, isPending: isPasting } = useMoveAppAssetNode()
   const emitTreeUpdate = useSkillTreeUpdateEmitter()
   const isPastingRef = useRef(false)
 
@@ -77,7 +77,7 @@ export function usePasteOperation({
       try {
         await Promise.all(
           nodeIdsArray.map(nodeId =>
-            moveNode.mutateAsync({
+            moveNodeAsync({
               appId,
               nodeId,
               payload: { parent_id: targetParentId },
@@ -103,7 +103,7 @@ export function usePasteOperation({
         isPastingRef.current = false
       }
     }
-  }, [appId, moveNode, storeApi, t, treeData?.children, treeRef, emitTreeUpdate])
+  }, [appId, moveNodeAsync, storeApi, t, treeData?.children, treeRef, emitTreeUpdate])
 
   useEffect(() => {
     if (!enabled)
@@ -120,7 +120,7 @@ export function usePasteOperation({
   }, [enabled, handlePaste])
 
   return {
-    isPasting: moveNode.isPending,
+    isPasting,
     handlePaste,
   }
 }

web/service/use-app-asset.ts

@@ -20,7 +20,6 @@ import { uploadToPresignedUrl } from './upload-to-presigned-url'
 export function appAssetTreeOptions(appId: string) {
   return consoleQuery.appAsset.tree.queryOptions({
     input: { params: { appId } },
-    enabled: !!appId,
   })
 }