feat: add insert @ info

web/app/components/workflow/skill/start-tab/create-import-section.tsx

@@ -17,7 +17,7 @@ const CreateImportSection = () => {
 
   return (
     <>
-      <div className="grid grid-cols-3 gap-2 px-6 pb-4 pt-6">
+      <div className="grid grid-cols-3 gap-2 px-6 pb-4 pt-0">
         <ActionCard
           icon={<span className="i-ri-add-circle-fill size-5 text-text-accent" />}
           title={t('skill.startTab.createBlankSkill')}

web/app/components/workflow/skill/start-tab/file-explorer-intro.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { memo } from 'react'
+import { Trans } from 'react-i18next'
+
+const FileExplorerIntro = () => {
+  return (
+    <section className="px-6 pb-4 pt-4">
+      <p className="flex h-8 items-center rounded-md border border-text-accent-secondary bg-components-badge-bg-dimm px-2 text-text-accent-secondary system-xs-medium">
+        <Trans
+          i18nKey="skill.startTab.fileExplorerIntro"
+          ns="workflow"
+          components={{
+            mention: (
+              <span className="mx-0.5 inline-flex h-4 w-3.5 items-center justify-center rounded-[4px] bg-components-button-secondary-accent-text-disabled text-components-button-secondary-accent-text system-kbd">
+                @
+              </span>
+            ),
+          }}
+        />
+      </p>
+    </section>
+  )
+}
+
+export default memo(FileExplorerIntro)

web/app/components/workflow/skill/start-tab/index.spec.tsx

@@ -55,6 +55,7 @@ describe('StartTabContent', () => {
     it('should render create/import actions and template list when mounted', () => {
       const { container } = render(<StartTabContent />)
 
+      expect(screen.getByText('skill.startTab.fileExplorerIntro')).toBeInTheDocument()
       expect(screen.getByRole('button', { name: /workflow\.skill\.startTab\.createBlankSkill/i })).toBeInTheDocument()
       expect(screen.getByRole('button', { name: /workflow\.skill\.startTab\.importSkill/i })).toBeInTheDocument()
       expect(screen.getByRole('textbox')).toBeInTheDocument()

web/app/components/workflow/skill/start-tab/index.tsx

@@ -4,6 +4,7 @@ import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ScrollArea } from '@/app/components/base/ui/scroll-area'
 import CreateImportSection from './create-import-section'
+import FileExplorerIntro from './file-explorer-intro'
 import SkillTemplatesSection from './skill-templates-section'
 
 const StartTabContent = () => {
@@ -19,6 +20,7 @@ const StartTabContent = () => {
           scrollbar: 'z-20',
         }}
       >
+        <FileExplorerIntro />
         <CreateImportSection />
         <SkillTemplatesSection />
       </ScrollArea>

web/i18n/en-US/workflow.json

@@ -1232,6 +1232,7 @@
   "skill.startTab.createModal.namePlaceholder": "Enter skill name",
   "skill.startTab.createModal.title": "Create Blank Skill",
   "skill.startTab.createSuccess": "Skill \"{{name}}\" created successfully",
+  "skill.startTab.fileExplorerIntro": "Manage uploaded files and folders here. In the Agent node's Prompt editor, select any uploaded file or folder and type <mention>@</mention> to reference it.",
   "skill.startTab.filesIncluded": "{{count}} files included",
   "skill.startTab.importModal.browseFiles": "Browse Files",
   "skill.startTab.importModal.changeFile": "Change File",

web/i18n/zh-Hans/workflow.json

@@ -1230,6 +1230,7 @@
   "skill.startTab.createModal.namePlaceholder": "输入 Skill 名称",
   "skill.startTab.createModal.title": "创建空白 Skill",
   "skill.startTab.createSuccess": "Skill \"{{name}}\" 创建成功",
+  "skill.startTab.fileExplorerIntro": "在此管理已上传的文件与目录。在 Agent 节点的 Prompt 编辑器中，可选择任意已上传的文件或目录，输入 <mention>@</mention> 即可调用。",
   "skill.startTab.filesIncluded": "包含 {{count}} 个文件",
   "skill.startTab.importModal.browseFiles": "浏览文件",
   "skill.startTab.importModal.changeFile": "更换文件",