diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx
index 114c5d0e8d..39692fff98 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx
@@ -9,8 +9,8 @@ import { Tree } from 'react-arborist'
 import { useTranslation } from 'react-i18next'
 import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
 import Loading from '@/app/components/base/loading'
-import TreeGuideLines from '@/app/components/workflow/skill/file-tree/tree-guide-lines'
-import { useSkillAssetTreeData } from '@/app/components/workflow/skill/hooks/use-skill-asset-tree'
+import TreeGuideLines from '@/app/components/workflow/skill/file-tree/tree/tree-guide-lines'
+import { useSkillAssetTreeData } from '@/app/components/workflow/skill/hooks/file-tree/data/use-skill-asset-tree'
 import { getFileIconType } from '@/app/components/workflow/skill/utils/file-utils'
 import { findNodeById, getAncestorIds } from '@/app/components/workflow/skill/utils/tree-utils'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/component.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/component.tsx
index 78e6c244dc..9d221a22e6 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/component.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/component.tsx
@@ -18,7 +18,7 @@ import {
 import { useSelectOrDelete } from '@/app/components/base/prompt-editor/hooks'
 import Tooltip from '@/app/components/base/tooltip'
 import { START_TAB_ID } from '@/app/components/workflow/skill/constants'
-import { useSkillAssetNodeMap } from '@/app/components/workflow/skill/hooks/use-skill-asset-tree'
+import { useSkillAssetNodeMap } from '@/app/components/workflow/skill/hooks/file-tree/data/use-skill-asset-tree'
 import { getFileIconType } from '@/app/components/workflow/skill/utils/file-utils'
 import { useStore } from '@/app/components/workflow/store'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/workflow/skill/file-tree/artifacts-section.tsx b/web/app/components/workflow/skill/file-tree/artifacts/artifacts-section.tsx
similarity index 100%
rename from web/app/components/workflow/skill/file-tree/artifacts-section.tsx
rename to web/app/components/workflow/skill/file-tree/artifacts/artifacts-section.tsx
diff --git a/web/app/components/workflow/skill/file-tree/artifacts-tree.tsx b/web/app/components/workflow/skill/file-tree/artifacts/artifacts-tree.tsx
similarity index 97%
rename from web/app/components/workflow/skill/file-tree/artifacts-tree.tsx
rename to web/app/components/workflow/skill/file-tree/artifacts/artifacts-tree.tsx
index b363affa89..b8e006c1cc 100644
--- a/web/app/components/workflow/skill/file-tree/artifacts-tree.tsx
+++ b/web/app/components/workflow/skill/file-tree/artifacts/artifacts-tree.tsx
@@ -7,8 +7,8 @@ import * as React from 'react'
 import { useCallback, useState } from 'react'
 import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
 import { cn } from '@/utils/classnames'
-import { getFileIconType } from '../utils/file-utils'
-import TreeGuideLines from './tree-guide-lines'
+import { getFileIconType } from '../../utils/file-utils'
+import TreeGuideLines from '../tree/tree-guide-lines'
 
 const INDENT_SIZE = 20
 
diff --git a/web/app/components/workflow/skill/file-tree/drag-action-tooltip.tsx b/web/app/components/workflow/skill/file-tree/tree/drag-action-tooltip.tsx
similarity index 92%
rename from web/app/components/workflow/skill/file-tree/drag-action-tooltip.tsx
rename to web/app/components/workflow/skill/file-tree/tree/drag-action-tooltip.tsx
index cab0c3c33f..8aaa6e9cbe 100644
--- a/web/app/components/workflow/skill/file-tree/drag-action-tooltip.tsx
+++ b/web/app/components/workflow/skill/file-tree/tree/drag-action-tooltip.tsx
@@ -4,8 +4,8 @@ import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore } from '@/app/components/workflow/store'
-import { ROOT_ID } from '../constants'
-import { useSkillAssetNodeMap } from '../hooks/use-skill-asset-tree'
+import { ROOT_ID } from '../../constants'
+import { useSkillAssetNodeMap } from '../../hooks/file-tree/data/use-skill-asset-tree'
 
 export type DragAction = 'upload' | 'move'
 
diff --git a/web/app/components/workflow/skill/file-tree/index.tsx b/web/app/components/workflow/skill/file-tree/tree/file-tree.tsx
similarity index 93%
rename from web/app/components/workflow/skill/file-tree/index.tsx
rename to web/app/components/workflow/skill/file-tree/tree/file-tree.tsx
index cf2e60c9cf..4ce4909b14 100644
--- a/web/app/components/workflow/skill/file-tree/index.tsx
+++ b/web/app/components/workflow/skill/file-tree/tree/file-tree.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type { MoveHandler, NodeApi, NodeRendererProps, TreeApi } from 'react-arborist'
-import type { TreeNodeData } from '../type'
+import type { TreeNodeData } from '../../type'
 import type { OpensObject } from '@/app/components/workflow/store/workflow/skill-editor/file-tree-slice'
 import type { AppAssetTreeView } from '@/types/app-asset'
 import { RiDragDropLine } from '@remixicon/react'
@@ -16,17 +16,17 @@ import SearchMenu from '@/app/components/base/icons/src/vender/knowledge/SearchM
 import Loading from '@/app/components/base/loading'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
 import { cn } from '@/utils/classnames'
-import { CONTEXT_MENU_TYPE, ROOT_ID } from '../constants'
-import { useInlineCreateNode } from '../hooks/use-inline-create-node'
-import { useNodeMove } from '../hooks/use-node-move'
-import { useNodeReorder } from '../hooks/use-node-reorder'
-import { usePasteOperation } from '../hooks/use-paste-operation'
-import { useRootFileDrop } from '../hooks/use-root-file-drop'
-import { useSkillAssetTreeData } from '../hooks/use-skill-asset-tree'
-import { useSkillShortcuts } from '../hooks/use-skill-shortcuts'
-import { useSkillTreeCollaboration } from '../hooks/use-skill-tree-collaboration'
-import { useSyncTreeWithActiveTab } from '../hooks/use-sync-tree-with-active-tab'
-import { isDescendantOf } from '../utils/tree-utils'
+import { CONTEXT_MENU_TYPE, ROOT_ID } from '../../constants'
+import { useSkillAssetTreeData } from '../../hooks/file-tree/data/use-skill-asset-tree'
+import { useSkillTreeCollaboration } from '../../hooks/file-tree/data/use-skill-tree-collaboration'
+import { useRootFileDrop } from '../../hooks/file-tree/dnd/use-root-file-drop'
+import { useInlineCreateNode } from '../../hooks/file-tree/interaction/use-inline-create-node'
+import { useSkillShortcuts } from '../../hooks/file-tree/interaction/use-skill-shortcuts'
+import { useSyncTreeWithActiveTab } from '../../hooks/file-tree/interaction/use-sync-tree-with-active-tab'
+import { useNodeMove } from '../../hooks/file-tree/operations/use-node-move'
+import { useNodeReorder } from '../../hooks/file-tree/operations/use-node-reorder'
+import { usePasteOperation } from '../../hooks/file-tree/operations/use-paste-operation'
+import { isDescendantOf } from '../../utils/tree-utils'
 import DragActionTooltip from './drag-action-tooltip'
 import SearchResultList from './search-result-list'
 import TreeContextMenu from './tree-context-menu'
diff --git a/web/app/components/workflow/skill/file-tree/menu-item.tsx b/web/app/components/workflow/skill/file-tree/tree/menu-item.tsx
similarity index 100%
rename from web/app/components/workflow/skill/file-tree/menu-item.tsx
rename to web/app/components/workflow/skill/file-tree/tree/menu-item.tsx
diff --git a/web/app/components/workflow/skill/file-tree/node-menu.tsx b/web/app/components/workflow/skill/file-tree/tree/node-menu.tsx
similarity index 94%
rename from web/app/components/workflow/skill/file-tree/node-menu.tsx
rename to web/app/components/workflow/skill/file-tree/tree/node-menu.tsx
index 22b1a63219..0363545c9f 100644
--- a/web/app/components/workflow/skill/file-tree/node-menu.tsx
+++ b/web/app/components/workflow/skill/file-tree/tree/node-menu.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import type { NodeApi, TreeApi } from 'react-arborist'
-import type { NodeMenuType } from '../constants'
-import type { TreeNodeData } from '../type'
+import type { NodeMenuType } from '../../constants'
+import type { TreeNodeData } from '../../type'
 import {
   RiClipboardLine,
   RiDeleteBinLine,
@@ -21,15 +21,15 @@ import { UploadCloud02 } from '@/app/components/base/icons/src/vender/line/gener
 import { Download02 } from '@/app/components/base/icons/src/vender/solid/general'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
 import { cn } from '@/utils/classnames'
-import { NODE_MENU_TYPE } from '../constants'
-import { useFileOperations } from '../hooks/use-file-operations'
+import { NODE_MENU_TYPE } from '../../constants'
+import { useFileOperations } from '../../hooks/file-tree/operations/use-file-operations'
 import MenuItem from './menu-item'
 
-const ImportSkillModal = dynamic(() => import('../start-tab/import-skill-modal'), {
+const ImportSkillModal = dynamic(() => import('../../start-tab/import-skill-modal'), {
   ssr: false,
 })
 
-export const MENU_CONTAINER_STYLES = [
+const MENU_CONTAINER_STYLES = [
   'min-w-[180px] rounded-xl border-[0.5px] border-components-panel-border',
   'bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]',
 ] as const
diff --git a/web/app/components/workflow/skill/file-tree/search-result-list.tsx b/web/app/components/workflow/skill/file-tree/tree/search-result-list.tsx
similarity index 95%
rename from web/app/components/workflow/skill/file-tree/search-result-list.tsx
rename to web/app/components/workflow/skill/file-tree/tree/search-result-list.tsx
index 945cae0c49..a7a50d7f5b 100644
--- a/web/app/components/workflow/skill/file-tree/search-result-list.tsx
+++ b/web/app/components/workflow/skill/file-tree/tree/search-result-list.tsx
@@ -4,8 +4,8 @@ import type { AppAssetTreeView } from '@/types/app-asset'
 import { useCallback, useMemo } from 'react'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
 import { cn } from '@/utils/classnames'
-import { useDelayedClick } from '../hooks/use-delayed-click'
-import { flattenMatchingNodes, getAncestorIds } from '../utils/tree-utils'
+import { useDelayedClick } from '../../hooks/file-tree/interaction/use-delayed-click'
+import { flattenMatchingNodes, getAncestorIds } from '../../utils/tree-utils'
 import { TreeNodeIcon } from './tree-node-icon'
 
 type SearchResultListProps = {
diff --git a/web/app/components/workflow/skill/file-tree/tree-context-menu.tsx b/web/app/components/workflow/skill/file-tree/tree/tree-context-menu.tsx
similarity index 93%
rename from web/app/components/workflow/skill/file-tree/tree-context-menu.tsx
rename to web/app/components/workflow/skill/file-tree/tree/tree-context-menu.tsx
index 0de4200921..f3a8a33dd0 100644
--- a/web/app/components/workflow/skill/file-tree/tree-context-menu.tsx
+++ b/web/app/components/workflow/skill/file-tree/tree/tree-context-menu.tsx
@@ -1,13 +1,13 @@
 'use client'
 
 import type { TreeApi } from 'react-arborist'
-import type { TreeNodeData } from '../type'
+import type { TreeNodeData } from '../../type'
 import { FloatingPortal } from '@floating-ui/react'
 import * as React from 'react'
 import { useCallback, useMemo } from 'react'
 import { useContextMenuFloating } from '@/app/components/base/portal-to-follow-elem/use-context-menu-floating'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
-import { getMenuNodeId, getNodeMenuType } from '../utils/tree-utils'
+import { getMenuNodeId, getNodeMenuType } from '../../utils/tree-utils'
 import NodeMenu from './node-menu'
 
 type TreeContextMenuProps = {
diff --git a/web/app/components/workflow/skill/file-tree/tree-edit-input.spec.tsx b/web/app/components/workflow/skill/file-tree/tree/tree-edit-input.spec.tsx
similarity index 99%
rename from web/app/components/workflow/skill/file-tree/tree-edit-input.spec.tsx
rename to web/app/components/workflow/skill/file-tree/tree/tree-edit-input.spec.tsx
index 868f6aa078..1c11091e38 100644
--- a/web/app/components/workflow/skill/file-tree/tree-edit-input.spec.tsx
+++ b/web/app/components/workflow/skill/file-tree/tree/tree-edit-input.spec.tsx
@@ -1,5 +1,5 @@
 import type { NodeApi } from 'react-arborist'
-import type { TreeNodeData } from '../type'
+import type { TreeNodeData } from '../../type'
 import { fireEvent, render, screen } from '@testing-library/react'
 import TreeEditInput from './tree-edit-input'
 
diff --git a/web/app/components/workflow/skill/file-tree/tree-edit-input.tsx b/web/app/components/workflow/skill/file-tree/tree/tree-edit-input.tsx
similarity index 97%
rename from web/app/components/workflow/skill/file-tree/tree-edit-input.tsx
rename to web/app/components/workflow/skill/file-tree/tree/tree-edit-input.tsx
index 3db59a62cf..898999fe17 100644
--- a/web/app/components/workflow/skill/file-tree/tree-edit-input.tsx
+++ b/web/app/components/workflow/skill/file-tree/tree/tree-edit-input.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type { NodeApi } from 'react-arborist'
-import type { TreeNodeData } from '../type'
+import type { TreeNodeData } from '../../type'
 import * as React from 'react'
 import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/workflow/skill/file-tree/tree-guide-lines.tsx b/web/app/components/workflow/skill/file-tree/tree/tree-guide-lines.tsx
similarity index 100%
rename from web/app/components/workflow/skill/file-tree/tree-guide-lines.tsx
rename to web/app/components/workflow/skill/file-tree/tree/tree-guide-lines.tsx
diff --git a/web/app/components/workflow/skill/file-tree/tree-node-icon.tsx b/web/app/components/workflow/skill/file-tree/tree/tree-node-icon.tsx
similarity index 96%
rename from web/app/components/workflow/skill/file-tree/tree-node-icon.tsx
rename to web/app/components/workflow/skill/file-tree/tree/tree-node-icon.tsx
index 28f6c18e24..a06421c204 100644
--- a/web/app/components/workflow/skill/file-tree/tree-node-icon.tsx
+++ b/web/app/components/workflow/skill/file-tree/tree/tree-node-icon.tsx
@@ -7,7 +7,7 @@ import { RiFolderLine, RiFolderOpenLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
 import { cn } from '@/utils/classnames'
-import { getFileIconType } from '../utils/file-utils'
+import { getFileIconType } from '../../utils/file-utils'
 
 type TreeNodeIconProps = {
   isFolder: boolean
diff --git a/web/app/components/workflow/skill/file-tree/tree-node.tsx b/web/app/components/workflow/skill/file-tree/tree/tree-node.tsx
similarity index 96%
rename from web/app/components/workflow/skill/file-tree/tree-node.tsx
rename to web/app/components/workflow/skill/file-tree/tree/tree-node.tsx
index d69ec27ef9..ebccd59477 100644
--- a/web/app/components/workflow/skill/file-tree/tree-node.tsx
+++ b/web/app/components/workflow/skill/file-tree/tree/tree-node.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type { NodeRendererProps } from 'react-arborist'
-import type { TreeNodeData } from '../type'
+import type { TreeNodeData } from '../../type'
 import { RiMoreFill } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
@@ -13,8 +13,8 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
 import { cn } from '@/utils/classnames'
-import { useFolderFileDrop } from '../hooks/use-folder-file-drop'
-import { useTreeNodeHandlers } from '../hooks/use-tree-node-handlers'
+import { useFolderFileDrop } from '../../hooks/file-tree/dnd/use-folder-file-drop'
+import { useTreeNodeHandlers } from '../../hooks/file-tree/interaction/use-tree-node-handlers'
 import NodeMenu from './node-menu'
 import TreeEditInput from './tree-edit-input'
 import TreeGuideLines from './tree-guide-lines'
diff --git a/web/app/components/workflow/skill/file-tree/upload-status-tooltip.tsx b/web/app/components/workflow/skill/file-tree/tree/upload-status-tooltip.tsx
similarity index 100%
rename from web/app/components/workflow/skill/file-tree/upload-status-tooltip.tsx
rename to web/app/components/workflow/skill/file-tree/tree/upload-status-tooltip.tsx
diff --git a/web/app/components/workflow/skill/hooks/use-skill-asset-tree.ts b/web/app/components/workflow/skill/hooks/file-tree/data/use-skill-asset-tree.ts
similarity index 96%
rename from web/app/components/workflow/skill/hooks/use-skill-asset-tree.ts
rename to web/app/components/workflow/skill/hooks/file-tree/data/use-skill-asset-tree.ts
index 32a5687705..9386370db8 100644
--- a/web/app/components/workflow/skill/hooks/use-skill-asset-tree.ts
+++ b/web/app/components/workflow/skill/hooks/file-tree/data/use-skill-asset-tree.ts
@@ -1,7 +1,7 @@
 import type { AppAssetTreeResponse, AppAssetTreeView } from '@/types/app-asset'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useGetAppAssetTree } from '@/service/use-app-asset'
-import { buildNodeMap } from '../utils/tree-utils'
+import { buildNodeMap } from '../../../utils/tree-utils'
 
 /**
  * Get the current app ID from the app store.
diff --git a/web/app/components/workflow/skill/hooks/use-skill-tree-collaboration.ts b/web/app/components/workflow/skill/hooks/file-tree/data/use-skill-tree-collaboration.ts
similarity index 100%
rename from web/app/components/workflow/skill/hooks/use-skill-tree-collaboration.ts
rename to web/app/components/workflow/skill/hooks/file-tree/data/use-skill-tree-collaboration.ts
diff --git a/web/app/components/workflow/skill/hooks/use-file-drop.ts b/web/app/components/workflow/skill/hooks/file-tree/dnd/use-file-drop.ts
similarity index 94%
rename from web/app/components/workflow/skill/hooks/use-file-drop.ts
rename to web/app/components/workflow/skill/hooks/file-tree/dnd/use-file-drop.ts
index 5debadb27d..7f38f48054 100644
--- a/web/app/components/workflow/skill/hooks/use-file-drop.ts
+++ b/web/app/components/workflow/skill/hooks/file-tree/dnd/use-file-drop.ts
@@ -9,9 +9,9 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import Toast from '@/app/components/base/toast'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import { useUploadFileWithPresignedUrl } from '@/service/use-app-asset'
-import { ROOT_ID } from '../constants'
-import { prepareSkillUploadFile } from '../utils/skill-upload-utils'
-import { useSkillTreeUpdateEmitter } from './use-skill-tree-collaboration'
+import { ROOT_ID } from '../../../constants'
+import { prepareSkillUploadFile } from '../../../utils/skill-upload-utils'
+import { useSkillTreeUpdateEmitter } from '../data/use-skill-tree-collaboration'
 
 type FileDropTarget = {
   folderId: string | null
diff --git a/web/app/components/workflow/skill/hooks/use-folder-file-drop.ts b/web/app/components/workflow/skill/hooks/file-tree/dnd/use-folder-file-drop.ts
similarity index 97%
rename from web/app/components/workflow/skill/hooks/use-folder-file-drop.ts
rename to web/app/components/workflow/skill/hooks/file-tree/dnd/use-folder-file-drop.ts
index 9ed2b4087c..fd357c231c 100644
--- a/web/app/components/workflow/skill/hooks/use-folder-file-drop.ts
+++ b/web/app/components/workflow/skill/hooks/file-tree/dnd/use-folder-file-drop.ts
@@ -5,11 +5,11 @@
 // Auto-expand is triggered by Zustand isDragOver state (single source of truth)
 
 import type { NodeApi } from 'react-arborist'
-import type { TreeNodeData } from '../type'
+import type { TreeNodeData } from '../../../type'
 import type { AppAssetTreeView } from '@/types/app-asset'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useStore } from '@/app/components/workflow/store'
-import { isDragEvent } from '../utils/drag-utils'
+import { isDragEvent } from '../../../utils/drag-utils'
 import { useUnifiedDrag } from './use-unified-drag'
 
 type UseFolderFileDropReturn = {
diff --git a/web/app/components/workflow/skill/hooks/use-root-file-drop.ts b/web/app/components/workflow/skill/hooks/file-tree/dnd/use-root-file-drop.ts
similarity index 96%
rename from web/app/components/workflow/skill/hooks/use-root-file-drop.ts
rename to web/app/components/workflow/skill/hooks/file-tree/dnd/use-root-file-drop.ts
index 3f5be0bfcd..2e3e8dd901 100644
--- a/web/app/components/workflow/skill/hooks/use-root-file-drop.ts
+++ b/web/app/components/workflow/skill/hooks/file-tree/dnd/use-root-file-drop.ts
@@ -4,7 +4,7 @@
 
 import type { AppAssetTreeView } from '@/types/app-asset'
 import { useCallback, useRef } from 'react'
-import { isDragEvent } from '../utils/drag-utils'
+import { isDragEvent } from '../../../utils/drag-utils'
 import { useUnifiedDrag } from './use-unified-drag'
 
 type UseRootFileDropReturn = {
diff --git a/web/app/components/workflow/skill/hooks/use-unified-drag.ts b/web/app/components/workflow/skill/hooks/file-tree/dnd/use-unified-drag.ts
similarity index 95%
rename from web/app/components/workflow/skill/hooks/use-unified-drag.ts
rename to web/app/components/workflow/skill/hooks/file-tree/dnd/use-unified-drag.ts
index d4f967fb6d..46479a20b7 100644
--- a/web/app/components/workflow/skill/hooks/use-unified-drag.ts
+++ b/web/app/components/workflow/skill/hooks/file-tree/dnd/use-unified-drag.ts
@@ -4,7 +4,7 @@
 // Internal node drag-move is now handled by react-arborist's built-in drag system
 
 import { useCallback } from 'react'
-import { isFileDrag } from '../utils/drag-utils'
+import { isFileDrag } from '../../../utils/drag-utils'
 import { useFileDrop } from './use-file-drop'
 
 type DragTarget = {
diff --git a/web/app/components/workflow/skill/hooks/use-delayed-click.ts b/web/app/components/workflow/skill/hooks/file-tree/interaction/use-delayed-click.ts
similarity index 100%
rename from web/app/components/workflow/skill/hooks/use-delayed-click.ts
rename to web/app/components/workflow/skill/hooks/file-tree/interaction/use-delayed-click.ts
diff --git a/web/app/components/workflow/skill/hooks/use-inline-create-node.spec.tsx b/web/app/components/workflow/skill/hooks/file-tree/interaction/use-inline-create-node.spec.tsx
similarity index 95%
rename from web/app/components/workflow/skill/hooks/use-inline-create-node.spec.tsx
rename to web/app/components/workflow/skill/hooks/file-tree/interaction/use-inline-create-node.spec.tsx
index b917465434..147a5c71f2 100644
--- a/web/app/components/workflow/skill/hooks/use-inline-create-node.spec.tsx
+++ b/web/app/components/workflow/skill/hooks/file-tree/interaction/use-inline-create-node.spec.tsx
@@ -1,12 +1,12 @@
 import type { ReactNode } from 'react'
 import type { TreeApi } from 'react-arborist'
-import type { TreeNodeData } from '../type'
+import type { TreeNodeData } from '../../../type'
 import type { App, AppSSO } from '@/types/app'
 import { act, renderHook } from '@testing-library/react'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { WorkflowContext } from '@/app/components/workflow/context'
 import { createWorkflowStore } from '@/app/components/workflow/store'
-import { START_TAB_ID } from '../constants'
+import { START_TAB_ID } from '../../../constants'
 import { useInlineCreateNode } from './use-inline-create-node'
 
 const {
@@ -35,7 +35,7 @@ vi.mock('@/service/use-app-asset', () => ({
   }),
 }))
 
-vi.mock('./use-skill-tree-collaboration', () => ({
+vi.mock('../data/use-skill-tree-collaboration', () => ({
   useSkillTreeUpdateEmitter: () => mockEmitTreeUpdate,
 }))
 
diff --git a/web/app/components/workflow/skill/hooks/use-inline-create-node.ts b/web/app/components/workflow/skill/hooks/file-tree/interaction/use-inline-create-node.ts
similarity index 94%
rename from web/app/components/workflow/skill/hooks/use-inline-create-node.ts
rename to web/app/components/workflow/skill/hooks/file-tree/interaction/use-inline-create-node.ts
index c689ecf53f..57bed049b1 100644
--- a/web/app/components/workflow/skill/hooks/use-inline-create-node.ts
+++ b/web/app/components/workflow/skill/hooks/file-tree/interaction/use-inline-create-node.ts
@@ -1,7 +1,7 @@
 'use client'
 
 import type { NodeApi, TreeApi } from 'react-arborist'
-import type { TreeNodeData } from '../type'
+import type { TreeNodeData } from '../../../type'
 import { useCallback, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
@@ -12,9 +12,9 @@ import {
   useRenameAppAssetNode,
   useUploadFileWithPresignedUrl,
 } from '@/service/use-app-asset'
-import { getFileExtension, isTextLikeFile } from '../utils/file-utils'
-import { createDraftTreeNode, insertDraftTreeNode } from '../utils/tree-utils'
-import { useSkillTreeUpdateEmitter } from './use-skill-tree-collaboration'
+import { getFileExtension, isTextLikeFile } from '../../../utils/file-utils'
+import { createDraftTreeNode, insertDraftTreeNode } from '../../../utils/tree-utils'
+import { useSkillTreeUpdateEmitter } from '../data/use-skill-tree-collaboration'
 
 type UseInlineCreateNodeOptions = {
   treeRef: React.RefObject<TreeApi<TreeNodeData> | null>
diff --git a/web/app/components/workflow/skill/hooks/use-skill-shortcuts.ts b/web/app/components/workflow/skill/hooks/file-tree/interaction/use-skill-shortcuts.ts
similarity index 97%
rename from web/app/components/workflow/skill/hooks/use-skill-shortcuts.ts
rename to web/app/components/workflow/skill/hooks/file-tree/interaction/use-skill-shortcuts.ts
index 9230e264b6..ba8dadf3e4 100644
--- a/web/app/components/workflow/skill/hooks/use-skill-shortcuts.ts
+++ b/web/app/components/workflow/skill/hooks/file-tree/interaction/use-skill-shortcuts.ts
@@ -2,7 +2,7 @@
 
 import type { RefObject } from 'react'
 import type { TreeApi } from 'react-arborist'
-import type { TreeNodeData } from '../type'
+import type { TreeNodeData } from '../../../type'
 import { useKeyPress } from 'ahooks'
 import { useCallback, useEffect, useRef } from 'react'
 import { useWorkflowStore } from '@/app/components/workflow/store'
diff --git a/web/app/components/workflow/skill/hooks/use-sync-tree-with-active-tab.spec.tsx b/web/app/components/workflow/skill/hooks/file-tree/interaction/use-sync-tree-with-active-tab.spec.tsx
similarity index 97%
rename from web/app/components/workflow/skill/hooks/use-sync-tree-with-active-tab.spec.tsx
rename to web/app/components/workflow/skill/hooks/file-tree/interaction/use-sync-tree-with-active-tab.spec.tsx
index 686aaf0c39..05a5c72258 100644
--- a/web/app/components/workflow/skill/hooks/use-sync-tree-with-active-tab.spec.tsx
+++ b/web/app/components/workflow/skill/hooks/file-tree/interaction/use-sync-tree-with-active-tab.spec.tsx
@@ -1,10 +1,10 @@
 import type { ReactNode, RefObject } from 'react'
 import type { TreeApi } from 'react-arborist'
-import type { TreeNodeData } from '../type'
+import type { TreeNodeData } from '../../../type'
 import { renderHook } from '@testing-library/react'
 import { WorkflowContext } from '@/app/components/workflow/context'
 import { createWorkflowStore } from '@/app/components/workflow/store'
-import { START_TAB_ID } from '../constants'
+import { START_TAB_ID } from '../../../constants'
 import { useSyncTreeWithActiveTab } from './use-sync-tree-with-active-tab'
 
 type MockTreeNode = {
diff --git a/web/app/components/workflow/skill/hooks/use-sync-tree-with-active-tab.ts b/web/app/components/workflow/skill/hooks/file-tree/interaction/use-sync-tree-with-active-tab.ts
similarity index 97%
rename from web/app/components/workflow/skill/hooks/use-sync-tree-with-active-tab.ts
rename to web/app/components/workflow/skill/hooks/file-tree/interaction/use-sync-tree-with-active-tab.ts
index d628668787..f60a449fe8 100644
--- a/web/app/components/workflow/skill/hooks/use-sync-tree-with-active-tab.ts
+++ b/web/app/components/workflow/skill/hooks/file-tree/interaction/use-sync-tree-with-active-tab.ts
@@ -1,7 +1,7 @@
 'use client'
 
 import type { TreeApi } from 'react-arborist'
-import type { TreeNodeData } from '../type'
+import type { TreeNodeData } from '../../../type'
 import { useEffect } from 'react'
 import { isArtifactTab, START_TAB_ID } from '@/app/components/workflow/skill/constants'
 import { useWorkflowStore } from '@/app/components/workflow/store'
diff --git a/web/app/components/workflow/skill/hooks/use-tree-node-handlers.ts b/web/app/components/workflow/skill/hooks/file-tree/interaction/use-tree-node-handlers.ts
similarity index 98%
rename from web/app/components/workflow/skill/hooks/use-tree-node-handlers.ts
rename to web/app/components/workflow/skill/hooks/file-tree/interaction/use-tree-node-handlers.ts
index 31a07ffd93..6b620ad45d 100644
--- a/web/app/components/workflow/skill/hooks/use-tree-node-handlers.ts
+++ b/web/app/components/workflow/skill/hooks/file-tree/interaction/use-tree-node-handlers.ts
@@ -1,7 +1,7 @@
 'use client'
 
 import type { NodeApi } from 'react-arborist'
-import type { TreeNodeData } from '../type'
+import type { TreeNodeData } from '../../../type'
 import { throttle } from 'es-toolkit/function'
 import { useCallback, useMemo, useRef } from 'react'
 import { useWorkflowStore } from '@/app/components/workflow/store'
diff --git a/web/app/components/workflow/skill/hooks/use-create-operations.ts b/web/app/components/workflow/skill/hooks/file-tree/operations/use-create-operations.ts
similarity index 97%
rename from web/app/components/workflow/skill/hooks/use-create-operations.ts
rename to web/app/components/workflow/skill/hooks/file-tree/operations/use-create-operations.ts
index 81fe5af92f..7b2f97c4dd 100644
--- a/web/app/components/workflow/skill/hooks/use-create-operations.ts
+++ b/web/app/components/workflow/skill/hooks/file-tree/operations/use-create-operations.ts
@@ -9,8 +9,8 @@ import {
   useCreateAppAssetFolder,
   useUploadFileWithPresignedUrl,
 } from '@/service/use-app-asset'
-import { prepareSkillUploadFile } from '../utils/skill-upload-utils'
-import { useSkillTreeUpdateEmitter } from './use-skill-tree-collaboration'
+import { prepareSkillUploadFile } from '../../../utils/skill-upload-utils'
+import { useSkillTreeUpdateEmitter } from '../data/use-skill-tree-collaboration'
 
 type UseCreateOperationsOptions = {
   parentId: string | null
diff --git a/web/app/components/workflow/skill/hooks/use-download-operation.ts b/web/app/components/workflow/skill/hooks/file-tree/operations/use-download-operation.ts
similarity index 100%
rename from web/app/components/workflow/skill/hooks/use-download-operation.ts
rename to web/app/components/workflow/skill/hooks/file-tree/operations/use-download-operation.ts
diff --git a/web/app/components/workflow/skill/hooks/use-file-operations.ts b/web/app/components/workflow/skill/hooks/file-tree/operations/use-file-operations.ts
similarity index 92%
rename from web/app/components/workflow/skill/hooks/use-file-operations.ts
rename to web/app/components/workflow/skill/hooks/file-tree/operations/use-file-operations.ts
index 6dde784ada..3cf5f73197 100644
--- a/web/app/components/workflow/skill/hooks/use-file-operations.ts
+++ b/web/app/components/workflow/skill/hooks/file-tree/operations/use-file-operations.ts
@@ -4,14 +4,14 @@
 // Maintains backward compatibility for existing consumers
 
 import type { NodeApi, TreeApi } from 'react-arborist'
-import type { TreeNodeData } from '../type'
+import type { TreeNodeData } from '../../../type'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useWorkflowStore } from '@/app/components/workflow/store'
-import { toApiParentId } from '../utils/tree-utils'
+import { toApiParentId } from '../../../utils/tree-utils'
+import { useSkillAssetTreeData } from '../data/use-skill-asset-tree'
 import { useCreateOperations } from './use-create-operations'
 import { useDownloadOperation } from './use-download-operation'
 import { useModifyOperations } from './use-modify-operations'
-import { useSkillAssetTreeData } from './use-skill-asset-tree'
 
 type UseFileOperationsOptions = {
   nodeId?: string
diff --git a/web/app/components/workflow/skill/hooks/use-modify-operations.ts b/web/app/components/workflow/skill/hooks/file-tree/operations/use-modify-operations.ts
similarity index 93%
rename from web/app/components/workflow/skill/hooks/use-modify-operations.ts
rename to web/app/components/workflow/skill/hooks/file-tree/operations/use-modify-operations.ts
index 860920269a..e0fc05e01f 100644
--- a/web/app/components/workflow/skill/hooks/use-modify-operations.ts
+++ b/web/app/components/workflow/skill/hooks/file-tree/operations/use-modify-operations.ts
@@ -4,15 +4,15 @@
 
 import type { NodeApi, TreeApi } from 'react-arborist'
 import type { StoreApi } from 'zustand'
-import type { TreeNodeData } from '../type'
+import type { TreeNodeData } from '../../../type'
 import type { SkillEditorSliceShape } from '@/app/components/workflow/store/workflow/skill-editor/types'
 import type { AppAssetTreeResponse } from '@/types/app-asset'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Toast from '@/app/components/base/toast'
 import { useDeleteAppAssetNode } from '@/service/use-app-asset'
-import { getAllDescendantFileIds } from '../utils/tree-utils'
-import { useSkillTreeUpdateEmitter } from './use-skill-tree-collaboration'
+import { getAllDescendantFileIds } from '../../../utils/tree-utils'
+import { useSkillTreeUpdateEmitter } from '../data/use-skill-tree-collaboration'
 
 type UseModifyOperationsOptions = {
   nodeId: string
diff --git a/web/app/components/workflow/skill/hooks/use-node-move.ts b/web/app/components/workflow/skill/hooks/file-tree/operations/use-node-move.ts
similarity index 90%
rename from web/app/components/workflow/skill/hooks/use-node-move.ts
rename to web/app/components/workflow/skill/hooks/file-tree/operations/use-node-move.ts
index 6856a8658c..fc60f1ca7f 100644
--- a/web/app/components/workflow/skill/hooks/use-node-move.ts
+++ b/web/app/components/workflow/skill/hooks/file-tree/operations/use-node-move.ts
@@ -8,8 +8,8 @@ import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import Toast from '@/app/components/base/toast'
 import { useMoveAppAssetNode } from '@/service/use-app-asset'
-import { toApiParentId } from '../utils/tree-utils'
-import { useSkillTreeUpdateEmitter } from './use-skill-tree-collaboration'
+import { toApiParentId } from '../../../utils/tree-utils'
+import { useSkillTreeUpdateEmitter } from '../data/use-skill-tree-collaboration'
 
 export function useNodeMove() {
   const { t } = useTranslation('workflow')
diff --git a/web/app/components/workflow/skill/hooks/use-node-reorder.ts b/web/app/components/workflow/skill/hooks/file-tree/operations/use-node-reorder.ts
similarity index 93%
rename from web/app/components/workflow/skill/hooks/use-node-reorder.ts
rename to web/app/components/workflow/skill/hooks/file-tree/operations/use-node-reorder.ts
index c256ba2903..c76bb8cb24 100644
--- a/web/app/components/workflow/skill/hooks/use-node-reorder.ts
+++ b/web/app/components/workflow/skill/hooks/file-tree/operations/use-node-reorder.ts
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import Toast from '@/app/components/base/toast'
 import { useReorderAppAssetNode } from '@/service/use-app-asset'
-import { useSkillTreeUpdateEmitter } from './use-skill-tree-collaboration'
+import { useSkillTreeUpdateEmitter } from '../data/use-skill-tree-collaboration'
 
 export function useNodeReorder() {
   const { t } = useTranslation('workflow')
diff --git a/web/app/components/workflow/skill/hooks/use-paste-operation.ts b/web/app/components/workflow/skill/hooks/file-tree/operations/use-paste-operation.ts
similarity index 95%
rename from web/app/components/workflow/skill/hooks/use-paste-operation.ts
rename to web/app/components/workflow/skill/hooks/file-tree/operations/use-paste-operation.ts
index 1e4fda190d..4dda64b963 100644
--- a/web/app/components/workflow/skill/hooks/use-paste-operation.ts
+++ b/web/app/components/workflow/skill/hooks/file-tree/operations/use-paste-operation.ts
@@ -2,7 +2,7 @@
 
 import type { RefObject } from 'react'
 import type { TreeApi } from 'react-arborist'
-import type { TreeNodeData } from '../type'
+import type { TreeNodeData } from '../../../type'
 import type { AppAssetTreeResponse } from '@/types/app-asset'
 import { useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -10,8 +10,8 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import Toast from '@/app/components/base/toast'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import { useMoveAppAssetNode } from '@/service/use-app-asset'
-import { findNodeById, getTargetFolderIdFromSelection, toApiParentId } from '../utils/tree-utils'
-import { useSkillTreeUpdateEmitter } from './use-skill-tree-collaboration'
+import { findNodeById, getTargetFolderIdFromSelection, toApiParentId } from '../../../utils/tree-utils'
+import { useSkillTreeUpdateEmitter } from '../data/use-skill-tree-collaboration'
 
 type UsePasteOperationOptions = {
   treeRef: RefObject<TreeApi<TreeNodeData> | null>
diff --git a/web/app/components/workflow/skill/hooks/use-skill-auto-save.spec.tsx b/web/app/components/workflow/skill/hooks/use-skill-auto-save.spec.tsx
index 71a97e5001..ea55cf47c0 100644
--- a/web/app/components/workflow/skill/hooks/use-skill-auto-save.spec.tsx
+++ b/web/app/components/workflow/skill/hooks/use-skill-auto-save.spec.tsx
@@ -5,7 +5,7 @@ const { mockSaveAllDirty } = vi.hoisted(() => ({
   mockSaveAllDirty: vi.fn(),
 }))
 
-vi.mock('./use-skill-save-manager', () => ({
+vi.mock('./skill-save-context', () => ({
   useSkillSaveManager: () => ({
     saveAllDirty: mockSaveAllDirty,
   }),
diff --git a/web/app/components/workflow/skill/main.tsx b/web/app/components/workflow/skill/main.tsx
index 62d6b225ef..3b2438def0 100644
--- a/web/app/components/workflow/skill/main.tsx
+++ b/web/app/components/workflow/skill/main.tsx
@@ -4,19 +4,19 @@ import { parseAsString, useQueryState } from 'nuqs'
 import * as React from 'react'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
-import ArtifactContentPanel from './artifact-content-panel'
 import { isArtifactTab } from './constants'
-import ContentArea from './content-area'
-import ContentBody from './content-body'
-import FileContentPanel from './file-content-panel'
-import FileTabs from './file-tabs'
-import FileTree from './file-tree'
-import ArtifactsSection from './file-tree/artifacts-section'
+import ArtifactsSection from './file-tree/artifacts/artifacts-section'
+import FileTree from './file-tree/tree/file-tree'
 import { useSkillAutoSave } from './hooks/use-skill-auto-save'
 import { SkillSaveProvider } from './hooks/use-skill-save-manager'
-import Sidebar from './sidebar'
-import SidebarSearchAdd from './sidebar-search-add'
-import SkillPageLayout from './skill-page-layout'
+import ContentArea from './skill-body/layout/content-area'
+import ContentBody from './skill-body/layout/content-body'
+import Sidebar from './skill-body/layout/sidebar'
+import SkillPageLayout from './skill-body/layout/skill-page-layout'
+import ArtifactContentPanel from './skill-body/panels/artifact-content-panel'
+import FileContentPanel from './skill-body/panels/file-content-panel'
+import SidebarSearchAdd from './skill-body/sidebar-search-add'
+import FileTabs from './skill-body/tabs/file-tabs'
 
 const SkillAutoSaveManager = () => {
   useSkillAutoSave()
diff --git a/web/app/components/workflow/skill/content-area.tsx b/web/app/components/workflow/skill/skill-body/layout/content-area.tsx
similarity index 100%
rename from web/app/components/workflow/skill/content-area.tsx
rename to web/app/components/workflow/skill/skill-body/layout/content-area.tsx
diff --git a/web/app/components/workflow/skill/content-body.tsx b/web/app/components/workflow/skill/skill-body/layout/content-body.tsx
similarity index 100%
rename from web/app/components/workflow/skill/content-body.tsx
rename to web/app/components/workflow/skill/skill-body/layout/content-body.tsx
diff --git a/web/app/components/workflow/skill/sidebar.tsx b/web/app/components/workflow/skill/skill-body/layout/sidebar.tsx
similarity index 93%
rename from web/app/components/workflow/skill/sidebar.tsx
rename to web/app/components/workflow/skill/skill-body/layout/sidebar.tsx
index 50235bedc7..33703e63cc 100644
--- a/web/app/components/workflow/skill/sidebar.tsx
+++ b/web/app/components/workflow/skill/skill-body/layout/sidebar.tsx
@@ -6,8 +6,8 @@ import * as React from 'react'
 import { useCallback } from 'react'
 import { STORAGE_KEYS } from '@/config/storage-keys'
 import { storage } from '@/utils/storage'
-import { useResizePanel } from '../nodes/_base/hooks/use-resize-panel'
-import { SIDEBAR_DEFAULT_WIDTH, SIDEBAR_MAX_WIDTH, SIDEBAR_MIN_WIDTH } from './constants'
+import { useResizePanel } from '../../../nodes/_base/hooks/use-resize-panel'
+import { SIDEBAR_DEFAULT_WIDTH, SIDEBAR_MAX_WIDTH, SIDEBAR_MIN_WIDTH } from '../../constants'
 
 type SidebarProps = PropsWithChildren
 
diff --git a/web/app/components/workflow/skill/skill-page-layout.tsx b/web/app/components/workflow/skill/skill-body/layout/skill-page-layout.tsx
similarity index 100%
rename from web/app/components/workflow/skill/skill-page-layout.tsx
rename to web/app/components/workflow/skill/skill-body/layout/skill-page-layout.tsx
diff --git a/web/app/components/workflow/skill/artifact-content-panel.tsx b/web/app/components/workflow/skill/skill-body/panels/artifact-content-panel.tsx
similarity index 88%
rename from web/app/components/workflow/skill/artifact-content-panel.tsx
rename to web/app/components/workflow/skill/skill-body/panels/artifact-content-panel.tsx
index 16e8bd1770..76a0baf37e 100644
--- a/web/app/components/workflow/skill/artifact-content-panel.tsx
+++ b/web/app/components/workflow/skill/skill-body/panels/artifact-content-panel.tsx
@@ -5,9 +5,9 @@ import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import { useStore } from '@/app/components/workflow/store'
 import { useSandboxFileDownloadUrl } from '@/service/use-sandbox-file'
-import { getArtifactPath } from './constants'
-import { getFileExtension } from './utils/file-utils'
-import ReadOnlyFilePreview from './viewer/read-only-file-preview'
+import { getArtifactPath } from '../../constants'
+import { getFileExtension } from '../../utils/file-utils'
+import ReadOnlyFilePreview from '../../viewer/read-only-file-preview'
 
 const ArtifactContentPanel = () => {
   const { t } = useTranslation('workflow')
diff --git a/web/app/components/workflow/skill/file-content-panel.tsx b/web/app/components/workflow/skill/skill-body/panels/file-content-panel.tsx
similarity index 90%
rename from web/app/components/workflow/skill/file-content-panel.tsx
rename to web/app/components/workflow/skill/skill-body/panels/file-content-panel.tsx
index 56f25c65f3..e09ae23c02 100644
--- a/web/app/components/workflow/skill/file-content-panel.tsx
+++ b/web/app/components/workflow/skill/skill-body/panels/file-content-panel.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type { OnMount } from '@monaco-editor/react'
-import type { SkillFileDataMode } from './hooks/use-skill-file-data'
+import type { SkillFileDataMode } from '../../hooks/use-skill-file-data'
 import type { AppAssetTreeView } from '@/types/app-asset'
 import { loader } from '@monaco-editor/react'
 import isDeepEqual from 'fast-deep-equal'
@@ -15,20 +15,20 @@ import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
 import { basePath } from '@/utils/var'
-import { useSkillCodeCollaboration } from '../collaboration/skills/use-skill-code-collaboration'
-import { useSkillMarkdownCollaboration } from '../collaboration/skills/use-skill-markdown-collaboration'
-import { START_TAB_ID } from './constants'
-import CodeFileEditor from './editor/code-file-editor'
-import MarkdownFileEditor from './editor/markdown-file-editor'
-import { useSkillSaveManager } from './hooks/skill-save-context'
-import { useFileNodeViewState } from './hooks/use-file-node-view-state'
-import { useFileTypeInfo } from './hooks/use-file-type-info'
-import { useSkillAssetNodeMap } from './hooks/use-skill-asset-tree'
-import { useSkillFileData } from './hooks/use-skill-file-data'
-import StartTabContent from './start-tab'
-import { getFileLanguage } from './utils/file-utils'
-import MediaFilePreview from './viewer/media-file-preview'
-import UnsupportedFileDownload from './viewer/unsupported-file-download'
+import { useSkillCodeCollaboration } from '../../../collaboration/skills/use-skill-code-collaboration'
+import { useSkillMarkdownCollaboration } from '../../../collaboration/skills/use-skill-markdown-collaboration'
+import { START_TAB_ID } from '../../constants'
+import CodeFileEditor from '../../editor/code-file-editor'
+import MarkdownFileEditor from '../../editor/markdown-file-editor'
+import { useSkillAssetNodeMap } from '../../hooks/file-tree/data/use-skill-asset-tree'
+import { useSkillSaveManager } from '../../hooks/skill-save-context'
+import { useFileNodeViewState } from '../../hooks/use-file-node-view-state'
+import { useFileTypeInfo } from '../../hooks/use-file-type-info'
+import { useSkillFileData } from '../../hooks/use-skill-file-data'
+import StartTabContent from '../../start-tab'
+import { getFileLanguage } from '../../utils/file-utils'
+import MediaFilePreview from '../../viewer/media-file-preview'
+import UnsupportedFileDownload from '../../viewer/unsupported-file-download'
 
 type SkillFileMetadata = {
   files?: Record<string, AppAssetTreeView>
@@ -48,12 +48,12 @@ const extractFileReferenceIds = (content: string) => {
 }
 
 const SQLiteFilePreview = dynamic(
-  () => import('./viewer/sqlite-file-preview'),
+  () => import('../../viewer/sqlite-file-preview'),
   { ssr: false, loading: () => <Loading type="area" /> },
 )
 
 const PdfFilePreview = dynamic(
-  () => import('./viewer/pdf-file-preview'),
+  () => import('../../viewer/pdf-file-preview'),
   { ssr: false, loading: () => <Loading type="area" /> },
 )
 
diff --git a/web/app/components/workflow/skill/sidebar-search-add.tsx b/web/app/components/workflow/skill/skill-body/sidebar-search-add.tsx
similarity index 92%
rename from web/app/components/workflow/skill/sidebar-search-add.tsx
rename to web/app/components/workflow/skill/skill-body/sidebar-search-add.tsx
index ce745e7f48..a6da6b241d 100644
--- a/web/app/components/workflow/skill/sidebar-search-add.tsx
+++ b/web/app/components/workflow/skill/skill-body/sidebar-search-add.tsx
@@ -19,13 +19,13 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import SearchInput from '@/app/components/base/search-input'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
-import { ROOT_ID } from './constants'
-import MenuItem from './file-tree/menu-item'
-import { useFileOperations } from './hooks/use-file-operations'
-import { useSkillAssetTreeData } from './hooks/use-skill-asset-tree'
-import { getTargetFolderIdFromSelection } from './utils/tree-utils'
+import { ROOT_ID } from '../constants'
+import MenuItem from '../file-tree/tree/menu-item'
+import { useSkillAssetTreeData } from '../hooks/file-tree/data/use-skill-asset-tree'
+import { useFileOperations } from '../hooks/file-tree/operations/use-file-operations'
+import { getTargetFolderIdFromSelection } from '../utils/tree-utils'
 
-const ImportSkillModal = dynamic(() => import('./start-tab/import-skill-modal'), {
+const ImportSkillModal = dynamic(() => import('../start-tab/import-skill-modal'), {
   ssr: false,
 })
 
diff --git a/web/app/components/workflow/skill/file-tab-item.tsx b/web/app/components/workflow/skill/skill-body/tabs/file-tab-item.tsx
similarity index 98%
rename from web/app/components/workflow/skill/file-tab-item.tsx
rename to web/app/components/workflow/skill/skill-body/tabs/file-tab-item.tsx
index d9c6fc37eb..33ffdfb066 100644
--- a/web/app/components/workflow/skill/file-tab-item.tsx
+++ b/web/app/components/workflow/skill/skill-body/tabs/file-tab-item.tsx
@@ -7,7 +7,7 @@ import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
 import { cn } from '@/utils/classnames'
-import { getFileIconType } from './utils/file-utils'
+import { getFileIconType } from '../../utils/file-utils'
 
 type FileTabItemProps = {
   fileId: string
diff --git a/web/app/components/workflow/skill/file-tabs.tsx b/web/app/components/workflow/skill/skill-body/tabs/file-tabs.tsx
similarity index 94%
rename from web/app/components/workflow/skill/file-tabs.tsx
rename to web/app/components/workflow/skill/skill-body/tabs/file-tabs.tsx
index 07a5f7b61f..21dee3932c 100644
--- a/web/app/components/workflow/skill/file-tabs.tsx
+++ b/web/app/components/workflow/skill/skill-body/tabs/file-tabs.tsx
@@ -6,11 +6,11 @@ import { useTranslation } from 'react-i18next'
 import Confirm from '@/app/components/base/confirm'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
 import { cn } from '@/utils/classnames'
-import { getArtifactPath, isArtifactTab, START_TAB_ID } from './constants'
+import { getArtifactPath, isArtifactTab, START_TAB_ID } from '../../constants'
+import { useSkillAssetNodeMap } from '../../hooks/file-tree/data/use-skill-asset-tree'
+import { getFileExtension } from '../../utils/file-utils'
 import FileTabItem from './file-tab-item'
-import { useSkillAssetNodeMap } from './hooks/use-skill-asset-tree'
 import StartTabItem from './start-tab-item'
-import { getFileExtension } from './utils/file-utils'
 
 const FileTabs = () => {
   const { t } = useTranslation('workflow')
diff --git a/web/app/components/workflow/skill/start-tab-item.tsx b/web/app/components/workflow/skill/skill-body/tabs/start-tab-item.tsx
similarity index 100%
rename from web/app/components/workflow/skill/start-tab-item.tsx
rename to web/app/components/workflow/skill/skill-body/tabs/start-tab-item.tsx
diff --git a/web/app/components/workflow/skill/start-tab/create-blank-skill-modal.tsx b/web/app/components/workflow/skill/start-tab/create-blank-skill-modal.tsx
index 499008e31b..61129ffcf3 100644
--- a/web/app/components/workflow/skill/start-tab/create-blank-skill-modal.tsx
+++ b/web/app/components/workflow/skill/start-tab/create-blank-skill-modal.tsx
@@ -10,8 +10,8 @@ import Modal from '@/app/components/base/modal'
 import Toast from '@/app/components/base/toast'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import { useBatchUpload } from '@/service/use-app-asset'
-import { useExistingSkillNames } from '../hooks/use-skill-asset-tree'
-import { useSkillTreeUpdateEmitter } from '../hooks/use-skill-tree-collaboration'
+import { useExistingSkillNames } from '../hooks/file-tree/data/use-skill-asset-tree'
+import { useSkillTreeUpdateEmitter } from '../hooks/file-tree/data/use-skill-tree-collaboration'
 import { prepareSkillUploadFile } from '../utils/skill-upload-utils'
 
 const SKILL_MD_TEMPLATE = (name: string) => `---
diff --git a/web/app/components/workflow/skill/start-tab/import-skill-modal.tsx b/web/app/components/workflow/skill/start-tab/import-skill-modal.tsx
index b12d42de00..08107daeb5 100644
--- a/web/app/components/workflow/skill/start-tab/import-skill-modal.tsx
+++ b/web/app/components/workflow/skill/start-tab/import-skill-modal.tsx
@@ -10,8 +10,8 @@ import Modal from '@/app/components/base/modal'
 import Toast from '@/app/components/base/toast'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import { useBatchUpload } from '@/service/use-app-asset'
-import { useExistingSkillNames } from '../hooks/use-skill-asset-tree'
-import { useSkillTreeUpdateEmitter } from '../hooks/use-skill-tree-collaboration'
+import { useExistingSkillNames } from '../hooks/file-tree/data/use-skill-asset-tree'
+import { useSkillTreeUpdateEmitter } from '../hooks/file-tree/data/use-skill-tree-collaboration'
 import { extractAndValidateZip, ZipValidationError } from '../utils/zip-extract'
 import { buildUploadDataFromZip } from '../utils/zip-to-upload-tree'
 
diff --git a/web/app/components/workflow/skill/start-tab/skill-templates-section.tsx b/web/app/components/workflow/skill/start-tab/skill-templates-section.tsx
index 34bcdb7efa..745e46edff 100644
--- a/web/app/components/workflow/skill/start-tab/skill-templates-section.tsx
+++ b/web/app/components/workflow/skill/start-tab/skill-templates-section.tsx
@@ -7,8 +7,8 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import { SearchMenu } from '@/app/components/base/icons/src/vender/knowledge'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import { useBatchUpload } from '@/service/use-app-asset'
-import { useExistingSkillNames } from '../hooks/use-skill-asset-tree'
-import { useSkillTreeUpdateEmitter } from '../hooks/use-skill-tree-collaboration'
+import { useExistingSkillNames } from '../hooks/file-tree/data/use-skill-asset-tree'
+import { useSkillTreeUpdateEmitter } from '../hooks/file-tree/data/use-skill-tree-collaboration'
 import SectionHeader from './section-header'
 import TemplateCard from './template-card'
 import TemplateSearch from './template-search'
diff --git a/web/app/components/workflow/variable-inspect/artifacts-tab.tsx b/web/app/components/workflow/variable-inspect/artifacts-tab.tsx
index 73b00e3364..6d4f28b5fb 100644
--- a/web/app/components/workflow/variable-inspect/artifacts-tab.tsx
+++ b/web/app/components/workflow/variable-inspect/artifacts-tab.tsx
@@ -10,7 +10,7 @@ import ActionButton from '@/app/components/base/action-button'
 import SearchLinesSparkle from '@/app/components/base/icons/src/vender/knowledge/SearchLinesSparkle'
 import { FileDownload01 } from '@/app/components/base/icons/src/vender/line/files'
 import Loading from '@/app/components/base/loading'
-import ArtifactsTree from '@/app/components/workflow/skill/file-tree/artifacts-tree'
+import ArtifactsTree from '@/app/components/workflow/skill/file-tree/artifacts/artifacts-tree'
 import ReadOnlyFilePreview from '@/app/components/workflow/skill/viewer/read-only-file-preview'
 import { useDocLink } from '@/context/i18n'
 import { useDownloadSandboxFile, useSandboxFileDownloadUrl, useSandboxFilesTree } from '@/service/use-sandbox-file'