From 951a580907af1c510e45660f6626325929916e86 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Tue, 20 Jan 2026 14:21:31 +0800
Subject: [PATCH] feat: artifacts section layout

---
 .../skill/file-tree/artifacts-section.tsx     | 58 +++++++++++++++++++
 .../workflow/skill/file-tree/index.tsx        | 50 +++++++++-------
 2 files changed, 87 insertions(+), 21 deletions(-)
 create mode 100644 web/app/components/workflow/skill/file-tree/artifacts-section.tsx

diff --git a/web/app/components/workflow/skill/file-tree/artifacts-section.tsx b/web/app/components/workflow/skill/file-tree/artifacts-section.tsx
new file mode 100644
index 0000000000..90c4d427fd
--- /dev/null
+++ b/web/app/components/workflow/skill/file-tree/artifacts-section.tsx
@@ -0,0 +1,58 @@
+'use client'
+
+import type { FC } from 'react'
+import { RiArrowRightSLine } from '@remixicon/react'
+import * as React from 'react'
+import FolderSpark from '@/app/components/base/icons/src/vender/workflow/FolderSpark'
+import { cn } from '@/utils/classnames'
+
+type ArtifactsSectionProps = {
+  className?: string
+}
+
+/**
+ * Artifacts section component for file tree.
+ * Shows the artifacts folder with badge and navigation arrow.
+ * Clicking expands to show artifact files from test runs.
+ * Placeholder implementation - functionality to be added later.
+ */
+const ArtifactsSection: FC<ArtifactsSectionProps> = ({ className }) => {
+  // TODO: Replace with actual data
+  const badgeText = 'Test Run#3'
+  const hasNewFiles = true
+
+  return (
+    <div className={cn('shrink-0 border-t border-divider-regular p-1', className)}>
+      <div className="flex cursor-pointer items-center rounded-md py-1 pl-2 pr-1.5 hover:bg-state-base-hover">
+        {/* Title section */}
+        <div className="flex flex-1 items-center gap-1 py-0.5">
+          {/* Icon */}
+          <div className="flex size-5 items-center justify-center">
+            <FolderSpark className="size-4 text-text-secondary" />
+          </div>
+          {/* Label */}
+          <span className="system-sm-semibold uppercase text-text-secondary">
+            Artifacts
+          </span>
+          {/* Badge */}
+          <div className="flex min-w-4 items-center justify-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1 py-0.5">
+            <span className="system-2xs-medium uppercase text-text-tertiary">
+              {badgeText}
+            </span>
+          </div>
+        </div>
+
+        {/* Arrow with indicator */}
+        <div className="relative">
+          <RiArrowRightSLine className="size-4 text-text-tertiary" />
+          {/* Blue dot indicator */}
+          {hasNewFiles && (
+            <div className="absolute -right-0.5 top-1/2 size-[7px] -translate-y-1/2 rounded-full border border-white bg-state-accent-solid" />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(ArtifactsSection)
diff --git a/web/app/components/workflow/skill/file-tree/index.tsx b/web/app/components/workflow/skill/file-tree/index.tsx
index d3c030e137..5e41e7802b 100644
--- a/web/app/components/workflow/skill/file-tree/index.tsx
+++ b/web/app/components/workflow/skill/file-tree/index.tsx
@@ -20,6 +20,7 @@ import { useInlineCreateNode } from '../hooks/use-inline-create-node'
 import { useRootFileDrop } from '../hooks/use-root-file-drop'
 import { useSkillAssetTreeData } from '../hooks/use-skill-asset-tree'
 import { useSyncTreeWithActiveTab } from '../hooks/use-sync-tree-with-active-tab'
+import ArtifactsSection from './artifacts-section'
 import DragActionTooltip from './drag-action-tooltip'
 import TreeContextMenu from './tree-context-menu'
 import TreeNode from './tree-node'
@@ -166,35 +167,41 @@ const FileTree: React.FC<FileTreeProps> = ({ className }) => {
 
   if (treeChildren.length === 0 && !hasPendingCreate) {
     return (
-      <div className={cn('flex min-h-0 flex-1 flex-col', className)}>
-        <div className="flex flex-1 flex-col items-center justify-center gap-2 px-4 text-center">
-          <span className="system-xs-regular text-text-tertiary">
-            {t('skillSidebar.empty')}
-          </span>
+      <>
+        <div className={cn('flex min-h-0 flex-1 flex-col', className)}>
+          <div className="flex flex-1 flex-col items-center justify-center gap-2 px-4 text-center">
+            <span className="system-xs-regular text-text-tertiary">
+              {t('skillSidebar.empty')}
+            </span>
+          </div>
+          <DropTip />
         </div>
-        <DropTip />
-      </div>
+        <ArtifactsSection />
+      </>
     )
   }
 
   // Search has no matching results
   if (hasSearchNoResults) {
     return (
-      <div className={cn('flex min-h-0 flex-1 flex-col', className)}>
-        <div className="flex flex-1 flex-col items-center justify-center gap-2 pb-20">
-          <SearchMenu className="size-8 text-text-tertiary" />
-          <span className="system-xs-regular text-text-secondary">
-            {t('skillSidebar.searchNoResults')}
-          </span>
-          <Button
-            variant="secondary-accent"
-            size="small"
-            onClick={() => storeApi.getState().setFileTreeSearchTerm('')}
-          >
-            {t('skillSidebar.resetFilter')}
-          </Button>
+      <>
+        <div className={cn('flex min-h-0 flex-1 flex-col', className)}>
+          <div className="flex flex-1 flex-col items-center justify-center gap-2 pb-20">
+            <SearchMenu className="size-8 text-text-tertiary" />
+            <span className="system-xs-regular text-text-secondary">
+              {t('skillSidebar.searchNoResults')}
+            </span>
+            <Button
+              variant="secondary-accent"
+              size="small"
+              onClick={() => storeApi.getState().setFileTreeSearchTerm('')}
+            >
+              {t('skillSidebar.resetFilter')}
+            </Button>
+          </div>
         </div>
-      </div>
+        <ArtifactsSection />
+      </>
     )
   }
 
@@ -250,6 +257,7 @@ const FileTree: React.FC<FileTreeProps> = ({ className }) => {
       {dragOverFolderId
         ? <DragActionTooltip action="upload" />
         : <DropTip />}
+      <ArtifactsSection />
       <TreeContextMenu treeRef={treeRef} />
     </>
   )