refactor(skill): regroup skill body, file tree, and tree hooks

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'

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'

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
 

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'
 

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'

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

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 = {

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 = {

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'
 

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'

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

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'

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.

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

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 = {

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 = {

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 = {

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,
 }))
 

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>

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'

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 = {

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'

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'

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

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

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

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')

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')

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>

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,
   }),

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()

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
 

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')

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" /> },
 )
 

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,
 })
 

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

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')

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) => `---

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'
 

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'

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'